/* Design tokens shared by the dashboards and the index page. */
:root {
  --font-anthropic-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-anthropic-serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;

  --color-bg: #f7f6f2;
  --color-panel: #ffffff;
  --color-fg: #1d1c1a;
  --color-fg-muted: #6a6862;
  --color-border-line: #e4e1d8;
  --color-ok: #23764a;
  --color-warn: #9a6200;
  --color-bad: #b23b25;

  --series-1: #2f64d1;

  --cds-font-size-caption: 0.8125rem;
  --cds-font-size-body: 0.9375rem;
  --cds-font-size-heading: 1.0625rem;
  --cds-font-size-title: 1.875rem;
  --cds-font-weight-medium: 600;

  --cds-gap-xs: 4px;
  --cds-gap-sm: 8px;
  --cds-gap-md: 14px;
  --cds-gap-lg: 22px;
  --cds-gap-xl: 36px;
  --cds-pad-xs: 4px;
  --cds-pad-sm: 8px;
  --cds-pad-md: 14px;
  --cds-pad-lg: 20px;
  --cds-pad-xl: 28px;
  --cds-radius: 10px;

  --cds-chart-grid: #eeebe3;
  --cds-chart-axis: #c8c4b9;
  --cds-chart-muted: #cfcbc1;
  --cds-chart-reference: #94918a;

  --cds-surface-popover: #ffffff;
  --cds-border: #dedad0;
  --cds-shadow-popover: 0 6px 20px rgba(20, 18, 14, 0.10);
  --cds-text-secondary: #6a6862;
  --cds-dur-slow: 240ms;
  --cds-ease-out: cubic-bezier(.2, .7, .2, 1);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #161615;
    --color-panel: #201f1d;
    --color-fg: #ecebe6;
    --color-fg-muted: #a19f98;
    --color-border-line: #36342f;
    --color-ok: #6cc28e;
    --color-warn: #e0a53a;
    --color-bad: #ec8a74;
    --series-1: #79a2f5;
    --cds-chart-grid: #2c2b28;
    --cds-chart-axis: #53514b;
    --cds-chart-muted: #4b4944;
    --cds-chart-reference: #8e8b83;
    --cds-surface-popover: #2a2926;
    --cds-border: #3d3b36;
    --cds-shadow-popover: 0 6px 20px rgba(0, 0, 0, 0.45);
    --cds-text-secondary: #a19f98;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-anthropic-sans);
  font-size: var(--cds-font-size-body);
  line-height: 1.45;
}

.site-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 72rem; margin: 0 auto; padding: 14px 16px 0;
  font-size: var(--cds-font-size-caption); color: var(--color-fg-muted);
}
.site-nav a { color: inherit; text-decoration: none; }
.site-nav a:hover { color: var(--color-fg); }
.site-nav .site-name { font-weight: var(--cds-font-weight-medium); }

#dash-root { padding: 18px 16px 56px; }
@media (min-width: 720px) { #dash-root { padding: 22px 28px 64px; } }

/* Loading placeholder: a soft bar in place of the value or chart. */
.dash-skeleton {
  color: transparent !important;
  background: linear-gradient(90deg, var(--cds-chart-grid) 0%, var(--color-border-line) 50%, var(--cds-chart-grid) 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  min-height: 1em;
}
@media (prefers-reduced-motion: no-preference) {
  .dash-skeleton { animation: dash-shimmer 1.4s linear infinite; }
  @keyframes dash-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
}