/* Design tokens the dashboard page relies on, light + dark. */
:root {
  --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-fg: #1f1e1d;
  --color-fg-muted: #6b6a66;
  --color-border-line: #e6e3da;
  --color-ok: #2f7d4f;
  --color-warn: #b7791f;
  --color-bad: #c0392b;

  --cds-chart-muted: #a8a59c;
  --cds-chart-status-critical: #c8463a;
  --cds-chart-grid: #ece9e1;
  --cds-chart-axis: #c9c5bb;
  --cds-surface-popover: #ffffff;
  --cds-border: #e0ddd4;
  --cds-text-secondary: #6b6a66;
  --cds-shadow-popover: 0 4px 16px rgba(0, 0, 0, .10);

  --cds-font-size-caption: 12px;
  --cds-font-size-body: 14px;
  --cds-font-size-heading: 18px;
  --cds-font-size-title: 26px;
  --cds-font-weight-medium: 500;

  --cds-gap-xs: 4px;  --cds-gap-sm: 8px;  --cds-gap-md: 12px;  --cds-gap-lg: 20px;  --cds-gap-xl: 28px;
  --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: 320ms;
  --cds-ease-out: cubic-bezier(.2, .7, .2, 1);

  --c1: #3b6fd8; --c2: #d4793a; --c3: #2f9c8a; --c4: #a855c7;
  --c5: #c8463a; --c6: #7a8b2c; --c7: #d0498e; --c8: #6b6a66;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1c1b19;
    --color-panel: #262523;
    --color-fg: #f2f0ea;
    --color-fg-muted: #a3a099;
    --color-border-line: #3a3935;
    --color-ok: #5cb67f;
    --color-warn: #e0a64a;
    --color-bad: #e5675a;
    --cds-chart-muted: #7d7a73;
    --cds-chart-status-critical: #e5675a;
    --cds-chart-grid: #34332f;
    --cds-chart-axis: #55534e;
    --cds-surface-popover: #2e2d2a;
    --cds-border: #45433e;
    --cds-text-secondary: #a3a099;
    --cds-shadow-popover: 0 4px 16px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-anthropic-sans);
  -webkit-font-smoothing: antialiased;
}
#dash-root { max-width: 1280px; margin: 0 auto; padding: 24px 16px 48px; }
.site-foot { max-width: 1280px; margin: 0 auto; padding: 0 16px 32px; font-size: 12px; color: var(--color-fg-muted); }
.site-foot a { color: inherit; }

/* Loading skeletons */
.dash-skeleton { color: transparent !important; background: linear-gradient(90deg, var(--cds-chart-grid), color-mix(in srgb, var(--cds-chart-grid) 50%, transparent), var(--cds-chart-grid)); background-size: 200% 100%; border-radius: 6px; animation: dashShimmer 1.4s linear infinite; }
.mx-hero .dash-skeleton { background: color-mix(in srgb, var(--color-bg) 18%, transparent); }
@keyframes dashShimmer { to { background-position: -200% 0; } }
.mx-tip[hidden] { display: none !important; }