/* theme.css - design tokens the dashboard pages expect, light and 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;
  --cds-font-size-caption: 0.8rem;
  --cds-font-size-body: 1rem;
  --cds-font-size-heading: 1.05rem;
  --cds-font-size-title: 2rem;
  --cds-font-weight-medium: 600;
  --cds-gap-xs: 0.25rem; --cds-gap-sm: 0.5rem; --cds-gap-md: 1rem; --cds-gap-lg: 1.5rem; --cds-gap-xl: 2.5rem;
  --cds-pad-xs: 0.3rem; --cds-pad-sm: 0.6rem; --cds-pad-md: 1rem; --cds-pad-lg: 1.25rem; --cds-pad-xl: 2rem;
  --cds-radius: 10px;
  --cds-dur-slow: 300ms;
  --cds-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  --color-bg: #faf9f7;
  --color-panel: #ffffff;
  --color-fg: #1f1e1c;
  --color-fg-muted: #6b6a66;
  --color-border-line: #e5e2dc;
  --color-ok: #2e7d32;
  --color-warn: #b26a00;
  --color-bad: #c62828;
  --cds-text-secondary: #6b6a66;
  --cds-chart-grid: #eeebe6;
  --cds-chart-axis: #b9b5ad;
  --cds-chart-reference: #8f8b83;
  --cds-chart-muted: #c9c5bd;
  --cds-chart-status-critical: #c62828;
  --cds-surface-popover: #ffffff;
  --cds-border: #dcd8d0;
  --cds-shadow-popover: 0 6px 20px rgba(0, 0, 0, 0.12);
  --series-1: #2563eb; --series-2: #e8590c; --series-3: #2f9e44; --series-4: #9c36b5;
  --series-5: #0c8599; --series-6: #d6336c; --series-7: #5c940d; --series-8: #e67700;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1918;
    --color-panel: #23221f;
    --color-fg: #ecebe8;
    --color-fg-muted: #a3a19b;
    --color-border-line: #3a3834;
    --color-ok: #69c26e;
    --color-warn: #f0a640;
    --color-bad: #ef6b6b;
    --cds-text-secondary: #a3a19b;
    --cds-chart-grid: #2f2d2a;
    --cds-chart-axis: #5a5751;
    --cds-chart-reference: #7d7a73;
    --cds-chart-muted: #55524c;
    --cds-chart-status-critical: #ef6b6b;
    --cds-surface-popover: #2b2a27;
    --cds-border: #45423d;
    --cds-shadow-popover: 0 6px 20px rgba(0, 0, 0, 0.45);
    --series-1: #6ea0ff; --series-2: #ff8a4c; --series-3: #5fcf74; --series-4: #c77dde;
    --series-5: #3bc4d6; --series-6: #f0709c; --series-7: #9bd34a; --series-8: #ffb347;
  }
}
html { background: var(--color-bg); color: var(--color-fg); font-family: var(--font-anthropic-sans); }
body { margin: 0; padding: 0 clamp(1rem, 4vw, 2.5rem) 3rem; line-height: 1.45; }
a { color: var(--series-1); }
.site-nav { max-width: 78rem; margin: 0 auto 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem;
  padding: 1rem 0; border-bottom: 1px solid var(--color-border-line); font-size: 0.9rem; }
.site-nav .brand { font-weight: 600; margin-right: auto; color: var(--color-fg); text-decoration: none; }
.site-nav a { color: var(--color-fg-muted); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--color-fg); font-weight: 600; }
.dash-skeleton { position: relative; }
.dash-skeleton::after { content: ""; position: absolute; inset: 0; border-radius: var(--cds-radius);
  background: linear-gradient(90deg, var(--cds-chart-grid), var(--color-panel), var(--cds-chart-grid)); background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .dash-skeleton::after { animation: none; } }
/* case study and downloads pages */
.prose { max-width: 50rem; margin: 0 auto; }
.prose h1 { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: 2rem; line-height: 1.2; }
.prose h2 { margin-top: 2.2rem; font-size: 1.3rem; }
.prose img { max-width: 100%; height: auto; border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); background: #fff; }
.prose table { border-collapse: collapse; width: 100%; font-size: 0.88rem; margin: 1rem 0; display: block; overflow-x: auto; }
.prose th, .prose td { border-bottom: 1px solid var(--color-border-line); padding: 0.4rem 0.6rem; text-align: left; vertical-align: top; }
.prose code { background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: 4px; padding: 0 0.25rem; font-size: 0.88em; }
.prose pre { background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: 0.8rem; overflow-x: auto; }
.prose pre code { border: 0; padding: 0; }
.site-foot { max-width: 78rem; margin: 3rem auto 0; padding-top: 1rem; border-top: 1px solid var(--color-border-line);
  font-size: 0.8rem; color: var(--color-fg-muted); }