/* ============================================================================
   tokens.css — single source of truth for the entire Orpheus app.
   Every other stylesheet references these variables. No raw hex / font / radius
   / duration anywhere else.
   World: a moonlit Greek twilight — deep violet, lavender mist, gold lyre-light.
   Sampled from the pixel-art scene + sprite so hero and room read as one place.
   ============================================================================ */

:root {
  /* ── twilight palette ────────────────────────────────────────────────── */
  --void:        #121029;  /* deepest night / page base            */
  --night:       #1A1640;  /* base background                      */
  --dusk:        #241E4E;  /* raised surface                       */
  --panel:       #2C2560;  /* solid panel / sunk fields            */
  --violet-deep: #3C2E73;  /* borders, deep accents                */
  --violet:      #7C53C0;  /* primary accent (rich violet)         */
  --violet-lift: #9A66D8;  /* hover / brighter violet              */
  --iris:        #8E86DA;  /* periwinkle — moonlit secondary       */
  --lavender:    #C7A6F0;  /* light accent / links                 */
  --shimmer:     #DCB6F4;  /* river-light highlight                */
  --gold:        #E6B25C;  /* lyre gold — warm CTA accent          */
  --gold-lift:   #F1C277;  /* gold hover                           */
  --terracotta:  #C77B5A;  /* warm clay — playful mood             */
  --moon:        #EFE9FF;  /* primary text (moonlight)             */
  --mist:        #BCB0E6;  /* secondary text                       */
  --faint:       #8A7EBE;  /* tertiary text / captions             */
  --rose:        #D7A0C8;  /* gentle/affectionate moments          */
  --ember:       #C76A5A;  /* destructive actions only (muted, earthy) */
  --ember-soft:  #E7A79A;  /* destructive text on dark             */
  --ember-bright:#FFD9D2;  /* destructive text on hover            */
  --gold-text:   #3A2606;  /* dark text on the gold CTA            */

  /* channel values for rgba() (glass, glows, scrims) */
  --void-rgb:   18, 16, 41;
  --night-rgb:  26, 22, 64;
  --violet-rgb: 124, 83, 192;
  --iris-rgb:   142, 134, 218;
  --gold-rgb:   230, 178, 92;
  --moon-rgb:   239, 233, 255;
  --lavender-rgb: 199, 166, 240;
  --ember-rgb:  199, 106, 90;

  /* ── type ────────────────────────────────────────────────────────────── */
  --font-display: "Pixelify Sans", "Trebuchet MS", system-ui, sans-serif; /* wordmark/titles/buttons */
  --font-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif; /* body + journal */
  --leading: 1.65;
  --leading-snug: 1.3;
  --tracking-display: 0.01em;

  /* ── shape ───────────────────────────────────────────────────────────── */
  --radius-panel: 20px;
  --radius-card: 16px;
  --radius-control: 12px;
  --radius-pill: 999px;

  /* ── glass surfaces (translucent dark-violet, cozy-game UI) ───────────── */
  --glass: rgba(var(--night-rgb), 0.55);
  --glass-strong: rgba(18, 16, 41, 0.74);
  --glass-line: rgba(var(--lavender-rgb), 0.18);
  --glass-blur: 16px;

  /* ── texture: soft, diffuse, warm-violet shadows + glows (never crisp) ── */
  --shadow-panel: 0 22px 60px rgba(8, 6, 24, 0.55);
  --shadow-soft:  0 14px 36px rgba(8, 6, 24, 0.40);
  --shadow-press: 0 4px 14px rgba(8, 6, 24, 0.40);
  --glow-violet:  0 0 42px rgba(var(--violet-rgb), 0.45);
  --glow-iris:    0 0 30px rgba(var(--iris-rgb), 0.40);
  --glow-gold:    0 0 28px rgba(var(--gold-rgb), 0.45);

  /* ── motion: slow + soft, ease-out, gentle settle — never snappy ──────── */
  --dur: 360ms;
  --dur-slow: 460ms;
  --dur-page: 620ms;        /* hero → room fade */
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-settle: cubic-bezier(0.34, 1.42, 0.64, 1);
  --ease-loop: ease-in-out;
  --breathe-dur: 4s;
  --twinkle-dur: 4s;        /* star twinkle period (per-star stagger via delay) */
}