/* Design tokens the dashboard page expects (replaces the claude.ai host theme). */
:root {
  color-scheme: light dark;
  --font-anthropic-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-anthropic-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --color-bg: #FAF9F5;
  --color-panel: #FFFFFF;
  --color-bg-panel: #FFFFFF;
  --color-fg: #1F1E1B;
  --color-fg-muted: #6B6862;
  --color-border-line: #E4E1D8;
  --color-ok: #2E7D4F;
  --color-warn: #B7791F;
  --color-bad: #C0392B;

  --cds-text-secondary: var(--color-fg-muted);
  --cds-surface-popover: #FFFFFF;
  --cds-shadow-popover: 0 6px 24px rgba(0, 0, 0, .14);
  --cds-border: var(--color-border-line);
  --cds-chart-muted: #A9A59C;
  --cds-chart-grid: #ECE9E1;
  --cds-chart-reference: #8A867D;
  --cds-chart-status-critical: #C0392B;

  --cds-font-size-caption: 0.78rem;
  --cds-font-size-body: 0.9rem;
  --cds-font-size-heading: 1.05rem;
  --cds-font-size-title: 1.9rem;
  --cds-font-weight-medium: 500;
  --cds-radius: 10px;
  --cds-gap-sm: 8px;
  --cds-gap-md: 14px;
  --cds-gap-lg: 22px;
  --cds-gap-xl: 32px;
  --cds-pad-xs: 4px;
  --cds-pad-sm: 8px;
  --cds-pad-md: 14px;
  --cds-pad-lg: 20px;
  --cds-dur-slow: 320ms;
  --cds-ease-out: cubic-bezier(.2, .7, .2, 1);

  --dash-c1: #2F6FB3; --dash-c2: #D9822B; --dash-c3: #3A9A6A; --dash-c4: #B4467A;
  --dash-c5: #7A5CC4; --dash-c6: #2A9BAA; --dash-c7: #B79A1E; --dash-c8: #7F7A70;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #1A1917;
    --color-panel: #24231F;
    --color-bg-panel: #24231F;
    --color-fg: #EDEAE2;
    --color-fg-muted: #A3A097;
    --color-border-line: #3A3833;
    --color-ok: #5BBF86;
    --color-warn: #E0A84A;
    --color-bad: #EE6A5B;
    --cds-surface-popover: #2C2B27;
    --cds-shadow-popover: 0 6px 24px rgba(0, 0, 0, .5);
    --cds-chart-muted: #6E6B64;
    --cds-chart-grid: #33312C;
    --cds-chart-reference: #9C988E;
    --dash-c1: #6EA6E6; --dash-c2: #F0A25A; --dash-c3: #6CC79A; --dash-c4: #E07AAC;
    --dash-c5: #A88BEB; --dash-c6: #5CC6D3; --dash-c7: #DCC052; --dash-c8: #A9A497;
  }
}
:root[data-theme="dark"] {
  --color-bg: #1A1917; --color-panel: #24231F; --color-bg-panel: #24231F;
  --color-fg: #EDEAE2; --color-fg-muted: #A3A097; --color-border-line: #3A3833;
  --color-ok: #5BBF86; --color-warn: #E0A84A; --color-bad: #EE6A5B;
  --cds-surface-popover: #2C2B27; --cds-shadow-popover: 0 6px 24px rgba(0, 0, 0, .5);
  --cds-chart-muted: #6E6B64; --cds-chart-grid: #33312C; --cds-chart-reference: #9C988E;
}

html { background: var(--color-bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-bg); color: var(--color-fg); font-family: var(--font-anthropic-sans); }
#dash-root { padding: 8px var(--dash-gutter, 16px) 48px; }

/* Loading placeholder used by the page */
.dash-skeleton { color: var(--color-fg-muted); }

.site-foot { max-width: 1320px; margin: 24px auto 0; padding: 16px var(--dash-gutter, 16px) 40px;
  border-top: 1px solid var(--color-border-line); font-size: .78rem; color: var(--color-fg-muted); line-height: 1.6; }
.site-foot a { color: inherit; }