/* comeliveipl1 — CSS variables (Cyan Live Match palette, DARK_COLOR_SYSTEM_092) */
:root {
  --primary: #16BBD7;
  --primary-dark: #1192A8;
  --primary-soft: rgba(22, 187, 215, 0.18);
  --accent: #FDE251;        /* live status yellow, NEVER CTA */
  --accent-soft: rgba(253, 226, 81, 0.16);
  --live: #FF4D5E;          /* broadcast live red */
  --live-soft: rgba(255, 77, 94, 0.16);

  --background: #04141D;
  --surface: #082137;
  --surface-2: #0D3752;
  --surface-3: #113E5C;
  --overlay: rgba(8, 33, 55, 0.86);

  --text: #F8FAFC;
  --muted: #CBD5E1;
  --dim: #94A3B8;
  --faint: #64748B;

  --border: rgba(255, 255, 255, 0.14);
  --soft-border: rgba(255, 255, 255, 0.08);
  --strong-border: rgba(22, 187, 215, 0.4);

  --gradient: linear-gradient(135deg, #04141D 0%, #082137 48%, #0D3752 100%);
  --gradient-cyan: linear-gradient(135deg, rgba(22, 187, 215, 0.12) 0%, rgba(22, 187, 215, 0.02) 100%);
  --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-cyan: 0 0 0 1px rgba(22, 187, 215, 0.45), 0 8px 24px rgba(22, 187, 215, 0.18);

  --max-w: 1240px;
  --max-w-narrow: 880px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --font-display: "DM Sans", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "DM Sans", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "Menlo", "Consolas", monospace;

  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 520ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}