/* ============================================================
   comegame — Design Tokens
   "Emerald & Matte Black" theme
   ============================================================ */

:root {
  /* ---- Base / Matte Black canvas ---- */
  --bg-0: #0a0a0a;          /* deepest matte black */
  --bg-1: #0e0e0e;          /* page background */
  --bg-2: #121212;          /* raised background */
  --surface-1: #161616;     /* charcoal panel */
  --surface-2: #1c1c1c;     /* lifted panel */
  --surface-3: #222222;     /* hover panel */

  /* ---- Emerald accent system ---- */
  --emerald: #10b981;
  --emerald-bright: #12d68a;
  --emerald-600: #0fa968;
  --emerald-700: #0b8a54;
  --forest: #065f46;        /* deep forest for gradients */
  --forest-deep: #04402f;
  --teal: #0ea5a0;

  /* ---- Emerald tints / borders / glows ---- */
  --border-soft: rgba(16, 185, 129, 0.15);
  --border-mid: rgba(16, 185, 129, 0.28);
  --border-hair: rgba(255, 255, 255, 0.06);
  --glow-emerald: rgba(16, 185, 129, 0.35);
  --glow-emerald-soft: rgba(16, 185, 129, 0.18);
  --tint-emerald-04: rgba(16, 185, 129, 0.04);
  --tint-emerald-08: rgba(16, 185, 129, 0.08);
  --tint-emerald-12: rgba(16, 185, 129, 0.12);

  /* ---- Text ---- */
  --text-hi: #f4f6f5;       /* primary text */
  --text: #d6dbd9;          /* body text */
  --text-mid: #a8b0ac;      /* secondary */
  --text-low: #7c847f;      /* muted / captions */
  --text-on-emerald: #04140d;

  /* ---- Feedback ---- */
  --danger: #f4623a;
  --warn: #f0b429;
  --info: #38bdf8;

  /* ---- Gradients ---- */
  --grad-emerald: linear-gradient(135deg, #12d68a 0%, #10b981 45%, #0b8a54 100%);
  --grad-emerald-teal: linear-gradient(120deg, #12d68a 0%, #0ea5a0 55%, #065f46 100%);
  --grad-forest: linear-gradient(160deg, #0b8a54 0%, #065f46 60%, #04402f 100%);
  --grad-surface: linear-gradient(180deg, rgba(28,28,28,0.9) 0%, rgba(18,18,18,0.9) 100%);
  --grad-text: linear-gradient(120deg, #f4f6f5 0%, #b9f5d8 55%, #10b981 100%);

  /* ---- Typography ---- */
  --font-display: "Sora", "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-hero: clamp(2.6rem, 6.5vw, 4.75rem);
  --fs-h1: clamp(2.1rem, 4.6vw, 3.25rem);
  --fs-h2: clamp(1.7rem, 3.4vw, 2.5rem);
  --fs-h3: clamp(1.3rem, 2.2vw, 1.65rem);
  --fs-h4: clamp(1.1rem, 1.6vw, 1.3rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.8rem;

  --lh-tight: 1.1;
  --lh-snug: 1.35;
  --lh-body: 1.7;

  /* ---- Layout ---- */
  --maxw: 1240px;
  --maxw-narrow: 820px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 74px;
  --bottombar-h: 64px;

  /* ---- Radii ---- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 0 1px var(--border-mid), 0 10px 40px var(--glow-emerald-soft);
  --shadow-glow-strong: 0 0 30px var(--glow-emerald), 0 18px 50px rgba(0,0,0,0.5);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 520ms;

  /* ---- Z-index ---- */
  --z-header: 900;
  --z-bottombar: 850;
  --z-fab: 870;
  --z-modal: 1000;
  --z-toast: 1100;
}