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

:root {
  /* ---- Colour: surfaces -------------------------------------------------- */
  --color-bg-primary:      #FFFFFF;   /* clean white base */
  --color-bg-surface:      #F5F9F6;
  --color-bg-surface-2:    #EEF4F0;
  --color-bg-elevated:     #FFFFFF;
  --color-matte-black:     #0D0D0D;

  /* ---- Colour: accents --------------------------------------------------- */
  --color-accent-emerald:  #00B368;   /* primary emerald */
  --color-accent-bright:   #049A5C;   /* hover / glow — darkened for AA contrast on white */
  --color-accent-dim:      #087A46;

  /* ---- Colour: text ------------------------------------------------------ */
  --color-text-primary:    #0E1912;
  --color-text-secondary:  #4B5D53;
  --color-text-muted:      #7C8C82;

  /* ---- Colour: utility --------------------------------------------------- */
  --color-border:          #E1EAE4;
  --color-border-strong:   #CBDACF;
  --color-success:         #049A5C;
  --color-error:           #D93636;
  --color-warning:         #B9862A;
  --color-gold-highlight:  #B9862A;   /* sparing use — bonus badges/CTAs */

  /* ---- Glass surfaces ---------------------------------------------------- */
  --glass-bg:              rgba(255, 255, 255, 0.72);
  --glass-bg-strong:       rgba(255, 255, 255, 0.90);
  --glass-border:          rgba(0, 179, 104, 0.16);
  --glass-border-hover:    rgba(0, 154, 92, 0.45);
  --glass-blur:            blur(12px);

  /* ---- Signature gradients ---------------------------------------------- */
  --grad-signature:  linear-gradient(135deg, #12E38A 0%, #00B368 60%, #087A46 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, #FFFFFF 0%, #F5F9F6 100%);
  --grad-hero-glow:  radial-gradient(60% 60% at 50% 0%, rgba(0,179,104,0.14) 0%, rgba(255,255,255,0) 70%);
  --grad-text:       linear-gradient(120deg, #0E1912 0%, #049A5C 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(16,40,26,0.08);
  --shadow-md:    0 10px 30px rgba(16,40,26,0.10);
  --shadow-lg:    0 24px 60px rgba(16,40,26,0.14);
  --glow-emerald: 0 0 0 1px rgba(0,179,104,0.25), 0 8px 30px rgba(0,179,104,0.18);
  --glow-emerald-strong: 0 0 0 1px rgba(0,154,92,0.45), 0 12px 44px rgba(0,154,92,0.28);
  --glow-gold:    0 8px 30px rgba(185,134,42,0.28);

  /* ---- 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;
}