/* =========================================================
   IPL Fantasy Pro — DARK_COLOR_002 STADIUM EMERALD
   Token system: all colors, gradients, shadows, radii live here.
   ========================================================= */

:root {
  /* ---------- Brand primaries ---------- */
  --primary:       #24C660;
  --primary-dark:  #1C9A4B;
  --primary-darker:#13733A;
  --accent:        #FACC17;
  --accent-dark:   #C9A40E;
  --warning:       #F97316;
  --danger:        #EF4444;
  --info:          #38BDF8;

  /* ---------- Dark surfaces (NEVER white) ---------- */
  --background:    #041611;
  --surface:       #08271F;
  --surface-2:     #0F3B2D;
  --surface-3:     #134C39;
  --overlay:       rgba(4, 22, 17, 0.72);
  --overlay-soft:  rgba(4, 22, 17, 0.45);

  /* ---------- Text ---------- */
  --text:          #F8FAFC;
  --text-strong:   #FFFFFF;
  --muted:         #CBD5E1;
  --muted-2:       #94A3B8;
  --inverse:       #041611;

  /* ---------- Borders / dividers ---------- */
  --border:        rgba(255, 255, 255, 0.14);
  --soft-border:   rgba(255, 255, 255, 0.08);
  --primary-border:rgba(36, 198, 96, 0.35);
  --accent-border: rgba(250, 204, 23, 0.30);

  /* ---------- Gradients ---------- */
  --gradient:      linear-gradient(135deg, #041611 0%, #08271F 48%, #0F3B2D 100%);
  --gradient-hero: linear-gradient(160deg, #041611 0%, #08271F 38%, #0F3B2D 78%, #134C39 100%);
  --gradient-cta:  linear-gradient(135deg, #24C660 0%, #1C9A4B 100%);
  --gradient-accent:linear-gradient(135deg, #FACC17 0%, #C9A40E 100%);
  --gradient-tile: linear-gradient(160deg, #08271F 0%, #0F3B2D 100%);
  --gradient-strip:linear-gradient(90deg, rgba(36,198,96,0.18) 0%, rgba(36,198,96,0.0) 100%);

  /* ---------- Shadows ---------- */
  --shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-md:  0 8px 22px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 18px 42px rgba(0, 0, 0, 0.55);
  --shadow-glow:0 0 0 3px rgba(36, 198, 96, 0.22);
  --shadow-accent: 0 0 0 3px rgba(250, 204, 23, 0.22);

  /* ---------- Radii (varied 8–24 per spec) ---------- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl:24px;
  --r-pill:999px;

  /* ---------- Spacing scale ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 72px;

  /* ---------- Typography (TYPO_005) ---------- */
  --ff-base: system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans Devanagari", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-12: 12px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-36: 36px;
  --fs-44: 44px;
  --fs-56: 56px;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.7;

  /* ---------- Layout ---------- */
  --container:    1200px;
  --container-md: 960px;
  --container-sm: 720px;
  --header-h:     68px;
  --sticky-cta-h: 64px;
  --z-header:     50;
  --z-sticky-cta: 60;
  --z-toast:      70;

  /* ---------- Motion ---------- */
  --t-fast: 120ms ease;
  --t-base: 200ms ease;
  --t-slow: 320ms ease;
}