/* Theme tokens: neutral surfaces, validated categorical series (light / dark). */
:root {
  color-scheme: light;
  --color-bg: #f4f4f2;
  --color-panel: #fcfcfb;
  --color-fg: #0b0b0b;
  --color-fg-muted: #52514e;
  --color-border-line: #e3e2dd;
  --color-bad: #d03b3b;
  --cds-chart-grid: #ebeae6;
  --cds-chart-axis: #b8b7b1;
  --cds-chart-reference: #8e8d87;
  --cds-chart-muted: #b3b2ac;
  --cds-surface-popover: #ffffff;
  --cds-border: #dbdad5;
  --cds-shadow-popover: 0 6px 20px rgba(20, 20, 18, .12);
  --cds-text-secondary: #52514e;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948;
  --font-anthropic-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-anthropic-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --cds-font-size-caption: 12px;
  --cds-font-size-body: 14px;
  --cds-font-size-heading: 16px;
  --cds-font-size-title: 30px;
  --cds-font-weight-medium: 600;
  --cds-gap-xs: 4px; --cds-gap-sm: 8px; --cds-gap-md: 16px; --cds-gap-lg: 24px; --cds-gap-xl: 40px;
  --cds-pad-xs: 4px; --cds-pad-sm: 8px; --cds-pad-md: 12px; --cds-pad-lg: 20px; --cds-pad-xl: 32px;
  --cds-radius: 8px;
  --cds-dur-slow: 300ms;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-bg: #121211;
    --color-panel: #1a1a19;
    --color-fg: #f0efec;
    --color-fg-muted: #b5b4ab;
    --color-border-line: #2e2e2b;
    --color-bad: #e66767;
    --cds-chart-grid: #2a2a27;
    --cds-chart-axis: #4a4a46;
    --cds-chart-reference: #77766f;
    --cds-chart-muted: #5c5b56;
    --cds-surface-popover: #232321;
    --cds-border: #3a3a36;
    --cds-shadow-popover: 0 6px 20px rgba(0, 0, 0, .5);
    --cds-text-secondary: #c3c2b7;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
  }
}
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-bg); color: var(--color-fg); font: 14px/1.5 var(--font-anthropic-sans); }
#dash-root { padding-block: 32px 56px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
a { color: var(--s1); }
.dash-skeleton { color: transparent !important; background: var(--color-border-line); border-radius: 4px; }
.dj-chart.dash-skeleton { border-radius: var(--cds-radius); }