/* Design tokens (blueprint 05 section 1).
 * One accent (deep teal #0F766E), four status colours, ink on white, borders
 * instead of shadows, 4px spacing grid, 6px radius. Dark theme via
 * prefers-color-scheme unless the user picked a theme ([data-theme]).
 * Contrast: every text token is >= 4.5:1 on --surface and --bg (checked in
 * ui/tests/contrast.test.mjs).
 */
:root {
  color-scheme: light;
  /* surfaces */
  --bg: #f6f7f7;
  --surface: #ffffff;
  --surface-2: #f2f4f4;
  --surface-3: #e9eceb;
  --surface-sunken: #eef1f0;
  --border: #e1e5e4;
  --border-strong: #c8cfcd;
  --overlay: rgba(16, 24, 22, 0.32);
  /* ink */
  --text: #17201e;
  --text-2: #3f4a48;
  --text-3: #5e6967;
  --text-inverse: #ffffff;
  /* accent */
  --accent: #0f766e;
  --accent-strong: #115e59;
  --accent-soft: #e3f1ef;
  --accent-border: #9fd0c9;
  --focus: #0f766e;
  /* status (word + icon always accompany the colour) */
  --danger: #b42318;
  --danger-soft: #fef3f2;
  --danger-border: #fecdca;
  --warn: #b54708;
  --warn-soft: #fffaeb;
  --warn-border: #fedf89;
  --ok: #067647;
  --ok-soft: #ecfdf3;
  --ok-border: #abefc6;
  --info: #175cd3;
  --info-soft: #eff8ff;
  --info-border: #b2ddff;
  --neutral: #5e6967;
  --neutral-soft: #f2f4f4;
  --neutral-border: #d5dbd9;
  /* charts */
  --chart-grid: #e7eaea;
  --chart-axis: #8a9492;
  --chart-line: #0f766e;
  --chart-line-2: #175cd3;
  --chart-line-3: #8a5a00;
  --chart-band: rgba(15, 118, 110, 0.12);
  --chart-band-risk: rgba(180, 35, 24, 0.08);
  --chart-now: #17201e;
  --gauge-fill: #5fa59c;
  --gauge-fill-low: #d9796f;
  --gauge-empty: #eef1f0;
  /* type */
  --font: "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-table: 13px;
  --fs-body: 14px;
  --fs-h3: 14px;
  --fs-h2: 16px;
  --fs-h1: 20px;
  --lh: 1.5;
  /* space (4px grid) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --radius: 6px;
  --radius-sm: 4px;
  /* layout */
  --topbar-h: 48px;
  --nav-w: 216px;
  --drawer-w: 520px;
  --row-h: 32px;
  --z-sticky: 5;
  --z-nav: 20;
  --z-drawer: 40;
  --z-dialog: 60;
  --z-popover: 70;
  --z-toast: 80;
  --t-fast: 120ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e1312;
    --surface: #141a19;
    --surface-2: #1a2120;
    --surface-3: #222a29;
    --surface-sunken: #111716;
    --border: #283130;
    --border-strong: #3a4544;
    --overlay: rgba(0, 0, 0, 0.55);
    --text: #e7ecea;
    --text-2: #bcc5c3;
    --text-3: #98a3a1;
    --text-inverse: #0e1312;
    --accent: #3fb6a8;
    --accent-strong: #6ccabe;
    --accent-soft: #15302d;
    --accent-border: #24564f;
    --focus: #5fd0c2;
    --danger: #ff8a7f;
    --danger-soft: #2c1513;
    --danger-border: #5c2420;
    --warn: #f7b955;
    --warn-soft: #2a1f0e;
    --warn-border: #5a3e12;
    --ok: #5fd39a;
    --ok-soft: #10261b;
    --ok-border: #1d4d33;
    --info: #7cb8ff;
    --info-soft: #0f1d33;
    --info-border: #1f3c66;
    --neutral: #98a3a1;
    --neutral-soft: #1a2120;
    --neutral-border: #333d3c;
    --chart-grid: #232b2a;
    --chart-axis: #7d8886;
    --chart-line: #3fb6a8;
    --chart-line-2: #7cb8ff;
    --chart-line-3: #e0b25a;
    --chart-band: rgba(63, 182, 168, 0.16);
    --chart-band-risk: rgba(255, 138, 127, 0.18);
    --chart-now: #e7ecea;
    --gauge-fill: #2f8a7f;
    --gauge-fill-low: #b4584f;
    --gauge-empty: #1d2524;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1312;
  --surface: #141a19;
  --surface-2: #1a2120;
  --surface-3: #222a29;
  --surface-sunken: #111716;
  --border: #283130;
  --border-strong: #3a4544;
  --overlay: rgba(0, 0, 0, 0.55);
  --text: #e7ecea;
  --text-2: #bcc5c3;
  --text-3: #98a3a1;
  --text-inverse: #0e1312;
  --accent: #3fb6a8;
  --accent-strong: #6ccabe;
  --accent-soft: #15302d;
  --accent-border: #24564f;
  --focus: #5fd0c2;
  --danger: #ff8a7f;
  --danger-soft: #2c1513;
  --danger-border: #5c2420;
  --warn: #f7b955;
  --warn-soft: #2a1f0e;
  --warn-border: #5a3e12;
  --ok: #5fd39a;
  --ok-soft: #10261b;
  --ok-border: #1d4d33;
  --info: #7cb8ff;
  --info-soft: #0f1d33;
  --info-border: #1f3c66;
  --neutral: #98a3a1;
  --neutral-soft: #1a2120;
  --neutral-border: #333d3c;
  --chart-grid: #232b2a;
  --chart-axis: #7d8886;
  --chart-line: #3fb6a8;
  --chart-line-2: #7cb8ff;
  --chart-line-3: #e0b25a;
  --chart-band: rgba(63, 182, 168, 0.16);
  --chart-band-risk: rgba(255, 138, 127, 0.18);
  --chart-now: #e7ecea;
  --gauge-fill: #2f8a7f;
  --gauge-fill-low: #b4584f;
  --gauge-empty: #1d2524;
}