/*
 * tesiptv design tokens, extracted from docs/design/design_handoff_tesiptv
 * (README.md "Design tokens" and Design System.dc.html). Dark theme only.
 * Player lengths are authored at 1x (1920 px wide) and scaled with --ui-scale.
 */
:root {
  /* Colour: surfaces */
  --c-ground: #0b0f14;
  --c-surface: #121820;
  --c-surface-2: #1a222c;
  --c-logo-tile: #232d3a;
  --c-border: #263241;
  --c-border-strong: #324256;

  /* Colour: text. --c-text-faint is for meta only, never body (below 4.5:1 contrast). */
  --c-text: #f2f5f8;
  --c-text-2: #c3ccd6;
  --c-text-muted: #9aa7b5;
  --c-text-faint: #5b6b7d;

  /* Colour: accent (primary, focus, selected) */
  --c-accent: #3b82f6;
  --c-accent-tint: #1e2a3d;
  --c-accent-text: #93c5fd;

  /* Colour: catch-up, the only green in the product */
  --c-catchup: #22c55e;
  --c-catchup-tint: #0f2a1c;
  --c-catchup-text: #86efac;

  /* Colour: live dot, errors, destructive */
  --c-danger: #ef4444;
  --c-danger-tint: #2a1416;
  --c-danger-text: #fca5a5;

  /* Colour: preparing, trial ending, grace */
  --c-warn: #f59e0b;
  --c-warn-tint: #2e2410;
  --c-warn-text: #fcd34d;

  --c-qr-ground: #ffffff;

  /* Type */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --tracking-tight: -0.02em;
  --tracking-wordmark: -0.03em;
  --tracking-code: 0.12em;

  /* Type: car scale (Player, px at 1x; multiply by --ui-scale) */
  --fs-car-signin-title: 56px;
  --fs-car-code: 72px;
  --fs-car-movie-title: 60px;
  --fs-car-channel-name: 44px;
  --fs-car-series-title: 40px;
  --fs-car-state-title: 36px;
  --fs-car-prompt-title: 34px;
  --fs-car-programme: 28px;
  --fs-car-clock: 28px;
  --fs-car-list-item: 24px;
  --fs-car-button: 22px;
  --fs-car-body: 22px;
  --fs-car-now-next: 20px;
  --fs-car-meta: 18px;

  /* Type: standard scale (Settings, Admin; not scaled) */
  --fs-page-title: 28px;
  --fs-section: 20px;
  --fs-row: 17px;
  --fs-input: 16px;
  --fs-button: 16px;
  --fs-body: 15px; /* minimum anywhere */

  /* Spacing, 4 px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --gutter-car: 48px;
  --gutter-phone: 20px;

  /* Radius */
  --r-control: 8px;
  --r-row: 10px;
  --r-tile: 12px;
  --r-car-btn: 14px;
  --r-panel: 16px;
  --r-sheet-sm: 20px;
  --r-sheet: 24px;
  --r-pill: 999px;
  --r-logo-tile: 25%;

  /* Targets */
  --target-car-min: 64px;
  --target-car-button: 72px;
  --target-car-row: 92px;
  --target-min: 48px;
  --target-input: 52px;

  /* Elevation and scrims */
  --shadow-sheet: 0 30px 80px rgba(0, 0, 0, 0.6);
  --scrim-video: linear-gradient(
    180deg,
    rgba(6, 9, 13, 0.6) 0%,
    transparent 22%,
    transparent 55%,
    rgba(6, 9, 13, 0.92) 100%
  );
  --scrim-prompt: rgba(6, 9, 13, 0.55);

  /* Focus (TV remote and keyboard). Use offset-inset inside rows and tiles. */
  --focus-ring: 3px solid var(--c-accent);
  --focus-offset: 3px;
  --focus-offset-inset: -3px;

  /* Motion */
  --ease-out: ease-out;
  --dur-overlay: 150ms;
  --t-overlay: var(--dur-overlay) var(--ease-out);
  --overlay-shift: 8px;
  --dur-spinner: 1s;
  --overlay-autohide-ms: 4000;

  /* Player scale: set from JS as clamp(0.75, viewportWidth / 1920, 2.5) */
  --ui-scale: 1;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-overlay: 0ms;
    --overlay-shift: 0px;
  }
}