/* Design tokens. Components and screens use only these; a theme is a set of values
   (css/themes/*.css). The values here are the fallback, matching the Console theme. */
:root {
  color-scheme: dark;

  /* Surfaces and ink */
  --bg: #111215;
  --backdrop: none;               /* texture behind setup and home */
  --surface: #1b1c20;             /* panels */
  --surface-2: #24262b;           /* controls on panels */
  --surface-hover: #2c2f35;
  --line: #2e3036;
  --line-strong: #464a52;
  --ink: #f1f0ec;
  --ink-muted: #a4a7ae;
  --ink-faint: #6d717a;
  --signal: #ff5a36;              /* the one accent colour */
  --signal-ink: #111215;
  --signal-soft: rgba(255, 90, 54, .14);
  --good: #52c98a;
  --bad: #ff6a5c;
  --scrim: rgba(10, 11, 13, .78);
  --scrim-filter: none;           /* e.g. blur(8px) */

  /* Type */
  --font-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --title-weight: 700;
  --title-case: none;
  --title-tracking: -.035em;
  --title-leading: .95;
  --title-size: clamp(2.6rem, 6.5vw, 4.8rem);
  --title-ink: var(--ink);
  --title-accent-ink: var(--signal);
  --heading-weight: 650;
  --heading-case: none;
  --heading-tracking: -.01em;
  --label-case: uppercase;
  --label-tracking: .12em;
  --label-font: var(--font-mono);
  --label-size: .72rem;

  /* Shape and depth */
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-chip: 999px;
  --radius-hud: 50%;
  --border: 1px;
  --shadow-panel: 0 18px 50px -24px rgba(0, 0, 0, .8);
  --shadow-card: none;

  /* Buttons */
  --btn-bg: transparent;
  --btn-ink: var(--ink);
  --btn-border: var(--line-strong);
  --btn-hover-bg: var(--surface-hover);
  --btn-primary-bg: var(--ink);
  --btn-primary-ink: #111215;
  --btn-primary-border: transparent;
  --btn-primary-shadow: none;
  --btn-press: scale(.98);
  --btn-font: var(--font-text);
  --btn-weight: 650;
  --btn-case: none;
  --btn-tracking: 0;

  /* Menu rows */
  --item-bg: var(--surface-2);
  --item-ink: var(--ink);
  --item-focus-bg: var(--ink);
  --item-focus-ink: #111215;
  --item-primary-bg: var(--ink);
  --item-primary-ink: #111215;

  /* Controls: selected state (chips, switches, tabs) is one colour; focus is an inversion. */
  --selected-bg: var(--signal);
  --selected-ink: var(--signal-ink);
  --toggle-on: var(--selected-bg);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink);

  /* Play */
  --hud-bg: rgba(12, 13, 16, .66);
  --hud-border: rgba(255, 255, 255, .18);
  --stick-ring: rgba(255, 255, 255, .34);
  --stick-fill: rgba(255, 255, 255, .06);
  --stick-move: #f1f0ec;
  --stick-fire: #ff5a36;
  --stick-well-art: none;
  --stick-move-art: none;
  --stick-fire-art: none;
  --stick-well-art-size: 100%;
  --stick-move-art-size: 100%;
  --stick-fire-art-size: 100%;
  --stick-cap-shadow: 0 4px 14px rgba(0, 0, 0, .45);
  --touch-button-bg: rgba(12, 13, 16, .6);
  --touch-button-down: var(--signal);
  --touch-button-shadow: none;
  --touch-button-down-shadow: none;
  --controller-deck-texture: var(--surface-2);

  /* One control scale across buttons, tabs, menus and touch targets. */
  --control-height: 48px;
  --control-height-sm: 44px;
  --control-height-lg: 56px;
  --control-padding: 20px;
  --control-gap: 8px;
  --control-font-size: 1rem;
  --touch-rail: 64px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* The title television is an illustration, independent of UI corner shapes. */
  --tv-case: #4c4b46;
  --tv-trim: #969184;
  --tv-edge: #c2bcac;
  --tv-dark: #22241f;
  --tv-screen: #171d19;
  --tv-glass-edge: #424c40;
  --tv-ink: #f3f0df;
  --tv-font: "Barlow Condensed", "Arial Narrow", sans-serif;

  /* The native preview's SNES-era launch television. Scoped to its opening screen. */
  --launch-bg: #100f14;
  --launch-backdrop: #302938;
  --launch-cabinet-art: url("/art/native-crt.webp");
  --launch-case: #c5c3c9;
  --launch-case-lit: #f1edf4;
  --launch-case-shade: #8e8995;
  --launch-case-ink: #504958;
  --launch-trim: #88858e;
  --launch-trim-lit: #bab4c1;
  --launch-trim-shade: #544d5d;
  --launch-bezel-shade: #0c0911;
  --launch-edge: #ece9f0;
  --launch-dark: #211e27;
  --launch-glass: #14111c;
  --launch-glass-lit: #2b2238;
  --launch-glass-edge: #4c435b;
  --launch-phosphor: #eee6fa;
  --launch-accent: #b19bcc;
  --launch-action: #674491;
  --launch-action-lit: #9170b9;
  --launch-action-shade: #45255f;
  --launch-action-hover: #7957a6;
  --launch-action-edge: #c5a9e5;
  --launch-muted: #b8accc;
  --launch-shadow: 0 24px 28px rgba(0, 0, 0, .6);
  --launch-button-shadow: 0 3px 9px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -2px 3px rgba(0, 0, 0, .2);
  --launch-power-shadow: 0 0 5px 2px rgba(151, 89, 237, .6);

  /* Motion and layout */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}