:root {
  /* Surfaces and text */
  --bh-bg: #ffffff;
  --bh-panel: #f6f6f3;
  --bh-fg: #1c1c1a;
  --bh-fg-muted: #5e5e58;
  --bh-line: #e2e1db;
  --bh-border: #d4d3cc;
  --bh-popover: #ffffff;
  --bh-popover-shadow: 0 4px 16px rgba(0, 0, 0, .14);
  /* Status */
  --bh-ok: #2a9d6f;
  --bh-bad: #c0392b;
  --bh-warn: #d99a00;
  /* Series colours (charts, accents) */
  --bh-c1: #2d6cdf; --bh-c2: #d9822b; --bh-c3: #2a9d8f; --bh-c4: #8e5bd0;
  --bh-c5: #c2410c; --bh-c6: #0891b2; --bh-c7: #65a30d; --bh-c8: #be185d;
  /* Chart furniture */
  --bh-chart-muted: #9a9993;
  --bh-chart-critical: #c0392b;
  --bh-chart-grid: #e7e6e1;
  --bh-chart-axis: #b9b8b1;
  --bh-chart-reference: #1c1c1a;
  /* Type, shape, spacing */
  --bh-font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --bh-font-serif: Georgia, 'Times New Roman', serif;
  --bh-fs-caption: .78rem;
  --bh-fs-body: .92rem;
  --bh-fs-heading: 1.02rem;
  --bh-fs-title: 1.7rem;
  --bh-fw-medium: 500;
  --bh-radius: 10px;
  --bh-gap-sm: .6rem;
  --bh-gap-md: 1rem;
  --bh-pad-xs: .25rem; --bh-pad-sm: .5rem; --bh-pad-md: .75rem; --bh-pad-lg: 1rem; --bh-pad-xl: 1.5rem;
  --bh-dur-slow: .3s;
  --bh-ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
/* Dark theme: follows the visitor's system unless <html data-theme="light"> is set; force it with data-theme="dark". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bh-bg: #151513; --bh-panel: #1e1e1c; --bh-fg: #ecebe6; --bh-fg-muted: #a5a49d; --bh-line: #34332f; --bh-border: #46453f;
    --bh-popover: #232321; --bh-popover-shadow: 0 4px 16px rgba(0, 0, 0, .5);
    --bh-ok: #4cc38a; --bh-bad: #f2705f; --bh-warn: #e8b339;
    --bh-c1: #6b9bf2; --bh-c2: #f0a45d; --bh-c3: #4cc4b4; --bh-c4: #b48ae6; --bh-c5: #f07a4d; --bh-c6: #3cc0dd; --bh-c7: #93cf4c; --bh-c8: #ee6fa6;
    --bh-chart-muted: #77766f; --bh-chart-critical: #f2705f; --bh-chart-grid: #2d2c29; --bh-chart-axis: #4b4a45; --bh-chart-reference: #ecebe6;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bh-bg: #151513; --bh-panel: #1e1e1c; --bh-fg: #ecebe6; --bh-fg-muted: #a5a49d; --bh-line: #34332f; --bh-border: #46453f;
  --bh-popover: #232321; --bh-popover-shadow: 0 4px 16px rgba(0, 0, 0, .5);
  --bh-ok: #4cc38a; --bh-bad: #f2705f; --bh-warn: #e8b339;
  --bh-c1: #6b9bf2; --bh-c2: #f0a45d; --bh-c3: #4cc4b4; --bh-c4: #b48ae6; --bh-c5: #f07a4d; --bh-c6: #3cc0dd; --bh-c7: #93cf4c; --bh-c8: #ee6fa6;
  --bh-chart-muted: #77766f; --bh-chart-critical: #f2705f; --bh-chart-grid: #2d2c29; --bh-chart-axis: #4b4a45; --bh-chart-reference: #ecebe6;
  color-scheme: dark;
}

/* Standalone page frame (drop these rules if the dashboard is placed inside an existing layout) */
html, body { margin: 0; background: var(--bh-bg); }
body { color: var(--bh-fg); font-family: var(--bh-font-sans); }
.bh-page { max-width: 1320px; margin: 0 auto; padding: 1rem; }