:root {
  --jdd-bg: #09090b;
  --jdd-bg-elevated: #111114;
  --jdd-bg-card: #18181b;
  --jdd-bg-input: #141417;
  --jdd-primary: #052e1f;
  --jdd-accent: #34d399;
  --jdd-accent-hover: #6ee7b7;
  --jdd-accent-dim: rgba(52, 211, 153, 0.12);
  --jdd-accent-glow: rgba(52, 211, 153, 0.35);
  --jdd-live: #f87171;
  --jdd-text: #fafafa;
  --jdd-muted: #71717a;
  --jdd-border: rgba(255, 255, 255, 0.06);
  --jdd-radius: 10px;
  --jdd-radius-lg: 16px;
  --jdd-radius-pill: 999px;
  --jdd-header-h: 52px;
  --jdd-tabbar-h: 64px;
  --jdd-rail-w: 56px;
  --jdd-container: 80rem;
  --jdd-poster-gap: 0.75rem;
  --jdd-poster-w: clamp(9.25rem, 36vw, 11rem);
  --jdd-focus-ring: 0 0 0 3px var(--jdd-accent-glow);
  --jdd-shadow-pill: 0 8px 32px rgba(0, 0, 0, 0.45);
}

@media (min-width: 640px) {
  :root {
    --jdd-poster-w: clamp(10.5rem, 18vw, 12.75rem);
  }
}

@media (min-width: 1024px) {
  :root {
    --jdd-poster-w: clamp(11.25rem, 13vw, 13.75rem);
  }
}

html.jdd-tv {
  --jdd-poster-w: clamp(12rem, 14vw, 15rem);
}

html.jdd-light {
  --jdd-bg: #fafafa;
  --jdd-bg-elevated: #ffffff;
  --jdd-bg-card: #ffffff;
  --jdd-bg-input: #f4f4f5;
  --jdd-text: #18181b;
  --jdd-muted: #71717a;
  --jdd-border: rgba(0, 0, 0, 0.08);
}