/*
 * Design tokens (DESIGN.md §3). Every color is a custom property authored in
 * BOTH light and dark and measured for WCAG AA. Theme is data, not a fork:
 * `data-theme` on <html> overrides the system preference; absent, the system
 * preference wins. The status ramp carries product meaning — verified economic
 * outcome vs reported vs mere activity — and must never be the only signal.
 */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius: 8px;
  --radius-lg: 12px;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Light theme (default) */
  --surface: #ffffff;
  --surface-raised: #f4f6f8;
  --surface-sunken: #e9edf1;
  --text: #15202b;          /* ~15.8:1 on --surface */
  --text-muted: #4a5663;    /* ~7.3:1 on --surface */
  --text-inverse: #ffffff;
  --border: #c7d0d9;
  --accent: #1961cf;        /* link text: 5.3:1 on --surface, 4.9:1 on --surface-raised, 5.8:1 on --surface-sunken */
  --accent-text: #ffffff;   /* on --accent: ~5.4:1 */
  --outcome-verified: #1a7f4b; /* green, ~4.8:1 on --surface */
  --outcome-reported: #8a5a00; /* amber, ~4.8:1 on --surface */
  --activity: #4a5663;         /* cool/quiet, never reads as a win */
  --warn: #8a5a00;
  --danger: #b42318;           /* ~5.9:1 on --surface */
  --info: #1f6feb;
  --focus: #1f6feb;
  /* quiet status tints (backgrounds only — body text over them is --text) */
  --tint-verified: #e6f4ec;
  --tint-reported: #fbf1dd;
  --tint-activity: #eef1f4;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #0f141a;
    --surface-raised: #182029;
    --surface-sunken: #0a0e13;
    --text: #e8edf2;          /* ~14.6:1 on --surface */
    --text-muted: #a9b4bf;    /* ~7.1:1 on --surface */
    --text-inverse: #0f141a;
    --border: #2b3742;
    --accent: #5a9bff;
    --accent-text: #0f141a;   /* ~6.5:1 */
    --outcome-verified: #4cc38a;
    --outcome-reported: #e0a94a;
    --activity: #a9b4bf;
    --warn: #e0a94a;
    --danger: #ff6b5e;
    --info: #5a9bff;
    --focus: #5a9bff;
    --tint-verified: #12271d;
    --tint-reported: #2c2410;
    --tint-activity: #1b232c;
  }
}

/* Explicit overrides win over the system preference. */
:root[data-theme="light"] {
  --surface: #ffffff;
  --surface-raised: #f4f6f8;
  --surface-sunken: #e9edf1;
  --text: #15202b;
  --text-muted: #4a5663;
  --text-inverse: #ffffff;
  --border: #c7d0d9;
  --accent: #1961cf;
  --accent-text: #ffffff;
  --outcome-verified: #1a7f4b;
  --outcome-reported: #8a5a00;
  --activity: #4a5663;
  --warn: #8a5a00;
  --danger: #b42318;
  --info: #1f6feb;
  --focus: #1f6feb;
  --tint-verified: #e6f4ec;
  --tint-reported: #fbf1dd;
  --tint-activity: #eef1f4;
}

:root[data-theme="dark"] {
  --surface: #0f141a;
  --surface-raised: #182029;
  --surface-sunken: #0a0e13;
  --text: #e8edf2;
  --text-muted: #a9b4bf;
  --text-inverse: #0f141a;
  --border: #2b3742;
  --accent: #5a9bff;
  --accent-text: #0f141a;
  --outcome-verified: #4cc38a;
  --outcome-reported: #e0a94a;
  --activity: #a9b4bf;
  --warn: #e0a94a;
  --danger: #ff6b5e;
  --info: #5a9bff;
  --focus: #5a9bff;
  --tint-verified: #12271d;
  --tint-reported: #2c2410;
  --tint-activity: #1b232c;
}