/* CYAN LIVE MATCH - iplfantasypicks.com
   Dark live-match newsroom palette + tokens. Always loaded BEFORE styles.css. */
:root {
  --primary: #21BED9;
  --primary-dark: #1A94A9;
  --primary-soft: rgba(33, 190, 217, 0.12);
  --accent: #FDE358;
  --accent-soft: rgba(253, 227, 88, 0.14);
  --background: #04141E;
  --surface: #071F2F;
  --surface-2: #0F3752;
  --surface-3: #133E5C;
  --text: #F8FAFC;
  --text-strong: #FFFFFF;
  --muted: #CBD5E1;
  --muted-2: #94A3B8;
  --border: rgba(255, 255, 255, 0.14);
  --soft-border: rgba(255, 255, 255, 0.08);
  --success: #34D399;
  --warning: #FBBF24;
  --danger: #F87171;

  --gradient-hero: linear-gradient(135deg, #04141E 0%, #071F2F 55%, #0F3752 100%);
  --gradient-band: linear-gradient(180deg, #04141E 0%, #071F2F 100%);
  --gradient-cta: linear-gradient(135deg, #21BED9 0%, #1A94A9 100%);
  --gradient-accent: linear-gradient(135deg, #FDE358 0%, #F59E0B 100%);

  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 10px 32px rgba(33, 190, 217, 0.20);
  --shadow-tile: 0 2px 10px rgba(0, 0, 0, 0.30);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 72px;

  --container: 1240px;

  --t-snap: cubic-bezier(0.4, 0, 0.2, 1);
  --t-ease: ease-out;

  --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-hindi: 'Noto Sans Devanagari', 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: var(--primary); text-decoration: none; transition: color 180ms var(--t-ease); }
a:hover { color: var(--accent); }
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.2; color: var(--text-strong); font-weight: 700; }
h1 { font-size: clamp(32px, 5vw, 60px); letter-spacing: -0.02em; }
h2 { font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -0.01em; }
h3 { font-size: clamp(20px, 2.4vw, 26px); }
h4 { font-size: 18px; }
p { margin: 0 0 16px; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin: 4px 0; }