/* The bridge from the Civic Clean names to the board (Epic 21, 21.1).
   board-tokens.css (the design handoff, loaded first) is the authority;
   this file maps every --color-* name base.css still uses onto it, so
   every screen takes the board's palette and type at once while the
   stories 21.2–21.8 rebuild them one by one. A screen rebuilt to the
   board uses the board names directly; when the last --color-* use goes,
   this file goes with it (21.8). Never add a new --color-* here. */

:root {
  color-scheme: light;

  --color-primary: var(--slate);
  --color-on-primary: var(--slate-ink);
  --color-accent: var(--accent);
  --color-accent-fill: var(--action);
  --color-on-accent: var(--action-ink);
  --color-surface: var(--panel);
  --color-surface-alt: var(--panel-tint);
  --color-text: var(--ink);
  --color-text-muted: var(--ink-muted);
  --color-success: var(--success);
  --color-success-tint: var(--panel-tint);
  --color-on-success-tint: var(--success);
  --color-warning: var(--accent);
  --color-warning-tint: var(--panel-tint);
  --color-on-warning-tint: var(--accent);
  --color-danger: var(--danger);
  --color-focus: var(--focus);
  --color-border: var(--rule);

  /* Spacing (the board's scale: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 56) */
  --space-unit: var(--s-2);
  --space-row-pad: var(--s-3);
  --space-gutter: var(--s-4);
  --space-section-gap: var(--s-6);
  --space-margin-mobile: var(--s-4);
  --space-margin-desktop: var(--s-7);

  /* Radius */
  --radius-none: 0;
  --radius-sm: var(--radius-badge);
  --radius-default: var(--radius);
  --radius-full: 9999px;

  /* Type: the three families each with one job */
  --font-sans: var(--font-body);
  --font-mono: var(--font-data);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

/* The operator's explicit choice beats the system setting both ways.
   board-tokens.css carries the dark hook; the light one lives here so a
   light choice on a dark OS restores every board value. */
:root[data-theme="light"] {
  color-scheme: light;
  --page: #F7F5F1;
  --panel: #FFFFFF;
  --panel-tint: #EFEAE1;
  --rule: #D8D3C9;
  --rule-inner: #E7E2D9;
  --hairline: #EAE5DC;
  --ink: #20242A;
  --ink-mid: #3E4752;
  --ink-muted: #5A6470;
  --slate: #20262E;
  --slate-divider: #3B4552;
  --accent: #A34E00;
  --focus: #A34E00;
  --wash-hover: #EFEAE1;
  --wash-active: #E7E2D9;
  --danger: #B3271E;
  --success: #17603A;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}