/* ============================================================
   Crime Watch Canada — brand tokens (v3, 2026-09-16)
   ------------------------------------------------------------
   DIRECTION: white ground, near-black structure, ONE red accent.
   Reference: nwatch.ca (Red Deer Neighbourhood Watch) — a charity site that
   reads as trustworthy because it uses white + near-black + a single accent
   and nothing else. v2 failed because it carried a warm ground plus thirteen
   category colours plus coloured monograms.

   PROVENANCE
     Red  #cf3232 — sampled from the official logo artwork (CWC-White-FP.png)
                    by colour histogram, 2026-09-16.
     Ink  #111417 — the brand is black; this is the structural near-black used
                    for the masthead bar, nav, footer and headings.
     Everything else is white or a neutral grey step. No third hue anywhere.
   ============================================================ */
:root {
  --kds-hue-flame: #cf3232;
  --kds-hue-sky:   #1f4fd8;
  --kds-hue-rose:  #cf3232;
  --kds-hue-amber: #b8860b;
  --kds-hue-leaf:  #1f7a4d;
  --kds-hue-iris:  #cf3232;
  --kds-hue-teal:  #1f7a4d;
  --kds-hue-ink:   #111417;

  /* Neutral ramp: pure white ground, true greys, near-black ink. */
  --kds-n0:  #000000; --kds-n1:  #111417; --kds-n2:  #1d2125; --kds-n3:  #333a40;
  --kds-n4:  #545c64; --kds-n5:  #6f777f; --kds-n6:  #99a1a8; --kds-n7:  #c4cacf;
  --kds-n8:  #e3e6e9; --kds-n9:  #f2f4f5; --kds-n10: #ffffff;

  --kds-brand: #cf3232;
  --kds-brand-fg: #ffffff;
  --kds-accent: #b3211f;          /* link / interactive red, 4.5:1 on white */
  --kds-accent-fg: #ffffff;
  --kds-focus-ring: #cf3232;

  --kds-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kds-font-display: "Archivo", "Inter", ui-sans-serif, system-ui, sans-serif;

  --cw-ink: #111417;
  --cw-red: #cf3232;
  --cw-line: #e3e6e9;
  --cw-wrap: 1180px;

  --kds-radius-xs: 2px; --kds-radius-sm: 3px; --kds-radius-md: 4px;
  --kds-radius-lg: 6px; --kds-radius-xl: 8px;
}
/* One structural override set. Both themes are defined so an OS dark preference
   still renders a complete, readable page rather than a half-inverted one. */
:root, [data-kds-theme="light"] {
  --kds-bg: #ffffff;
  --kds-surface: #ffffff;
  --kds-surface-2: #f2f4f5;
  --kds-surface-3: #e3e6e9;
  --kds-border: #e3e6e9;
  --kds-border-strong: #c4cacf;
  --kds-fg: #111417;
  --kds-fg-muted: #545c64;
  --kds-fg-faint: #6f777f;
  --kds-link: #b3211f;
  --kds-shadow-1: 0 1px 2px rgba(17,20,23,.06);
  --kds-shadow-2: 0 2px 8px rgba(17,20,23,.08);
  --kds-shadow-3: 0 8px 28px rgba(17,20,23,.12);
}
[data-kds-theme="dark"] {
  --kds-bg: #111417; --kds-surface: #1d2125; --kds-surface-2: #262b30; --kds-surface-3: #333a40;
  --kds-border: #333a40; --kds-border-strong: #545c64;
  --kds-fg: #f2f4f5; --kds-fg-muted: #c4cacf; --kds-fg-faint: #99a1a8; --kds-link: #ff7a72;
  --kds-accent: #ff7a72;
}