/* mySDAtv · A "Broadcast" · design tokens (custom properties only) */
:root {
  color-scheme: dark;

  /* colour: deep-space navy set, gold from the "SDA" letters, blues from the globe */
  --bg: #050A1A;
  --bg-2: #070E22;
  --surface-1: #0C1530;
  --surface-2: #121D3D;
  --surface-3: #1A2850;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #F4F7FF;
  --muted: #A9B4D0;          /* 9.5:1 on --bg, 7.9:1 on --surface-2 */
  --gold: #FFD21F;           /* primary fill, navy text on top (13.6:1) */
  --gold-hover: #FFE14F;
  --cream: #FFF6D6;
  --red: #ED1C24;            /* LIVE dots, glow badges only, never small text */
  --red-glow: rgba(237, 28, 36, 0.45);
  --royal: #0B4EA2;
  --azure: #0A8FD8;          /* glows, rings, gradients */
  --sky: #7CC6EA;            /* links + focus ring (10.5:1 on --bg) */
  --glow-azure: rgba(10, 143, 216, 0.38);
  --glow-sky: rgba(124, 198, 234, 0.5);
  --glow-gold: rgba(255, 210, 31, 0.32);
  --tile: #FFFFFF;           /* channel logos are drawn on white */
  --on-gold: #050A1A;
  --focus: var(--sky);

  --grad-gold: linear-gradient(100deg, #FFD21F 0%, #FFE97A 55%, #FFF6D6 100%);
  --grad-stage: radial-gradient(60% 70% at 18% 55%, rgba(10, 143, 216, 0.28), rgba(10, 143, 216, 0) 70%);

  /* type: one geometric sans for everything */
  --font: "Plus Jakarta Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  --fs-3xl: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
  --fs-display: clamp(2.5rem, 1.35rem + 4.8vw, 4.75rem); /* up to 76px */
  --lh-tight: 1.02;
  --lh-snug: 1.18;
  --lh-body: 1.6;
  --track-tight: -0.035em;
  --track-caps: 0.16em;

  /* space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --section-y: clamp(3rem, 7vw, 6rem);
  --max: 1440px;
  --measure: 64ch;

  /* shape and depth */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-lift: 0 26px 50px -14px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(124, 198, 234, 0.45), 0 0 36px -6px var(--glow-azure);
  --ring: 0 0 0 4px rgba(124, 198, 234, 0.28);

  /* motion */
  --dur: 200ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --marquee-dur: 38s;

  /* chrome */
  --header-h: 72px;
  --actionbar-h: 64px;
}