/* ── Teca palette: the single source of colour for every page ──
   Dark by default, light under prefers-color-scheme, and [data-theme] wins over both so the
   in-app toggle keeps working. Lifted from the app so there is one definition, not two that
   drift. */
:root {
  --bg: #0d1117;
  --surface: #161b22;
  --border: #272d3a;
  --accent: #29ABE2;
  --accent-dark: #0078C8;
  --text: #e2e8f0;
  --muted: #8ba4be;
  --user-bubble: #0c2340;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #64CEFF;
  --teca-wordmark: #269fca;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark]) {
    --bg: #f5f7fa;
    --surface: #ffffff;
    --border: #dde3ed;
    --accent: #0078C8;
    --accent-dark: #005fa3;
    --text: #111827;
    --muted: #6b7280;
    --user-bubble: #dff0fa;
    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;
    --info: #0078C8;
  }
}
[data-theme=light] {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --border: #dde3ed;
  --accent: #0078C8;
  --accent-dark: #005fa3;
  --text: #111827;
  --muted: #6b7280;
  --user-bubble: #dff0fa;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --info: #0078C8;
}

/* ── Compatibility layer for the report pages ──
   Every token those pages already reference, expressed in terms of the palette above, so their
   stylesheets need no edits and start following the theme. The -bg / -border variants are mixed
   against the CURRENT background instead of being fixed light-mode constants, which is what makes
   them work in both themes from one definition. */
:root {
  --card: var(--surface);
  --border-2: color-mix(in srgb, var(--border) 70%, var(--text));
  --sub: color-mix(in srgb, var(--text) 72%, var(--muted));
  --brand: var(--accent-dark);

  --code-bg: color-mix(in srgb, var(--text) 6%, var(--bg));
  --code-border: var(--border);

  --tag-bg: color-mix(in srgb, var(--accent) 14%, var(--bg));
  --tag-text: var(--accent);
  --tag-border: color-mix(in srgb, var(--accent) 34%, var(--bg));

  --ok: var(--success);
  --green: var(--success);
  --ok-bg: color-mix(in srgb, var(--success) 14%, var(--bg));
  --ok-border: color-mix(in srgb, var(--success) 34%, var(--bg));

  --warn: var(--warning);
  --warn-bg: color-mix(in srgb, var(--warning) 14%, var(--bg));
  --warn-bdr: color-mix(in srgb, var(--warning) 34%, var(--bg));

  --down: var(--danger);
  --down-bg: color-mix(in srgb, var(--danger) 14%, var(--bg));
  --down-bdr: color-mix(in srgb, var(--danger) 34%, var(--bg));

  --maint: #8b5cf6;
  --maint-bg: color-mix(in srgb, #8b5cf6 14%, var(--bg));
  --maint-bdr: color-mix(in srgb, #8b5cf6 34%, var(--bg));
}