/* Douceur Hub tokens, from the Claude Design system tokens.json. Light by default; dark only when the
   person turns it on (data-theme="dark", set by static/js/theme.js). */
:root {
  color-scheme: light;
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-brand: #ffe3cd;
  --surface-sunk: #eef1f4;
  --line: #e3e7ec;
  --line-strong: #7f8c99;
  --ink: #002840;
  --ink-body: #1e3446;
  --ink-muted: #56656f;
  --primary: #002840;
  --on-primary: #ffe3cd;
  --accent: #f58525;
  --on-accent: #002840;
  --accent-ink: #b4560a;
  --topbar: #002840;
  --on-topbar: #ffe3cd;
  --focus: #b4560a;
  --ok: #3f5a1f;
  --ok-bg: #eef0d9;
  --warn: #8a4a0b;
  --warn-bg: #fde9d6;
  --danger: #841619;
  --danger-bg: #f8e1df;
  --info: #4e3e7a;
  --info-bg: #ece7f5;
  --chart-1: var(--brand-navy);
  --chart-2: var(--brand-orange);
  --chart-3: var(--brand-purple);
  --chart-4: var(--brand-lime);
  --chart-5: var(--brand-tan);
  --chart-area: #e8eef3;
  --brand-navy: #002840;
  --brand-orange: #f58525;
  --brand-cream: #ffe3cd;
  --brand-olive: #2e341a;
  --brand-red: #841619;
  --brand-peach: #f2bba3;
  --brand-lime: #bfaf31;
  --brand-purple: #775ea8;
  --brand-maroon: #3e111c;
  --brand-tan: #c29070;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 8px;
  --radius-input: 10px;
  --radius-card: 12px;
  --radius-band: 16px;
  --radius-pill: 999px;
  --topbar-h: 56px;
  --sidebar-w: 264px;
  --sidebar-rail: 72px;
  --control-h: 40px;
  --font-display: "Markazi Text", "Lyon Arabic Text", "Noto Naskh Arabic", serif;
  --font-ui: "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
  --shadow-pop: 0 8px 24px rgba(0, 40, 64, 0.12);
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #001a2b;
    --surface: #062638;
    --surface-brand: #0b3047;
    --surface-sunk: #00141f;
    --line: #17384c;
    --line-strong: #5f8197;
    --ink: #ffe3cd;
    --ink-body: #e9dccf;
    --ink-muted: #9db0bd;
    --primary: #f58525;
    --on-primary: #1a0e04;
    --on-accent: #1a0e04;
    --accent-ink: #f8a35a;
    --topbar: #00141f;
    --focus: #f8a35a;
    --ok: #c9d27a;
    --ok-bg: #1f2a12;
    --warn: #f8b26a;
    --warn-bg: #33200c;
    --danger: #f19a93;
    --danger-bg: #3a1216;
    --info: #bfb0e6;
    --info-bg: #241c3a;
    --chart-1: #ffe3cd;
    --chart-3: #bfb0e6;
    --chart-area: #0b3047;
    --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.45);
}