/* ==========================================================================
   ComeGame — Design Tokens  |  Theme: "Emerald Forge"
   Single source of truth for colour, type, spacing, radius, shadow, motion.
   ========================================================================== */

:root {
  /* ---- Colour: surfaces -------------------------------------------------- */
  --color-bg-primary:      #0A0F0C;   /* near-black w/ green undertone */
  --color-bg-surface:      #10160F;
  --color-bg-surface-2:    #161F17;
  --color-bg-elevated:     #1B261C;
  --color-matte-black:     #0D0D0D;

  /* ---- Colour: accents --------------------------------------------------- */
  --color-accent-emerald:  #00B368;   /* primary emerald */
  --color-accent-bright:   #12E38A;   /* hover / glow */
  --color-accent-dim:      #087A46;

  /* ---- Colour: text ------------------------------------------------------ */
  --color-text-primary:    #F2FBF6;
  --color-text-secondary:  #9FC2AC;
  --color-text-muted:      #5C7566;

  /* ---- Colour: utility --------------------------------------------------- */
  --color-border:          #1F2E22;
  --color-border-strong:   #2C4232;
  --color-success:         #12E38A;
  --color-error:           #FF5C5C;
  --color-warning:         #E8C468;
  --color-gold-highlight:  #E8C468;   /* sparing use — bonus badges/CTAs */

  /* ---- Glass surfaces ---------------------------------------------------- */
  --glass-bg:              rgba(27, 38, 28, 0.60);
  --glass-bg-strong:       rgba(27, 38, 28, 0.82);
  --glass-border:          rgba(0, 179, 104, 0.15);
  --glass-border-hover:    rgba(18, 227, 138, 0.42);
  --glass-blur:            blur(12px);

  /* ---- Signature gradients ---------------------------------------------- */
  --grad-signature:  linear-gradient(135deg, #00B368 0%, #087A46 60%, #0A0F0C 100%);
  --grad-emerald:    linear-gradient(135deg, #12E38A 0%, #00B368 55%, #087A46 100%);
  --grad-gold:       linear-gradient(135deg, #F4D98B 0%, #E8C468 45%, #C99B35 100%);
  --grad-surface:    linear-gradient(180deg, #161F17 0%, #10160F 100%);
  --grad-hero-glow:  radial-gradient(60% 60% at 50% 0%, rgba(0,179,104,0.22) 0%, rgba(10,15,12,0) 70%);
  --grad-text:       linear-gradient(120deg, #F2FBF6 0%, #12E38A 55%, #00B368 100%);

  /* ---- Typography -------------------------------------------------------- */
  --font-display: 'Rajdhani', 'Orbitron', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-hero:    clamp(2.5rem, 6vw + 0.5rem, 5rem);
  --fs-h1:      clamp(2rem, 4vw + 0.5rem, 3.5rem);
  --fs-h2:      clamp(1.65rem, 2.5vw + 0.5rem, 2.6rem);
  --fs-h3:      clamp(1.3rem, 1.5vw + 0.5rem, 1.75rem);
  --fs-h4:      clamp(1.1rem, 1vw + 0.4rem, 1.3rem);
  --fs-lead:    clamp(1.05rem, 0.6vw + 0.9rem, 1.3rem);
  --fs-body:    1rem;
  --fs-sm:      0.9rem;
  --fs-xs:      0.78rem;

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

  --ls-display: 0.02em;
  --ls-caps:    0.14em;

  /* ---- Spacing scale ----------------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  --container:      1240px;
  --container-narrow: 860px;
  --gutter:         clamp(1rem, 4vw, 2.5rem);

  /* ---- Radius ------------------------------------------------------------ */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  32px;
  --radius-pill: 999px;

  /* ---- Shadow / glow ----------------------------------------------------- */
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.35);
  --shadow-md:    0 10px 30px rgba(0,0,0,0.45);
  --shadow-lg:    0 24px 60px rgba(0,0,0,0.55);
  --glow-emerald: 0 0 0 1px rgba(0,179,104,0.25), 0 8px 30px rgba(0,179,104,0.25);
  --glow-emerald-strong: 0 0 0 1px rgba(18,227,138,0.45), 0 12px 44px rgba(18,227,138,0.38);
  --glow-gold:    0 8px 30px rgba(232,196,104,0.35);

  /* ---- Motion ------------------------------------------------------------ */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   160ms;
  --dur-mid:    320ms;
  --dur-slow:   600ms;

  /* ---- Layout ------------------------------------------------------------ */
  --header-h:   72px;
  --z-header:   100;
  --z-fab:      120;
  --z-mobilebar: 115;
  --z-modal:    200;
  --z-toast:    300;
}