/* ============================================================
   tokens.css — locked palette, type, motion
   See BRAND_HANDOFF.md §3.1, §3.2, §3.3
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&display=swap');

:root {
  /* === HERO ===
     IDENTITY COLOR MIGRATED purple → phosphor green (2026-06-22, Ali's call).
     The splash is green; the main page now matches it for one unified palette.
     The tokens are still NAMED --purple* but hold green values, so every
     existing var(--purple) usage recolors with no churn. Electric blue is now
     reserved for FUNCTIONS (slash commands) + links/annotations.
     (Original royal purple was #8b6fff / dim #6b54cc — restore via ?theme=purple.)
     TODO(cleanup): rename --purple* → --identity* once the palette is final. */
  --purple:        #7dd87d;                    /* identity → phosphor green */
  --purple-dim:    #5da55d;                    /* identity dim */
  --purple-glow:   rgba(125, 216, 125, 0.18);  /* focus-ring glow, green */
  --green:         #7dd87d;
  --green-dim:     #5da55d;
  --blue:          #4a90ff;
  --blue-dim:      #2f6dcc;

  /* === NEUTRALS === */
  --text:          #e8e6e1;
  --text-dim:      #8a8780;
  --text-faint:    #4a4842;
  --surface-2:     #13110e;
  --surface:       #0a0a0c;
  --bg:            #050507;

  /* === SIGNAL === */
  --red:           #e88378;
  --gold:          #fac200;  /* RESERVED — sigil only. Do not use elsewhere. */

  /* === BORDERS === */
  --border:        rgba(232, 230, 225, 0.12);
  --border-bright: rgba(232, 230, 225, 0.22);

  /* === TYPE === */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Monaco, 'Cascadia Mono', monospace;

  /* === MOTION === */
  --scramble-render: 50ms;
  --scramble-resolve-reveal: 1500ms;
  --scramble-resolve-glitch: 80ms;
  --breathing-cycle: 3500ms;
  --blink-cycle: 1060ms;
  --pulse-cycle: 2000ms;
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* === LAYOUT === */
  --pill-w: min(94vw, 680px);
  --pill-h: min(72vh, 520px);
  --pill-radius: 36px;
  --pill-radius-mobile: 24px;
}

/* === MOTION KEYFRAMES === */

@keyframes breathing {
  0%, 100% { opacity: 0.88; }
  50%      { opacity: 1.0; }
}

@keyframes blink {
  0%, 49.9%  { opacity: 1; }
  50%, 100%  { opacity: 0; }
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.7;
    box-shadow: 0 0 0 0 var(--green);
  }
  50% {
    opacity: 1.0;
    box-shadow: 0 0 8px 2px var(--green);
  }
}

.is-breathing { animation: breathing var(--breathing-cycle) var(--ease) infinite; }
.is-blinking  { animation: blink var(--blink-cycle) steps(1) infinite; }
.is-pulsing   { animation: pulse var(--pulse-cycle) var(--ease) infinite; }

@media (prefers-reduced-motion: reduce) {
  .is-breathing,
  .is-pulsing {
    animation: none;
    opacity: 1;
  }
  /* Cursor blink stays — it's discrete on/off, not motion. */
}

/* === TYPE UTILITY CLASSES === */
.type-display { font: 800 clamp(2.4rem, 5vw, 4rem) / 1.0 var(--font-mono); letter-spacing: -0.03em; }
.type-h1      { font: 800 clamp(2.0rem, 4vw, 3.0rem) / 1.05 var(--font-mono); letter-spacing: -0.025em; }
.type-h2      { font: 700 1.9rem / 1.2 var(--font-mono); letter-spacing: -0.015em; }
.type-h3      { font: 700 1.3rem / 1.25 var(--font-mono); letter-spacing: -0.01em; }
.type-body    { font: 400 1rem / 1.7 var(--font-mono); }
.type-caption { font: 400 0.78rem / 1.5 var(--font-mono); color: var(--text-dim); }
.type-system  { font: 400 0.72rem / 1.5 var(--font-mono); letter-spacing: 0.04em; color: var(--text-faint); }