/* COLOR SEMANTICS — the only colour names components may use.
   Two spines, neither privileged: [data-spine="obsidian"] and [data-spine="bone"].
   theme.js sets data-spine from the saved choice or prefers-color-scheme; without JS the
   media query below decides. Status colours describe system truth only, never decoration,
   and always travel with a glyph and a border. */
:root,
:root[data-spine="bone"] {
  color-scheme: light;
  --bg-canvas: var(--bone-050);
  --bg-sunken: var(--bone-100);
  --bg-surface: var(--bone-000);
  --bg-surface-raised: var(--bone-000);
  --bg-surface-hover: var(--bone-100);
  --bg-inset: var(--bone-100);
  --text-primary: var(--obsidian-900);
  --text-body: var(--obsidian-700);
  --text-muted: var(--obsidian-500);
  --text-faint: var(--obsidian-400);
  --text-illuminated: var(--brass-600);
  --text-on-illuminated: var(--bone-050);
  --border-subtle: var(--bone-200);
  --border-default: var(--bone-300);
  --border-strong: var(--bone-400);
  --border-illuminated: var(--brass-500);
  --illum-solid: var(--brass-600);
  --illum-solid-hover: var(--brass-700);
  --illum-wash: var(--brass-100);
  --illum-edge: var(--brass-300);
  --status-verified: var(--spectral-650);
  --status-review: var(--amber-650);
  --status-contradiction: var(--crimson-600);
  --status-inert: var(--obsidian-500);
  --focus-ring: var(--brass-600);
}
:root[data-spine="obsidian"] {
  color-scheme: dark;
  --bg-canvas: var(--obsidian-900);
  --bg-sunken: var(--obsidian-950);
  --bg-surface: var(--obsidian-850);
  --bg-surface-raised: var(--obsidian-800);
  --bg-surface-hover: var(--obsidian-700);
  --bg-inset: var(--obsidian-950);
  --text-primary: var(--bone-050);
  --text-body: var(--obsidian-100);
  --text-muted: var(--obsidian-200);
  --text-faint: var(--obsidian-250);
  --text-illuminated: var(--brass-300);
  --text-on-illuminated: var(--obsidian-1000);
  --border-subtle: var(--alpha-bone-08);
  --border-default: var(--alpha-bone-14);
  --border-strong: var(--alpha-bone-24);
  --border-illuminated: var(--brass-500);
  --illum-solid: var(--brass-500);
  --illum-solid-hover: var(--brass-400);
  --illum-wash: var(--alpha-brass-12);
  --illum-edge: var(--alpha-brass-40);
  --status-verified: var(--spectral-400);
  --status-review: var(--amber-400);
  --status-contradiction: var(--crimson-400);
  --status-inert: var(--obsidian-200);
  --focus-ring: var(--brass-300);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-spine]) {
    color-scheme: dark;
    --bg-canvas: var(--obsidian-900);
    --bg-sunken: var(--obsidian-950);
    --bg-surface: var(--obsidian-850);
    --bg-surface-raised: var(--obsidian-800);
    --bg-surface-hover: var(--obsidian-700);
    --bg-inset: var(--obsidian-950);
    --text-primary: var(--bone-050);
    --text-body: var(--obsidian-100);
    --text-muted: var(--obsidian-200);
    --text-faint: var(--obsidian-250);
    --text-illuminated: var(--brass-300);
    --text-on-illuminated: var(--obsidian-1000);
    --border-subtle: var(--alpha-bone-08);
    --border-default: var(--alpha-bone-14);
    --border-strong: var(--alpha-bone-24);
    --border-illuminated: var(--brass-500);
    --illum-solid: var(--brass-500);
    --illum-solid-hover: var(--brass-400);
    --illum-wash: var(--alpha-brass-12);
    --illum-edge: var(--alpha-brass-40);
    --status-verified: var(--spectral-400);
    --status-review: var(--amber-400);
    --status-contradiction: var(--crimson-400);
    --status-inert: var(--obsidian-200);
    --focus-ring: var(--brass-300);
  }
}