/* Design tokens used by dashboard.css / dashboard.js. Light by default, dark via prefers-color-scheme or data-theme="dark" on <html> (the theme switch in the bar). */
:root {
  --font-anthropic-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-anthropic-serif: Georgia, "Times New Roman", serif;

  --color-bg: #f7f2ea;
  --color-panel: #fffcf7;
  --color-fg: #2a241f;
  --color-fg-muted: #6b6157;
  --color-border-line: #e8dfd1;
  --color-ok: #2d7550;
  --color-warn: #92560a;
  --color-bad: #a63a2a;

  --cds-chart-grid: #f0e9de;
  --cds-chart-axis: #bfb3a3;
  --cds-chart-muted: #efe7da;
  --cds-chart-status-critical: #d0543f;
  --cds-surface-popover: #fffcf7;
  --cds-border: #e3d9ca;
  --cds-text-secondary: #6b6157;
  --cds-shadow-popover: 0 4px 16px rgba(0, 0, 0, .12);

  --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: 550;

  --cds-gap-xs: 4px;  --cds-gap-sm: 8px;  --cds-gap-md: 16px;  --cds-gap-lg: 24px;  --cds-gap-xl: 32px;
  --cds-pad-xs: 4px;  --cds-pad-sm: 8px;  --cds-pad-md: 12px;  --cds-pad-lg: 20px;  --cds-pad-xl: 28px;
  --cds-radius: 10px;
  --cds-dur-slow: 300ms;

  --dash-gutter: clamp(16px, 4vw, 48px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #16130f;
    --color-panel: #1f1b17;
    --color-fg: #f1ebe2;
    --color-fg-muted: #b2a698;
    --color-border-line: #3a3229;
    --color-ok: #5cc28e;
    --color-warn: #e0a24a;
    --color-bad: #ef6f5e;
    --cds-chart-grid: #2c2620;
    --cds-chart-axis: #5e5448;
    --cds-chart-muted: #3a3229;
    --cds-chart-status-critical: #ef6f5e;
    --cds-surface-popover: #29231d;
    --cds-border: #423930;
    --cds-text-secondary: #b2a698;
    --cds-shadow-popover: 0 4px 16px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
    --color-bg: #16130f;
    --color-panel: #1f1b17;
    --color-fg: #f1ebe2;
    --color-fg-muted: #b2a698;
    --color-border-line: #3a3229;
    --color-ok: #5cc28e;
    --color-warn: #e0a24a;
    --color-bad: #ef6f5e;
    --cds-chart-grid: #2c2620;
    --cds-chart-axis: #5e5448;
    --cds-chart-muted: #3a3229;
    --cds-chart-status-critical: #ef6f5e;
    --cds-surface-popover: #29231d;
    --cds-border: #423930;
    --cds-text-secondary: #b2a698;
    --cds-shadow-popover: 0 4px 16px rgba(0, 0, 0, .5);
  }

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-anthropic-sans);
  line-height: 1.45;
}
#dash-root { padding: var(--dash-gutter); max-width: 1400px; margin-inline: auto; }

/* Loading placeholder: a short rounded bar in place of text, or a filled box for charts. */
@keyframes dash-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.dash-skeleton { color: transparent !important; position: relative; }
.dash-skeleton::after {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: min(8rem, 100%); height: .8em; border-radius: 6px; background: var(--cds-chart-muted);
}
.dash-skeleton:empty::after { top: 0; transform: none; width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) { .dash-skeleton::after { animation: dash-pulse 1.4s ease-in-out infinite; } }

.dash-footer { margin-top: var(--cds-gap-xl); font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }

.dash-nav { max-width: 1400px; margin-inline: auto; padding: 14px var(--dash-gutter) 0; font-size: var(--cds-font-size-caption); }
.dash-nav a { color: var(--color-fg-muted); text-decoration: none; margin-right: 18px; }
.dash-nav a:hover { color: var(--color-fg); text-decoration: underline; }