/*
  Config-web UI theme tokens — MIRROR the client's canonical deriveTheme (Fives, `c050c727`)
  EXACTLY, so config-web / SpectateView / App.vue never diverge (Echo asserts the presets).
  Presets-only via [data-theme]: Black/Red (default, dark) + FUMBBL (variant, light).
  Owner 2026-07-14: Black/Red primary darkened −25% (#A10005 -> #790004); rest re-derived.
*/
:root,
:root[data-theme="brand-red"] {
  --ui-primary: #790004;
  --ui-secondary: #000000;
  --ui-surface: #0d0d0d;
  --ui-surface-2: #242424;
  --ui-accent: #a55456;
  --ui-text-on-accent: #ffffff;
  --ui-hover: #250a0b;
  --ui-active: #790004;
  --ui-border: #3d0002;
  --ui-focus: #ff3b3b;
  --ui-focus-halo: #ffffff;
  --ui-heading: #ff3b3b;
  --ui-text-on-primary: #ffffff;
  --ui-text-on-secondary: #ffffff;
  --ui-text: #e6e9ef;
  --ui-muted: #848689;
  --ui-text-dim: #5f6163;
}
:root[data-theme="fumbbl"] {
  --ui-primary: #1A401C;
  --ui-secondary: #E7DDC7;
  --ui-surface: #dbd2bd;
  --ui-surface-2: #cec5b1;
  --ui-accent: #1A401C;
  --ui-hover: #b1b29a;
  --ui-active: #1A401C;
  --ui-border: #818f72;
  --ui-focus: #8b1a1a;
  --ui-focus-halo: #ffffff;
  --ui-heading: #a32626;
  --ui-text-on-primary: #ffffff;
  --ui-text-on-secondary: #000000;
  --ui-text: #141414;
  --ui-muted: #6e6a60;
  --ui-text-dim: #8f8a7d;
}
/* Fixed semantics — identical in both presets (Fives canonical). */
:root {
  --ui-danger: #ff4d4d;
  --ui-success: #3fb463;
  --ui-info: #4a86c8;
}

/* Focus ring = RED + white halo (dual-ring). Canonical CSS from Fives — VERBATIM so
   config-web / SpectateView / App.vue never diverge. The red alone can't clear 3:1 vs a
   red/green button fill; the halo layer carries the contrast (Echo asserts the composite). */
:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--ui-focus-halo),  /* inner: hugs the control, ≥3:1 vs the button fill */
    0 0 0 4px var(--ui-focus);        /* outer: red ring, ≥3:1 vs the surface */
}

/* Presets-only theme toggle (fixed, top-right) — config-web has no client settings store. */
.theme-toggle {
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 50;
  font: 11px/1 system-ui, Segoe UI, sans-serif;
  background: var(--ui-surface-2);
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
  border-radius: 7px;
  padding: 5px 9px;
  cursor: pointer;
  opacity: 0.85;
}
.theme-toggle:hover {
  opacity: 1;
  border-color: var(--ui-primary);
}