/* BPA Control UI — CSS variable theme overrides only */
/* Selector-level customisation (logo placement, login banner, sidebar strip) */
/* deferred to Phase 2 where we build the full branded UI on server.js */

:root,
:root[data-theme-mode="dark"] {
  --ring: #ffc801;
  --accent: #ffc801;
  --accent-hover: #ffd430;
  --accent-muted: #ffc801;
  --accent-subtle: rgba(255, 200, 1, 0.16);
  --accent-foreground: #101010;
  --accent-glow: rgba(255, 200, 1, 0.28);
  --primary: #ffc801;
  --primary-foreground: #101010;
  --focus: rgba(255, 200, 1, 0.28);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 3px rgba(255, 200, 1, 0.8);
  --focus-glow: 0 0 0 2px var(--bg), 0 0 0 3px #ffc801, 0 0 18px rgba(255, 200, 1, 0.35);
  --font-body: "Zilla Slab", "Quattrocento Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-body);
}

:root[data-theme-mode="light"] {
  --font-body: "Zilla Slab", "Quattrocento Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-body);
}

html, body, button, input, select, textarea {
  font-family: var(--font-body);
}

a, .link {
  color: #ffc801;
}

::selection {
  background: rgba(255, 200, 1, 0.25);
  color: #fffdf7;
}