/* BNKR theme — imports design system then maps legacy variable names used across the SPA */
@import url('/theme-base.css');

:root {
  /* Colors → theme-base */
  --c-bg: var(--bg);
  --c-surface: var(--bg-2);
  --c-surface-2: var(--bg-3);
  --c-border: var(--line);
  --c-border-hi: var(--line-2);
  --c-text: var(--ink);
  --c-text-muted: var(--ink-2);
  --c-text-dim: var(--ink-3);
  --c-accent: var(--ink);
  --c-accent-dim: var(--ink-2);
  --c-on-accent: var(--bg);
  --c-cancelled: var(--hot);
  --c-upcoming: var(--crt);
  --c-past: var(--ink-3);
  --c-crt: var(--crt);
  --c-crt-hi: var(--crt);
  --c-crt-dim: var(--crt-dim);
  --c-rec: var(--hot);

  /* Typography */
  --font-display: var(--display);
  --font-body: var(--sans);
  --font-mono: var(--mono);
  --font-crt: var(--mono);
  --type-read-min: 16px;
  --type-crt-eyebrow: clamp(var(--type-read-min), 2vw, 18px);
  --type-crt-mono: clamp(var(--type-read-min), 2.5vw, 20px);
  --type-crt-readout: clamp(18px, 2.85vw, 24px);
  --text-2xs: var(--type-read-min);
  --text-xs: 17px;
  --text-sm: 18px;
  --text-base: 18px;
  --text-md: 20px;
  --text-lg: 22px;
  --text-xl: 28px;
  --text-2xl: 36px;
  --text-3xl: 48px;
  --text-4xl: 64px;
  --text-5xl: 88px;

  --lh-tight: 1;
  --lh-snug: 1.15;
  --lh-normal: 1.4;
  --lh-loose: 1.65;
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.06em;
  --ls-wider: 0.12em;
  --ls-widest: 0.18em;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  --max-w: var(--maxw);
  --page-px: var(--pad);
  --nav-h: 64px;
  --site-header-h: 64px;
  --transmission-bar-h: 36px;
  --crt-chrome-h: calc(var(--site-header-h) + var(--transmission-bar-h));
  --player-h: 64px;

  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-mid: 220ms;
}

@media (min-width: 640px) {
  :root {
    --text-3xl: 52px;
    --text-4xl: 72px;
    --text-5xl: 96px;
  }
}

@media (min-width: 1024px) {
  :root {
    --text-3xl: 60px;
    --text-4xl: 84px;
    --text-5xl: 112px;
  }
}