/* ============================================================
   IPL Fantasy Buzz — Design Tokens
   Sandstone Matchday with controlled teal + terracotta CTA
   ============================================================ */

:root {
  /* Surface */
  --bg:           #FFF8F2;   /* sandstone paper */
  --bg-alt:       #FBEFE3;   /* tonal band */
  --surface:      #FFFFFF;   /* editorial card */
  --surface-2:    #FCE8D7;   /* warm accent surface */
  --surface-3:    #F4E3D0;   /* deeper warm band */

  /* Ink */
  --ink:          #2A1B12;   /* dark editorial ink */
  --ink-2:        #4A352A;   /* secondary text */
  --muted:        #745D50;   /* meta + small text */
  --muted-2:      #9A8170;   /* tertiary */

  /* Accent — teal as the editorial data signal */
  --accent:       #0B6E69;
  --accent-2:     #0A5A56;
  --accent-soft:  rgba(11, 110, 105, 0.10);
  --accent-line:  rgba(11, 110, 105, 0.25);

  /* Action — terracotta reserved for primary CTA */
  --action:       #B64B28;
  --action-2:     #973A1C;
  --action-soft:  rgba(182, 75, 40, 0.08);

  /* Borders + dividers */
  --border:       #EBCDBA;
  --border-2:     #E0C5A8;
  --hair:         rgba(43, 27, 18, 0.08);

  /* Data signal palette (used in tables and stat tiles) */
  --signal-1:     #0B6E69;   /* win */
  --signal-2:     #B64B28;   /* loss / hot */
  --signal-3:     #8C6A1A;   /* draw / neutral */
  --signal-soft:  rgba(11, 110, 105, 0.06);

  /* Shape */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(43, 27, 18, 0.04), 0 1px 1px rgba(43, 27, 18, 0.03);
  --shadow-2: 0 4px 14px rgba(43, 27, 18, 0.06), 0 2px 4px rgba(43, 27, 18, 0.04);
  --shadow-3: 0 10px 28px rgba(43, 27, 18, 0.10), 0 4px 10px rgba(43, 27, 18, 0.05);

  /* Typography */
  --font-body: "Nunito Sans", "Noto Sans Devanagari", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-hindi: "Noto Sans Devanagari", "Nunito Sans", system-ui, sans-serif;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* Container */
  --container: 1240px;
  --container-narrow: 920px;

  /* Header */
  --header-h: 72px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur-mid: 240ms;
  --dur-slow: 420ms;
}