/* PinballBrew chrome: the single source of truth for the app-chrome design
   system shared by the editor's web toolbar and the standalone player.
   Anything that appears on both surfaces (colors, buttons, selects) is
   defined HERE and only here. The Edit|Play switch went one better: it is a
   single shared Astryx component (src/features/mode-switch/ModeSwitch), so the
   two surfaces render the exact same control and cannot drift.

   Palette: derived from Meta's Astryx design system, neutral theme (MIT).
   github.com/facebook/astryx. Every color token is a light-dark() pair valued
   from the Astryx neutral grayscale spine plus the Astryx accent blue. The
   chrome bar keeps a fixed always-dark token set so Edit and Play read as one
   surface in both themes.

   Rules:
   - No raw chrome hexes in editor or player styles; use var(--pb-*).
   - Shared controls take the .pb-btn / .pb-select classes.
   - html-prefixed selectors keep these rules ahead of per-surface base
     styles (e.g. the editor's .tool-btn) regardless of stylesheet order. */

/* Theme wiring: dark is the default (the player page carries no attribute).
   [data-theme='light'] flips color-scheme so every light-dark() pair below
   resolves to its light value. */
:root {
  color-scheme: dark;
}
[data-theme='light'] {
  color-scheme: light;
}

/* Astryx sizes its type in em against a 16px design base, but both surfaces set
   a smaller root (13px editor, 14px player) for their dense vanilla UI. Without
   a reset, Astryx labels (segmented control, buttons) inherit that and render at
   ~80%, looking cramped. Re-establish a 16px baseline on every Astryx theme root
   so labels render at their intended size; component dimensions are px-based and
   unaffected. */
[data-astryx-theme] {
  font-size: 16px;
}

/* The Edit | Play switch: one shared Astryx SegmentedControl on both the editor
   toolbar and the player header. Both mounts carry .pb-mode-switch so the two
   render identically. It is absolutely centered over the always-relative bar
   (matching the pre-Astryx design), and the selected segment takes the chrome
   primary so this central control reads at a glance instead of the low-contrast
   neutral grey Astryx uses by default. */
.pb-mode-switch {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pb-mode-switch .astryx-segmented-control-item[aria-checked='true'] {
  background: var(--pb-primary);
  color: var(--pb-on-accent);
}

.pb-mode-switch .astryx-segmented-control-item[aria-checked='true']:hover {
  background: var(--pb-primary-hover);
}

:root {
  /* ---- Semantic token API: theme-aware light-dark() pairs -------------- */

  /* Backgrounds */
  --pb-bg-body: light-dark(#f1f1f1, #1b1b1b);
  --pb-bg-surface: light-dark(#ffffff, #262626);
  --pb-bg-card: light-dark(#ffffff, #1b1b1b);
  --pb-bg-popover: light-dark(#ffffff, #1b1b1b);
  --pb-bg-muted: light-dark(#f1f1f1, #1b1b1b);

  /* Text */
  --pb-text-primary: light-dark(#171717, #fafafa);
  --pb-text-secondary: light-dark(#737373, #a3a3a3);
  --pb-text-disabled: light-dark(#a3a3a3, #525252);

  /* Icon */
  --pb-icon-primary: light-dark(#171717, #fafafa);
  --pb-icon-secondary: light-dark(#737373, #a3a3a3);

  /* Border */
  --pb-border: light-dark(#ebebeb, #ffffff1a);
  --pb-border-strong: light-dark(#d4d4d4, #525252);

  /* Accent: the Astryx accent blue pair, not the neutral grayscale accent.
     The whole accent family stays blue so links, focus, and primary read as
     one color. */
  --pb-accent: light-dark(#0064e0, #2694fe);
  --pb-on-accent: #ffffff;
  --pb-accent-text: light-dark(#0064e0, #3e9efb);
  --pb-accent-muted: light-dark(#0082fb33, #0082fb3f);

  /* Overlay tints for hover / pressed (Astryx overlay model). Theme-aware:
     black wash in light, white wash in dark. Do NOT use these on the fixed
     always-dark chrome; they would darken it in the light theme. */
  --pb-hover: light-dark(#0000000d, #ffffff0d);
  --pb-pressed: light-dark(#0000001a, #ffffff1a);

  /* Status */
  --pb-error: light-dark(#a50c25, #ffc6c1);
  --pb-error-muted: light-dark(#facecb, #ff9e973d);
  --pb-success: light-dark(#007004, #9fe59b);
  --pb-success-muted: light-dark(#c5e5c0, #84c9803d);
  --pb-warning: light-dark(#745b00, #fdcf4f);
  --pb-warning-muted: light-dark(#f8da9d, #deb4333d);

  /* Effects */
  --pb-shadow: light-dark(#0000001a, #0000004d);
  --pb-track: light-dark(#ccd3db, #5a5e66);
  --pb-focus-ring: var(--pb-accent);

  /* Radius: Astryx radius defaults (inner 4, element 8, container 12). */
  --pb-radius-sm: 4px;
  --pb-radius-md: 8px;
  --pb-radius-lg: 12px;

  /* ---- Fixed chrome tokens: always dark, both themes ------------------- */
  /* The toolbar and player header stay dark so Edit and Play read as one
     surface. Values are neutral-spine dark stops so the bar harmonizes with
     the dark theme. */
  --pb-chrome-bg: #171717; /* chrome background: toolbar, player page */
  --pb-chrome-bg-deep: #0a0a0a; /* recessed areas: log panel */
  --pb-chrome-surface: #262626; /* raised chrome: rails, drawers */
  --pb-chrome-line: #404040; /* hairline borders between chrome areas */
  --pb-chrome-ink: #fafafa;
  --pb-chrome-muted: #a3a3a3; /* secondary: status, captions, labels */
  --pb-chrome-btn: #262626;
  --pb-chrome-btn-hover: color-mix(in srgb, #262626, #ffffff 8%);
  --pb-chrome-btn-line: #404040;

  /* ---- Legacy aliases: existing consumers keep working ----------------- */
  /* Old chrome names now point at the fixed always-dark tokens above. Every
     consumer of these lives on the dark chrome (player, mode switch, web
     toolbar), so they never needed a light value. */
  --pb-bg: var(--pb-chrome-bg);
  --pb-bg-deep: var(--pb-chrome-bg-deep);
  --pb-surface: var(--pb-chrome-surface);
  --pb-line: var(--pb-chrome-line);
  --pb-ink: var(--pb-chrome-ink);
  --pb-muted: var(--pb-chrome-muted);
  --pb-muted-bright: #d4d4d4; /* secondary on deep surfaces: footer legend */
  --pb-btn: var(--pb-chrome-btn);
  --pb-btn-hover: var(--pb-chrome-btn-hover);
  --pb-btn-line: var(--pb-chrome-btn-line);
  /* --pb-accent is defined above and shared with the semantic API. */
  --pb-primary: #0064e0;
  --pb-primary-hover: color-mix(in srgb, #0064e0, #ffffff 12%);
  --pb-primary-line: #0064e0;

  /* Layout */
  --pb-bar-h: 52px; /* the chrome bar: editor toolbar and player header */
  --pb-bar-h-compact: 44px; /* touch/slim contexts */
  --pb-bar-pad: 14px;
  --pb-control-h: 28px; /* buttons and selects: one exact height everywhere */

  /* Type: chrome controls set their own stack and metrics - inheriting the
     surface's font/line-height is exactly how per-surface drift happens. */
  --pb-font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* The standard chrome button, identical on both surfaces. Fixed height and
   own font metrics: nothing inherited that could vary per surface. The bar is
   always dark, so the hover tints with a fixed white overlay (baked into
   --pb-chrome-btn-hover) rather than the theme-aware --pb-hover. */
html .pb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pb-font);
  font-size: 12.5px;
  line-height: 1;
  height: var(--pb-control-h);
  padding: 0 10px;
  background: var(--pb-chrome-btn);
  color: var(--pb-chrome-ink);
  border: 1px solid var(--pb-chrome-btn-line);
  border-radius: var(--pb-radius-md);
  cursor: pointer;
}
html .pb-btn:hover {
  background: var(--pb-chrome-btn-hover);
}
html .pb-btn.primary {
  background: var(--pb-primary);
  border-color: var(--pb-primary-line);
  color: var(--pb-on-accent);
}
html .pb-btn.primary:hover {
  background: var(--pb-primary-hover);
}
html .pb-btn:focus-visible,
html .pb-select:focus-visible {
  outline: 2px solid var(--pb-focus-ring);
  outline-offset: 1px;
}

/* The standard chrome select. */
html .pb-select {
  font-family: var(--pb-font);
  font-size: 12.5px;
  line-height: 1;
  height: var(--pb-control-h);
  padding: 0 8px;
  background: var(--pb-chrome-btn);
  color: var(--pb-chrome-ink);
  border: 1px solid var(--pb-chrome-btn-line);
  border-radius: var(--pb-radius-md);
  cursor: pointer;
}
html .pb-select:hover {
  background: var(--pb-chrome-btn-hover);
}

/* The chrome bar: one height and padding for the editor toolbar and the
   player header. position: relative so the centered mode switch can anchor
   to it on both surfaces. Always dark in both themes. */
html .pb-bar {
  font-family: var(--pb-font);
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--pb-bar-h);
  padding: 0 var(--pb-bar-pad);
  background: var(--pb-chrome-bg);
  border-bottom: 1px solid var(--pb-chrome-line);
}