/* tokens.css — the sitewide palette (2026-10-29). Linked FIRST in base_page.html and
   base.html so any page can use var(--c-*). New and edited surfaces use ONLY these;
   older pages keep their own colours until they are migrated. <html data-site> is
   "cars" or "arts" (from the request host) and swaps the accent. */
:root {
  --c-bg: #0b0a08;
  --c-surface: #14120f;
  --c-surface-2: #1c1915;
  --c-surface-3: #26221c;
  --c-line: rgba(240, 234, 224, .09);
  --c-line-2: rgba(240, 234, 224, .16);
  --c-text: #f2efe6;
  --c-text-2: #b8afa3;
  --c-text-3: #857c71;
  --c-accent: #ffb000;
  --c-accent-2: #ffc94d;
  --c-accent-ink: #1a1200;
  --c-accent-soft: rgba(255, 176, 0, .12);
  --c-water: #38bdf8;
  --c-sky: #79c0e0;
  --c-good: #22c55e;
  --c-warn: #f59e0b;
  --c-bad: #ef4444;
  --c-fire: #ff5d2e;
  --r-1: 8px;
  --r-2: 14px;
  --r-3: 20px;
  --r-pill: 999px;
  --f-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 8px 24px rgba(0, 0, 0, .35);
}

html[data-site="arts"] {
  --c-accent: #ff7a59;
  --c-accent-2: #ff9f85;
  --c-accent-ink: #1f0a04;
  --c-accent-soft: rgba(255, 122, 89, .12);
}

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}