/* Eichler design tokens for the MCP service's UIs (website, consent pages,
   desktop UI). This is the MCP service's copy of the palette; web/src/App.css
   is canonical. A test in toolkit/mcp/pages fails if a token's value drifts. Every
   MCP UI links this file or a copy generated from it.

   Palette: "C . Atrium" from eichler-palette-options.html (sage accent,
   pumpkin/terracotta highlight, clematis blue), at the contrast-tuned values
   the shipped app already uses (web/src/App.css), so Core's SPA and the MCP
   UIs match. Light by default, dark under prefers-color-scheme: dark, and
   under an explicit [data-theme] attribute so a page can force either mode.
   Type is Inter everywhere (load it from Google Fonts in the page head);
   numbers use font-variant-numeric: tabular-nums. */
:root {
  --bg: #ede9dd;
  --panel: #faf8f0;
  --panel-2: #e2ddc9;
  --ink: #26251f;
  --ink-2: #59573f;
  --ink-3: #635f49;
  --hair: #d8d2bd;
  --hair-2: #c3bda3;
  --accent: #556344;
  --accent-soft: #e3e8d4;
  --accent-ink: #556344;
  --warn: #755717;
  --warn-soft: #f0e6c8;
  --crit: #a8402e;
  --crit-soft: #f2ddd4;
  --pumpkin: #994c19;
  --pumpkin-soft: #f6ddc3;
  --clematis: #3d4f6b;
  --clematis-soft: #dce3ec;
  --on-accent: #fbfaf4;
  --mono: var(--sans); /* one family everywhere */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* canonical design-system names (aliases of the above; use these in new work) */
  --surface-100: var(--bg);
  --surface-200: var(--panel);
  --surface-300: var(--panel-2);
  --hairline: var(--hair);
  --hairline-2: var(--hair-2);
  --font-sans: var(--sans);
  --space-2: 2px; --space-3: 3px; --space-4: 4px; --space-5: 5px; --space-6: 6px;
  --space-7: 7px; --space-8: 8px; --space-9: 9px; --space-10: 10px; --space-12: 12px;
  --space-14: 14px; --space-16: 16px; --space-20: 20px; --space-22: 22px;
  --space-26: 26px; --space-32: 32px; --space-40: 40px; --space-48: 48px;
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px;
  --radius-xl: 14px; --radius-pill: 20px; --radius-full: 9999px;
  --shadow-sm: 0 1px 3px rgba(38,37,31,0.10);
  --shadow-lg: 0 12px 40px rgba(38,37,31,0.20);
  --focus-ring: 0 0 0 2px #ede9dd, 0 0 0 4px #556344;
  /* Categorical chart hues, in fixed order: the design system's olive,
     pumpkin and clematis families plus plum and teal, stepped into the
     chart lightness/chroma band. Validated for colorblind separation of
     adjacent pairs (dataviz validate_palette.js; light vs --panel, dark vs
     dark --panel). Sub-3:1 contrast on some slots is why every chart part
     also carries a text label. */
  --series-1: #83a651; --series-2: #984b16; --series-3: #6899e2; --series-4: #8f4478; --series-5: #00afaf;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1a14;
    --panel: #24221a;
    --panel-2: #2c2920;
    --ink: #efe9da;
    --ink-2: #c9c2a8;
    --ink-3: #a39c80;
    --hair: #3a3627;
    --hair-2: #4a4531;
    --accent: #9db388;
    --accent-soft: #2e3a24;
    --accent-ink: #9db388;
    --warn: #d9b463;
    --warn-soft: #3a2f16;
    --crit: #e08268;
    --crit-soft: #3a2019;
    --pumpkin: #e8a35c;
    --pumpkin-soft: #3a2614;
    --clematis: #8fa8c9;
    --clematis-soft: #202b3a;
    --on-accent: #1c2415;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.45);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.6);
    --focus-ring: 0 0 0 2px #1c1a14, 0 0 0 4px #9db388;
    --series-1: #7da04b; --series-2: #9e511e; --series-3: #6293db; --series-4: #954a7e; --series-5: #00a8a9;
  }
}

:root[data-theme="dark"] {
    --bg: #1c1a14;
    --panel: #24221a;
    --panel-2: #2c2920;
    --ink: #efe9da;
    --ink-2: #c9c2a8;
    --ink-3: #a39c80;
    --hair: #3a3627;
    --hair-2: #4a4531;
    --accent: #9db388;
    --accent-soft: #2e3a24;
    --accent-ink: #9db388;
    --warn: #d9b463;
    --warn-soft: #3a2f16;
    --crit: #e08268;
    --crit-soft: #3a2019;
    --pumpkin: #e8a35c;
    --pumpkin-soft: #3a2614;
    --clematis: #8fa8c9;
    --clematis-soft: #202b3a;
    --on-accent: #1c2415;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.45);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.6);
    --focus-ring: 0 0 0 2px #1c1a14, 0 0 0 4px #9db388;
    --series-1: #7da04b; --series-2: #9e511e; --series-3: #6293db; --series-4: #954a7e; --series-5: #00a8a9;
}