@font-face { font-family: "Ranchers"; src: url("/fonts/Ranchers-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
:root, [data-theme="light"] {
  --surface: #ffffff;
  --surface-sunken: var(--gray-bg);
  --surface-raised: #ffffff;
  --surface-player: var(--navy-deep);
  --surface-logo: #ffffff;
  --primary: var(--navy);
  --on-primary: var(--cream);
  --line: #e4e7ed;
  --line-strong: var(--navy);
  --ink: var(--navy-head);
  --ink-body: var(--body);
  --ink-muted: #666666;
  --on-player: #ffffff;
  --on-player-accent: var(--cream-gold);
  --on-player-muted: #a3acc0;
  --line-player: #34527c;
  --live: var(--red);
  --on-live: var(--navy);
  --live-ink: #c1412e;
  --accent: var(--teal-btn);
  --on-accent: var(--navy);
  --accent-ink: #067782;
  --link: var(--accent-ink);
  --highlight: var(--gold-btn);
  --on-highlight: var(--navy-head);
  --alert-urgent: var(--swirl-ember);
  --on-alert-urgent: #ffffff;
  --alert-advisory: var(--swirl-sun);
  --on-alert-advisory: var(--navy);
  --alert-warning: var(--coral);
  --on-alert-warning: var(--navy);
  --alert-shelter: var(--swirl-deep);
  --on-alert-shelter: var(--cream);
  --focus: var(--navy-head);
  --scrim: #0b0e1acc;
  --navy: #1c2138;
  --navy-deep: #143056;
  --navy-head: #144161;
  --footer-bottom: #151a2c;
  --teal: #1cb4ba;
  --teal-btn: #089fae;
  --slate: #5a9eac;
  --red: #f8533b;
  --coral: #fe8c64;
  --gold: #edad0a;
  --gold-btn: #fab75e;
  --cream: #fdfbd3;
  --cream-gold: #fee39d;
  --peach: #ffd698;
  --salmon: #ffb5a5;
  --gray-bg: #f5f5f5;
  --body: #333333;
  --footer-link: #f1fae2;
  --mint: #aeeee0;
  --brown: #b87139;
  --swirl-ember: #c7450b;
  --swirl-coral: #eb7351;
  --swirl-sun: #ffd068;
  --swirl-foam: #e5f1cd;
  --swirl-sea: #a6e0d1;
  --swirl-slate: #588d9d;
  --swirl-ocean: #0680a7;
  --swirl-deep: #133f5c;
  --shadow-rest: 0 2px 12px #14213817;
  --shadow-lift: 0 8px 22px #14213824;
  --shadow-float: 0 24px 60px #14213838;
  --shadow-player: 0 -4px 14px #00000033;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #144161;
  --focus-ring-player: 0 0 0 2px #143056, 0 0 0 4px #fee39d;
}
[data-theme="dark"] {
  --surface: var(--footer-bottom);
  --surface-sunken: #0f1322;
  --surface-raised: var(--navy);
  --surface-player: var(--navy-deep);
  --surface-logo: var(--footer-link);
  --primary: var(--cream);
  --on-primary: var(--navy);
  --line: #2a3150;
  --line-strong: var(--cream);
  --ink: var(--cream);
  --ink-body: var(--footer-link);
  --ink-muted: #a3acc0;
  --on-player-accent: var(--cream-gold);
  --live: var(--red);
  --on-live: var(--navy);
  --live-ink: var(--red);
  --accent: var(--teal-btn);
  --on-accent: var(--navy);
  --accent-ink: var(--teal);
  --link: var(--accent-ink);
  --highlight: var(--gold-btn);
  --on-highlight: var(--navy-head);
  --alert-urgent: var(--swirl-ember);
  --alert-advisory: var(--swirl-sun);
  --on-alert-advisory: var(--navy);
  --alert-warning: var(--coral);
  --on-alert-warning: var(--navy);
  --alert-shelter: var(--swirl-deep);
  --on-alert-shelter: var(--cream);
  --focus: var(--cream-gold);
  --shadow-rest: 0 1px 3px #00000080;
  --shadow-lift: 0 8px 20px #000000a6;
  --shadow-float: 0 24px 60px #000000cc;
  --shadow-player: 0 -4px 14px #00000066;
  --focus-ring: 0 0 0 2px #151a2c, 0 0 0 4px #fee39d;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-16: 64px;
  --radius-pill: 30px;
  --radius-card: 20px;
  --radius-art-lg: 22px;
  --radius-art: 18px;
  --radius-art-sm: 16px;
  --radius-inset: 12px;
  --radius-round: 9999px;
  --touch-min: 44px;
  --player-h: 72px;
  --tabbar-h: 64px;
  --play-mini: 46px;
  --play-hero: 76px;
  --art-row: 84px;
  --art-sched: 64px;
  --art-episode: 72px;
  --art-song: 52px;
  --font-display: "Ranchers", "Poppins", cursive;
  --font-body: "Poppins", Helvetica, Arial, sans-serif;
}
.display-xl { font-family: var(--font-display); font-size: 44px; line-height: 48px; font-weight: 400; letter-spacing: 0.5px; }
.display-lg { font-family: var(--font-display); font-size: 34px; line-height: 38px; font-weight: 400; letter-spacing: 0.5px; }
.display-md { font-family: var(--font-display); font-size: 26px; line-height: 30px; font-weight: 400; letter-spacing: 0.5px; }
.display-sm { font-family: var(--font-display); font-size: 20px; line-height: 24px; font-weight: 400; letter-spacing: 0.5px; }
.title-lg { font-family: var(--font-body); font-size: 22px; line-height: 28px; font-weight: 700; }
.title { font-family: var(--font-body); font-size: 17px; line-height: 22px; font-weight: 700; }
.title-sm { font-family: var(--font-body); font-size: 15px; line-height: 20px; font-weight: 700; }
.body { font-family: var(--font-body); font-size: 15px; line-height: 25px; font-weight: 400; }
.input { font-family: var(--font-body); font-size: 16px; line-height: 24px; font-weight: 400; }
.body-sm { font-family: var(--font-body); font-size: 13.5px; line-height: 20px; font-weight: 400; }
.label { font-family: var(--font-body); font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: 1px; }
.time { font-family: var(--font-body); font-size: 13.5px; line-height: 18px; font-weight: 700; }
.caption { font-family: var(--font-body); font-size: 12px; line-height: 16px; font-weight: 600; }
.eyebrow { font-family: var(--font-body); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 2px; }
.tag { font-family: var(--font-body); font-size: 10.5px; line-height: 14px; font-weight: 800; letter-spacing: 1.5px; }
.amount { font-family: var(--font-body); font-size: 34px; line-height: 40px; font-weight: 800; }