/* =========================================================
   OUIJA CTF — Design Tokens
   A single source of truth for the séance aesthetic.
   ========================================================= */

:root {
  /* ---------- Void: the darkness behind the veil ---------- */
  --void-900: #040306;
  --void-800: #07060b;
  --void-700: #0c0a12;
  --void-600: #13101b;
  --void-500: #1c1826;
  --void-400: #272132;

  /* ---------- Board: aged maple, orange varnish ---------- */
  --wood-900: #2b1c0e;
  --wood-800: #3d2914;
  --wood-700: #55391b;
  --wood-600: #6f4a23;
  --wood-500: #8a5d2c;
  --wood-400: #a97538;

  /* Stencilled ink on the board face */
  --ink-900: #150d05;
  --ink-700: #2a1a09;
  --ink-500: #4a2f13;

  /* ---------- Brass & candlelight ---------- */
  --brass-600: #8c6520;
  --brass-500: #b8862f;
  --brass-400: #d9a94a;
  --brass-300: #eec97a;
  --brass-200: #f7e3ae;

  --flame-core: #fff3c4;
  --flame-mid: #ffb44a;
  --flame-edge: #d2570f;

  /* ---------- Ember red: warnings, blood, wax seals ---------- */
  --ember-700: #5e1210;
  --ember-600: #7d1a16;
  --ember-500: #a3231d;
  --ember-400: #c8402f;
  --ember-300: #e8705a;

  /* ---------- Spectral: the planchette's glow, spirits ---------- */
  --spectre-600: #3d7f72;
  --spectre-500: #58a99a;
  --spectre-400: #7fd4c1;
  --spectre-300: #a9ecdd;
  --spectre-200: #d6f7ef;

  /* ---------- Parchment: text on dark ---------- */
  --parchment-100: #f4ecd8;
  --parchment-200: #e2d5b8;
  --parchment-300: #c4b394;
  --parchment-400: #9c8b72;
  --parchment-500: #6f6353;

  /* ---------- Semantic ---------- */
  --bg: var(--void-900);
  --bg-raised: var(--void-700);
  --surface: rgba(28, 24, 38, 0.55);
  --surface-strong: rgba(19, 16, 27, 0.88);
  --border: rgba(217, 169, 74, 0.16);
  --border-strong: rgba(217, 169, 74, 0.38);

  --text: var(--parchment-200);
  --text-dim: var(--parchment-400);
  --text-bright: var(--parchment-100);
  --text-accent: var(--brass-300);

  --success: var(--spectre-400);
  --danger: var(--ember-400);
  --warning: var(--brass-400);

  /* ---------- Typography ---------- */
  --font-display: "Cinzel Decorative", "Cinzel", Georgia, serif;
  --font-serif: "Cinzel", Georgia, "Times New Roman", serif;
  --font-board: "IM Fell English SC", "Cinzel", Georgia, serif;
  --font-type: "Special Elite", "Courier New", monospace;
  --font-body: "Cormorant Garamond", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Fluid type scale */
  --fs-xs: clamp(0.69rem, 0.66rem + 0.15vw, 0.78rem);
  --fs-sm: clamp(0.81rem, 0.78rem + 0.18vw, 0.92rem);
  --fs-base: clamp(0.98rem, 0.94rem + 0.22vw, 1.12rem);
  --fs-md: clamp(1.12rem, 1.05rem + 0.34vw, 1.32rem);
  --fs-lg: clamp(1.34rem, 1.2rem + 0.66vw, 1.78rem);
  --fs-xl: clamp(1.68rem, 1.4rem + 1.3vw, 2.6rem);
  --fs-2xl: clamp(2.1rem, 1.6rem + 2.4vw, 4rem);
  --fs-3xl: clamp(2.6rem, 1.7rem + 4.2vw, 6rem);

  --lh-tight: 1.12;
  --lh-snug: 1.32;
  --lh-normal: 1.62;
  --lh-loose: 1.85;

  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.06em;
  --ls-wider: 0.16em;
  --ls-widest: 0.32em;

  /* ---------- Space (8pt-ish rhythm) ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* ---------- Radii ---------- */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 26px;
  --r-full: 999px;

  /* ---------- Elevation & glow ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 6px 20px -6px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 22px 60px -18px rgba(0, 0, 0, 0.9);
  --shadow-xl: 0 40px 110px -30px rgba(0, 0, 0, 0.95);

  --glow-brass: 0 0 28px rgba(217, 169, 74, 0.28);
  --glow-brass-strong: 0 0 12px rgba(238, 201, 122, 0.55), 0 0 44px rgba(217, 169, 74, 0.35);
  --glow-spectre: 0 0 30px rgba(127, 212, 193, 0.4);
  --glow-spectre-strong: 0 0 14px rgba(169, 236, 221, 0.7), 0 0 52px rgba(127, 212, 193, 0.45);
  --glow-ember: 0 0 26px rgba(200, 64, 47, 0.4);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spirit: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 620ms;
  --dur-veil: 900ms;

  /* ---------- Layout ---------- */
  --wrap: 1180px;
  --wrap-narrow: 720px;
  --header-h: 76px;

  /* ---------- Z-index ladder ---------- */
  --z-fog-back: 1;
  --z-content: 10;
  --z-fog-front: 20;
  --z-grain: 30;
  --z-vignette: 31;
  --z-cursor: 40;
  --z-header: 50;
  --z-modal: 80;
  --z-veil: 100;
}