/* =====================================================================
   tokens.css: Xuper Hydra v6. Loaded FIRST. Mobile-first: :root = phone.
   No cascade layers. Tokens that reference other tokens are only (re)declared on
   :root / html, never on descendants (custom properties resolve where
   declared). Component gradients that need --canvas are written in the
   component, not here.
   Breakpoints (mirrored in ui.js BP):
     xs ≤379 | sm ≤599 phone | md 600–860 tablet portrait (tab bar ≤860)
     lg 861–1119 | xl 1120–1679 | xxl ≥1680 | tv = html.is-tv (any width)
     stacked = (max-width:860px), (orientation:portrait) and (max-width:1119px)
     short   = (orientation:landscape) and (max-height:500px)
   ===================================================================== */
:root {
  color-scheme: dark;
  --tvu: 1;                                   /* set inline by focus.js on .is-tv */

  /* Colour: canvas and surfaces */
  --bg: #0b0b0d;
  --bg-rgb: 11, 11, 13;
  --surface-1: #131316;                       /* poster placeholder, tiles, inputs */
  --surface-2: #1a1a1e;                       /* logo plates, number tiles, hover, modal */
  --surface-3: #222227;                       /* selected/tuned row, icon discs */
  --surface-4: #2c2c32;                       /* pressed */
  --overlay: rgba(22, 22, 26, 0.96);          /* EVERY surface over video */
  --chrome: rgba(11, 11, 13, 0.94);           /* solid top bar, tab bar */
  --btn-overlay: rgba(24, 24, 28, 0.62);      /* secondary buttons over artwork, no blur */
  --btn-overlay-hover: rgba(40, 40, 46, 0.84);
  --fill-1: rgba(255, 255, 255, 0.08);
  --fill-2: rgba(255, 255, 255, 0.14);
  --fill-3: rgba(255, 255, 255, 0.22);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --line-control: #6b6b74;                    /* 3.7:1 on --bg (non-text) */
  --hairline: rgba(255, 255, 255, 0.06);

  /* Colour: text (WCAG ratios on --bg) */
  --text: #f5f5f7;                            /* 18.1:1 */
  --text-2: #aeaeb5;                          /* 8.9:1 */
  --text-3: #8b8b93;                          /* 5.9:1; 4.7:1 on surface-3; 5.4:1 on overlay */
  --text-soft: rgba(245, 245, 247, 0.86);     /* synopsis over art */
  --decor: #5a5a62;                           /* separators/disabled glyphs only */

  /* Inverse and focus */
  --inverse: #f5f5f7;
  --inverse-hover: #ffffff;
  --on-inverse: #0b0b0d;
  --focus: #ffffff;
  --focus-halo: rgba(0, 0, 0, 0.6);
  --focus-on-inverse: #0b0b0d;

  /* State */
  --progress: #f5f5f7;
  --progress-track: rgba(255, 255, 255, 0.28);
  --progress-buffer: rgba(255, 255, 255, 0.45);
  --live: #ff453a;                            /* dot only */
  --star: #f5c451;
  --toggle-off: #63636b;                      /* 3.3:1 */
  --selection: rgba(255, 255, 255, 0.22);
  --skeleton: #16161a;
  --tint: 26, 26, 30;                         /* detail canvas (title.js) */

  /* Scrims that do not depend on --canvas */
  --scrim-top: linear-gradient(180deg, rgba(0,0,0,.55) 0, rgba(0,0,0,0) 100%);           /* drawn 140px tall */
  --scrim-hero-x: linear-gradient(90deg, rgba(11,11,13,.88) 0, rgba(11,11,13,.56) 30%, rgba(11,11,13,0) 62%);
  --scrim-art: linear-gradient(0deg, rgba(0,0,0,.82) 0, rgba(0,0,0,0) 58%);
  --scrim-stage-top: linear-gradient(180deg, rgba(0,0,0,.62) 0, rgba(0,0,0,0) 100%);     /* 160px */
  --scrim-stage-bottom: linear-gradient(0deg, rgba(0,0,0,.8) 0, rgba(0,0,0,0) 100%);     /* 240px */

  /* Typography */
  --font: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-display-xl: clamp(40px, 5.2vw, 76px); --lh-display-xl: 1;    --ls-display-xl: -0.03em;
  --fs-display: clamp(34px, 4.4vw, 64px);    --lh-display: 1.04;    --ls-display: -0.028em;
  --fs-title-1: clamp(28px, 3.2vw, 44px);    --lh-title-1: 1.1;     --ls-title-1: -0.024em;
  --fs-title-2: clamp(19px, 1.5vw, 24px);    --lh-title-2: 1.2;     --ls-title-2: -0.014em;
  --fs-title-3: 20px;   --lh-title-3: 1.25;
  --fs-headline: 17px;  --lh-headline: 1.3;
  --fs-body-lg: 17px;   --lh-body-lg: 1.55;
  --fs-body: 15px;      --lh-body: 1.5;
  --fs-input: 15px;
  --fs-callout: 14px;   --lh-callout: 1.4;
  --fs-caption: 13px;   --lh-caption: 1.35;
  --fs-overline: 12px;  --ls-overline: 0.1em;
  --fs-tab: 12px;

  /* Spacing (4px base) */
  --space-0: 2px;  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px;
  --space-10: 64px; --space-11: 80px; --space-12: 96px;

  /* Safe areas, gutters, shell */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --gutter-base: 16px;
  --gutter: max(var(--gutter-base), var(--safe-l), var(--safe-r));
  --topbar-h: 56px;
  --subnav-h: 0px;                            /* 48px via html.has-subnav at ≤860 */
  --bar-h: calc(var(--topbar-h) + var(--safe-t));
  --header-h: calc(var(--bar-h) + var(--subnav-h));
  --tabbar-h: 60px;
  --tabbar-total: calc(var(--tabbar-h) + var(--safe-b));
  --content-max: 1280px;
  --measure: 62ch;

  /* Cards and rows (posters never above 232px at 1x; source is 262px) */
  --card-w: 34vw;
  --card-wide-w: 72vw;
  --card-gap: 12px;
  --rows-gap: 32px;
  --track-pad-top: 20px;
  --track-pad-bottom: 28px;

  /* Player: real values are written per stage by player.js (ResizeObserver) */
  --controls-h: 100px;

  /* Control sizes */
  --control-sm: 36px;
  --control: 44px;
  --control-lg: 52px;
  --control-xl: 72px;

  /* Radii */
  --radius-xs: 4px; --radius-sm: 8px; --radius-card: 10px; --radius: 12px;
  --radius-tile: 14px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.25);
  --shadow-2: 0 18px 40px -8px rgba(0,0,0,.6);
  --shadow-3: 0 28px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
  --shadow-stage: 0 30px 80px -20px rgba(0,0,0,.7);
  --text-shadow-img: 0 1px 2px rgba(0,0,0,.5);

  /* Motion */
  --dur-1: 100ms; --dur-2: 160ms; --dur-3: 240ms; --dur-4: 320ms; --dur-5: 600ms; --dur-6: 900ms;
  --dur-rotate: 9000ms;
  --ease-calm: cubic-bezier(.22, 1, .36, 1);
  --ease-std: cubic-bezier(.2, 0, 0, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);

  /* Z-index: page */
  --z-raised: 1; --z-row-arrow: 2; --z-sticky: 5; --z-header: 40; --z-tabbar: 40;
  --z-skip: 45; --z-player: 100; --z-modal: 150; --z-toast: 200;
  /* Z-index: inside .stage */
  --z-stage-shade: 1; --z-stage-chrome: 2; --z-stage-center: 3; --z-stage-osd: 3;
  --z-stage-upnext: 4; --z-stage-notice: 4; --z-stage-menu: 5; --z-stage-panel: 6; --z-stage-sheet: 7;
}

@media (pointer: coarse) { :root { --control-sm: 44px; --fs-input: 16px; } }

@media (min-width: 600px) {
  :root {
    --gutter-base: 24px;
    --card-w: clamp(140px, 19vw, 168px);
    --card-wide-w: clamp(260px, 40vw, 320px);
    --card-gap: 14px;
    --rows-gap: 40px;
  }
}
@media (min-width: 861px) {
  :root {
    --gutter-base: 32px;
    --topbar-h: 64px;
    --tabbar-h: 0px;
    --card-w: clamp(150px, 15vw, 176px);
    --card-wide-w: clamp(280px, 30vw, 340px);
    --card-gap: 16px;
    --rows-gap: 48px;
  }
}
@media (min-width: 1120px) {
  :root {
    --gutter-base: clamp(40px, 4vw, 64px);
    --topbar-h: 72px;
    --card-w: clamp(168px, 12.5vw, 204px);
    --card-wide-w: clamp(300px, 23vw, 380px);
    --card-gap: 20px;
  }
}
@media (min-width: 1680px) {
  :root {
    --gutter-base: 72px;
    --card-w: clamp(208px, 11.9vw, 232px);
    --card-wide-w: 400px;
    --card-gap: 24px;
    --rows-gap: 56px;
    --fs-display-xl: 80px; --fs-display: 68px; --fs-title-1: 48px; --fs-title-2: 24px;
    --fs-body: 16px; --fs-body-lg: 18px; --fs-callout: 15px; --fs-caption: 14px;
  }
}
/* Subnav only on home + section routes, only ≤860 */
@media (max-width: 860px) { html.has-subnav { --subnav-h: 48px; } }
/* Short landscape (phones on their side) */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --topbar-h: 48px; }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 860px) {
  :root { --tabbar-h: 48px; }
}

/* 10-foot. Wins over every width tier (html.is-tv beats :root). */
html.is-tv {
  --gutter-base: calc(80px * var(--tvu));
  --topbar-h: calc(88px * var(--tvu));
  --subnav-h: 0px;
  --tabbar-h: 0px;
  --card-w: calc(222px * var(--tvu));
  --card-wide-w: calc(420px * var(--tvu));
  --card-gap: calc(28px * var(--tvu));
  --rows-gap: calc(64px * var(--tvu));
  --track-pad-top: calc(28px * var(--tvu));
  --track-pad-bottom: calc(36px * var(--tvu));
  --control-sm: calc(56px * var(--tvu));
  --control: calc(56px * var(--tvu));
  --control-lg: calc(64px * var(--tvu));
  --control-xl: calc(80px * var(--tvu));
  --radius-card: 12px;
  --fs-display-xl: calc(84px * var(--tvu)); --fs-display: calc(72px * var(--tvu));
  --fs-title-1: calc(52px * var(--tvu));    --fs-title-2: calc(30px * var(--tvu));
  --fs-title-3: calc(26px * var(--tvu));    --fs-headline: calc(24px * var(--tvu));
  --fs-body-lg: calc(24px * var(--tvu));    --fs-body: calc(22px * var(--tvu));
  --fs-input: calc(24px * var(--tvu));      --fs-callout: calc(20px * var(--tvu));
  --fs-caption: calc(20px * var(--tvu));    --fs-overline: calc(18px * var(--tvu));
}