/* Design tokens the dashboard page expects, in light and dark. */
:root {
  --color-bg: #f4f5f7;
  --color-panel: #ffffff;
  --color-fg: #1b1f24;
  --color-fg-muted: #5f6873;
  --color-border-line: #e1e4e8;
  --color-ok: #1d7a4b;
  --color-warn: #9a5b00;
  --color-bad: #c0392b;

  --font-anthropic-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-anthropic-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --cds-font-size-caption: 12px;
  --cds-font-size-body: 14px;
  --cds-font-size-heading: 16px;
  --cds-font-size-title: 28px;
  --cds-font-weight-medium: 600;
  --cds-gap-xs: 4px; --cds-gap-sm: 8px; --cds-gap-md: 12px; --cds-gap-lg: 20px; --cds-gap-xl: 32px;
  --cds-pad-xs: 4px; --cds-pad-sm: 8px; --cds-pad-md: 12px; --cds-pad-lg: 18px; --cds-pad-xl: 28px;
  --cds-radius: 8px;
  --cds-dur-slow: 240ms;

  --cds-chart-grid: #eceef1;
  --cds-chart-axis: #b7bdc5;
  --cds-chart-reference: #8b939d;
  --cds-chart-muted: #9aa3ad;
  --cds-text-secondary: #5f6873;
  --cds-surface-popover: #ffffff;
  --cds-border: #d5d9de;
  --cds-shadow-popover: 0 4px 16px rgba(16, 24, 40, 0.12);

  --series-0: #2f6bd8;
  --series-1: #e07a2e;
  --series-2: #2f9e6a;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f1216;
    --color-panel: #171b21;
    --color-fg: #e8eaed;
    --color-fg-muted: #9aa3ad;
    --color-border-line: #2a3038;
    --color-ok: #4cc38a;
    --color-warn: #e3a641;
    --color-bad: #f0705f;
    --cds-chart-grid: #232930;
    --cds-chart-axis: #4a525c;
    --cds-chart-reference: #6b747e;
    --cds-chart-muted: #5d6670;
    --cds-text-secondary: #9aa3ad;
    --cds-surface-popover: #1f242b;
    --cds-border: #353c45;
    --cds-shadow-popover: 0 4px 16px rgba(0, 0, 0, 0.45);
    --series-0: #6b9ef0;
    --series-1: #f09a57;
    --series-2: #4cc38a;
    color-scheme: dark;
  }
}

html, body { margin: 0; background: var(--color-bg); color: var(--color-fg); }
body { font: 14px/1.4 var(--font-anthropic-sans); -webkit-text-size-adjust: 100%; }
#dash-root {
  max-width: 1400px;
  margin-inline: auto;
  padding-block: 24px 48px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 900px) { #dash-root { padding-left: 32px; padding-right: 32px; } }
[hidden] { display: none !important; }
.dash-skeleton { color: transparent !important; background: var(--color-border-line); border-radius: 4px; }