/* app theme custom props (light + dark), flat/one-red toggles */

/* ============ THEME TOKENS ============
   Brand vars (--dark-red, --yellow, --darkblue) and the Fredericka the Great
   @font-face live in assets/brand-tokens.css, linked before this file in
   app/index.html — not redeclared here. These tokens reference the brand
   vars (with literal fallbacks, ported verbatim from the mockup) and add
   the rest of the app's design-token surface: flat/no drop-shadows
   (--shadow / --shadow-lg are both "none"), a single red used everywhere
   (--danger aliases --accent, no separate danger red), and a renamed blue
   (--accent-2) used for links, Rename, and other secondary actions. */
:root {
  --bg: #f3ecdf;
  --surface: #fffdf9;
  --surface-2: #ece3d2;
  --text: #241e18;
  --text-muted: #6b6055;
  --accent: var(--dark-red, #871008);
  --accent-2: var(--darkblue, #2289b6);
  --highlight: var(--yellow, #f7bd40);
  --border: #e3d8c3;
  --scrim: rgba(20, 14, 8, 0.5);
  --shadow: none;
  --shadow-lg: none;
  --danger: var(--accent);
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #18120e;
  --surface: #241c16;
  --surface-2: #2e241b;
  --text: #f4ede0;
  --text-muted: #c3b6a3;
  --accent: #ff6a52;
  --accent-2: #6ec4ee;
  --highlight: #f7bd40;
  --border: #3c2f22;
  --scrim: rgba(0, 0, 0, 0.65);
  --shadow: none;
  --shadow-lg: none;
  --danger: var(--accent);
  /* Overrides brand-tokens.css's --dark-gray for every var(--dark-gray)
     usage app-wide (item condition/value spans, Shadow DOM component
     styles in location-tree.js/location-el.js/topo-map.js) — no need to
     touch each usage site individually, custom properties resolve
     dynamically against whatever's in scope. */
  --dark-gray: var(--blue);
  color-scheme: dark;
}