/* ============================================================
   dk999 game — Emerald Vault Design Tokens
   Single source of truth for color, type, spacing, motion.
   ============================================================ */

:root {
  /* ---- Color: emerald base ---- */
  --color-bg: #06140F;
  --color-bg-alt: #081D16;
  --color-surface: #0D2A20;
  --color-surface-2: #113627;
  --color-teal: #0B3B3D;
  --color-teal-bright: #147A7C;
  --color-emerald: #0E9E63;
  --color-emerald-bright: #1BD98A;

  /* ---- Color: gold as material ---- */
  --color-gold: #C9A646;
  --color-gold-bright: #F0D98C;
  --color-gold-line: #9C7E2F;

  /* ---- Text ---- */
  --text-primary: #EFF6F1;
  --text-secondary: #8FB8A6;
  --text-muted: #4C6F60;

  /* ---- Structure ---- */
  --border: #1B3F30;
  --border-strong: #24543f;

  /* ---- Glows ---- */
  --glow-emerald: 0 0 28px rgba(27, 217, 138, 0.28);
  --glow-gold: 0 0 22px rgba(240, 217, 140, 0.32);

  /* ---- Gradients ---- */
  --grad-gold: linear-gradient(135deg, #F0D98C 0%, #C9A646 45%, #9C7E2F 100%);
  --grad-emerald: linear-gradient(135deg, #1BD98A 0%, #0E9E63 55%, #0B3B3D 100%);
  --grad-surface: linear-gradient(160deg, #113627 0%, #0D2A20 60%, #081D16 100%);
  --grad-vault: radial-gradient(circle at 50% 40%, rgba(27, 217, 138, 0.18), rgba(6, 20, 15, 0) 62%);

  /* ---- Typography ---- */
  --font-display: "Fraunces", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-hero: clamp(2.7rem, 6vw, 5rem);
  --fs-h1: clamp(2.2rem, 4.5vw, 3.6rem);
  --fs-h2: clamp(1.8rem, 3.4vw, 2.7rem);
  --fs-h3: clamp(1.3rem, 2.2vw, 1.7rem);
  --fs-h4: clamp(1.1rem, 1.6vw, 1.28rem);
  --fs-body: clamp(1rem, 1.05vw, 1.075rem);
  --fs-sm: 0.9rem;
  --fs-xs: 0.78rem;

  --lh-tight: 1.12;
  --lh-snug: 1.35;
  --lh-body: 1.72;

  /* ---- Spacing scale ---- */
  --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;

  /* ---- Layout ---- */
  --container: 1240px;
  --container-wide: 1440px;
  --gutter: clamp(1.1rem, 4vw, 2.6rem);
  --header-h: 76px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 620ms;

  /* ---- Elevation ---- */
  --shadow-1: 0 4px 18px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 18px 48px rgba(0, 0, 0, 0.5);
  --shadow-inset-gold: inset 0 0 0 1px rgba(201, 166, 70, 0.35);

  --z-header: 100;
  --z-panel: 200;
  --z-fab: 150;
  --z-modal: 300;
  --z-wipe: 400;
}

/* prefers-reduced-motion: neutralise durations globally */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}