/* ============================================================
   DOPA — Colors & Type
   The single source of truth for the visual foundations.
   Import this file at the top of any HTML in the system.
   ============================================================ */

/* --- Web fonts: Plus Jakarta Sans (variable wght) ---------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ============================================================
     COLOR — Brand swatches
     ============================================================ */
  --dopa-purple: #9B51E0;
  --dopa-pink:   #FF00CC;
  --dopa-teal:   #00FFD1;
  --dopa-yellow: #FFD700;
  --dopa-green:  #B6FF3C; /* the lime CTA pill green */
  --ink:         #0A0A0A;
  --white:       #FFFFFF;

  /* Tints used in halos, particles, subtle bloom — same hue, lower opacity */
  --dopa-purple-soft:  rgba(155, 81, 224, 0.5);
  --dopa-pink-soft:    rgba(255,   0, 204, 0.5);
  --dopa-teal-soft:    rgba(  0, 255, 209, 0.5);
  --dopa-yellow-soft:  rgba(255, 215,   0, 0.5);
  --dopa-green-soft:   rgba(182, 255,  60, 0.5);

  /* ============================================================
     COLOR — Semantic, dark-mode (the primary mode)
     ============================================================ */
  --surface-0: #0A0A0A;  /* page */
  --surface-1: #141414;  /* card */
  --surface-2: #1C1C1C;  /* raised / sheet */
  --surface-3: #242424;  /* hover / pressed */

  --fg-1: #FFFFFF;                       /* primary text */
  --fg-2: rgba(255, 255, 255, 0.72);     /* secondary text */
  --fg-3: rgba(255, 255, 255, 0.5);      /* tertiary, captions */
  --fg-4: rgba(255, 255, 255, 0.3);      /* disabled */

  --border-1: rgba(255, 255, 255, 0.08); /* default hairline */
  --border-2: rgba(255, 255, 255, 0.16); /* hover hairline */

  /* CTA color is the lime green */
  --cta-bg: var(--dopa-green);
  --cta-fg: #0A0A0A;

  /* ============================================================
     GRADIENTS — radial bloom pools, not linear sweeps
     Use these as the brand "wash" background. Layer multiple.
     ============================================================ */
  --bloom-purple:
    radial-gradient(60% 60% at 20% 30%, rgba(155, 81, 224, 0.55) 0%, rgba(155, 81, 224, 0) 70%);
  --bloom-pink:
    radial-gradient(55% 55% at 80% 20%, rgba(255,   0, 204, 0.45) 0%, rgba(255,   0, 204, 0) 70%);
  --bloom-teal:
    radial-gradient(60% 60% at 75% 85%, rgba(  0, 255, 209, 0.40) 0%, rgba(  0, 255, 209, 0) 70%);
  --bloom-yellow:
    radial-gradient(40% 40% at 15% 90%, rgba(255, 215,   0, 0.35) 0%, rgba(255, 215,   0, 0) 70%);

  /* The signature rainbow gradient — used only for the wordmark and rare moments */
  --gradient-dopa:
    linear-gradient(
      92deg,
      #FF00CC 0%,
      #9B51E0 32%,
      #00B7FF 55%,
      #00FFD1 78%,
      #B6FF3C 100%
    );

  /* ============================================================
     SHADOW & GLOW
     ============================================================ */
  --glow-pink:    0 0 32px rgba(255,   0, 204, 0.55), 0 0 80px rgba(255,   0, 204, 0.25);
  --glow-purple:  0 0 32px rgba(155,  81, 224, 0.55), 0 0 80px rgba(155,  81, 224, 0.25);
  --glow-teal:    0 0 32px rgba(  0, 255, 209, 0.55), 0 0 80px rgba(  0, 255, 209, 0.25);
  --glow-yellow:  0 0 32px rgba(255, 215,   0, 0.55), 0 0 80px rgba(255, 215,   0, 0.25);
  --glow-green:   0 0 24px rgba(182, 255,  60, 0.6),  0 0 64px rgba(182, 255,  60, 0.3);

  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-lift: 0 12px 48px rgba(0, 0, 0, 0.5);

  /* ============================================================
     SPACING — 8px base
     ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ============================================================
     RADII
     ============================================================ */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 240ms;
  --dur-3: 400ms;
  --dur-4: 600ms;

  /* ============================================================
     TYPE
     ============================================================ */
  --font-display: "Plus Jakarta Sans", ui-rounded, system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", ui-rounded, system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;
}

/* ============================================================
   BASE / SEMANTIC type styles
   Use these classes (or extend them) instead of inline sizing.
   ============================================================ */

html, body {
  background: var(--surface-0);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

.display-xl {
  font-size: clamp(56px, 9vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-weight: 800;
}

.display {
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.title {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 800;
}

.subtitle {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 800;
}

.body {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--fg-2);
}

.body-lg {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--fg-2);
}

.caption {
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--fg-3);
  letter-spacing: 0.01em;
}

.stat {
  font-family: var(--font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.eyebrow {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  white-space: nowrap;
}

/* The rainbow wordmark text style — use sparingly, only for `dopa` itself
   or a single hero word. */
.gradient-text {
  background: var(--gradient-dopa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   PRIMITIVES
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 24px;
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--dur-2) var(--ease-out-quart),
    box-shadow var(--dur-2) var(--ease-out-quart),
    background var(--dur-2) var(--ease-out-quart);
  background: var(--cta-bg);
  color: var(--cta-fg);
  box-shadow: var(--glow-green);
}
.btn:hover  { transform: translateY(-2px); box-shadow: var(--glow-green), 0 8px 24px rgba(182,255,60,0.3); }
.btn:active { transform: scale(0.97); box-shadow: 0 0 16px rgba(182,255,60,0.4); }

.btn-ghost {
  background: transparent;
  color: var(--fg-1);
  border: 1px solid var(--border-2);
  box-shadow: none;
}
.btn-ghost:hover { background: var(--surface-2); box-shadow: none; }

.card {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.input {
  width: 100%;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  padding: 14px 16px;
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 16px;
  transition: border-color var(--dur-2) var(--ease-out-quart);
}
.input::placeholder { color: var(--fg-3); }
.input:focus { outline: 0; border-color: var(--dopa-pink); }

/* ============================================================
   BLOOM BACKGROUND — drop this on any full-bleed container.
   ============================================================ */
.bloom-bg {
  position: relative;
  background-color: var(--ink);
  isolation: isolate;
  overflow: hidden;
}
.bloom-bg::before {
  content: "";
  position: absolute; inset: -10%;
  background:
    var(--bloom-purple),
    var(--bloom-pink),
    var(--bloom-teal),
    var(--bloom-yellow);
  filter: blur(60px);
  z-index: -1;
  animation: bloom-drift 32s ease-in-out infinite alternate;
}
@keyframes bloom-drift {
  0%   { transform: translate3d(0,0,0)     scale(1);    }
  50%  { transform: translate3d(2%,-2%,0)  scale(1.05); }
  100% { transform: translate3d(-2%,2%,0)  scale(1.02); }
}