/* ═══════════════════════════════════════════════════════════════════════════
   VALIDURE ERP — design tokens                          owner: UI Designer
   ───────────────────────────────────────────────────────────────────────────
   Public tokens are the `--e-*`, `--font-*`, `--fs-*`, `--sp-*`, `--r-*`,
   `--shadow-*`, `--dur-*`, `--ease-*` and layout names fixed in
   docs/design/PROTOTYPE.md §2.2. Pages and layouts use ONLY those (plus the
   few documented extensions marked "ext" below). Never hard-code a colour.

   How the cascade works
     1. :root holds theme-independent scales and the private raw palettes
        `--_l-*` (light) and `--_d-*` (dark) for neutrals + status colours.
     2. Each html[data-theme="…"] block sets that theme's raw brand values
        for both modes, plus its sidebar (the sidebar is dark in every mode).
     3. The mode mappers copy the raw values into the public `--e-*` names:
          :root                           → light   (also the no-JS render)
          html[data-mode="dark"]          → dark
          html[data-mode="system"] + OS   → follows prefers-color-scheme
     4. html[data-theme="dark-pro"] is forced dark: it sets final values
        and wins over every mode mapper (same specificity, later in source).
   Private `--_*` tokens are an implementation detail — never use them.

   Every foreground/background pair below is verified WCAG 2.1 AA by
   `node prototype/tools/contrast.mjs` for all 9 themes × light/dark.
   Changes to SRS §3.1.2 colours are recorded in docs/design/04-design-system.md.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── type ─────────────────────────────────────────────────────────────── */
  --font-display: "Archivo", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-ui: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

  --fs-xs: 0.75rem;    /* 12px — badges, micro labels, table meta */
  --fs-sm: 0.8125rem;  /* 13px — hints, dense tables, secondary text */
  --fs-md: 0.875rem;   /* 14px — UI base: body, inputs, buttons, cells */
  --fs-lg: 1rem;       /* 16px — card titles, section heads, lead text */
  --fs-xl: 1.25rem;    /* 20px — dialog titles, mobile page titles */
  --fs-2xl: 1.625rem;  /* 26px — page titles, compact KPI figures */
  --fs-3xl: 2.125rem;  /* 34px — hero KPI figures */

  /* ext: line heights, weights and the display voice */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-ui: 1.45;
  --lh-prose: 1.6;
  --fw-regular: 400;
  --fw-medium: 520;
  --fw-semibold: 620;
  --fw-bold: 700;
  --display-stretch: 110%;    /* Archivo wdth axis: slightly expanded */
  --display-weight: 620;
  --display-tracking: -0.018em;

  /* ── space (4px base) ─────────────────────────────────────────────────── */
  --sp-1: 0.25rem;  /*  4 */
  --sp-2: 0.5rem;   /*  8 */
  --sp-3: 0.75rem;  /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.25rem;  /* 20 */
  --sp-6: 1.5rem;   /* 24 */
  --sp-7: 1.75rem;  /* 28 */
  --sp-8: 2rem;     /* 32 */
  --sp-9: 2.25rem;  /* 36 */
  --sp-10: 2.5rem;  /* 40 */
  --sp-11: 2.75rem; /* 44 */
  --sp-12: 3rem;    /* 48 */

  /* ── shape — restrained: an accountant's instrument, not a toy ────────── */
  --r-sm: 3px;     /* badges, tags, code chips, checkboxes */
  --r-md: 5px;     /* buttons, inputs, menus */
  --r-lg: 8px;     /* cards, tables, dialogs */
  --r-full: 999px; /* avatars, switches, filter chips */

  /* ── motion ───────────────────────────────────────────────────────────── */
  --dur-fast: 120ms;
  --dur-med: 200ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── layout (consumed by layout.css — UX Architect) ───────────────────── */
  --topbar-h: 56px;
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 64px;
  --content-max: 1360px;

  /* ext: brand tile — theme- and mode-independent (03-brand.md §3.1).
     The navy ribbon of the emblem vanishes on every dark sidebar, so the
     emblem always sits on this white tile. */
  --e-brand-tile: #ffffff;
  --e-brand-tile-ring: rgba(11, 21, 38, 0.1);

  /* ext: stacking order */
  --z-sticky: 10;
  --z-sidebar: 40;
  --z-drawer: 60;
  --z-dialog: 70;
  --z-toast: 80;

  /* ── raw neutral + status palettes (private) ──────────────────────────── */
  /* light — the Validure "Bright Studio" paper world */
  --_l-bg: #f7f9fb;
  --_l-raised: #ffffff;
  --_l-surface: #edf2f7;
  --_l-subtle: #f3f6f9;
  --_l-overlay: rgba(11, 21, 38, 0.48);
  --_l-border: rgba(11, 21, 38, 0.1);
  --_l-border-strong: #7a889b;
  --_l-fg: #0b1526;
  --_l-muted: #44566b;
  --_l-faint: #5b6e84;
  --_l-ok: #0e8a5f;
  --_l-ok-soft: #e5f4ec;
  --_l-ok-fg: #0a6b49;
  --_l-warn: #b7791f;
  --_l-warn-soft: #fcf1de;
  --_l-warn-fg: #8a5300;
  --_l-err: #d6453d;
  --_l-err-soft: #fcebe9;
  --_l-err-fg: #b93a32;
  --_l-info: #2f6bd0;
  --_l-info-soft: #e9f0fc;
  --_l-info-fg: #1f56b3;
  /* ext: data ink — chart series and neutral progress bars, theme-independent
     (blue-grey), so no theme colour reads as a status (a green primary is not "paid") */
  --_l-data: #3d5a78;
  --_l-shadow-1: 0 1px 2px rgba(11, 21, 38, 0.06);
  --_l-shadow-2: 0 1px 2px rgba(11, 21, 38, 0.06), 0 6px 18px -6px rgba(11, 21, 38, 0.16);
  --_l-shadow-pop: 0 2px 6px rgba(11, 21, 38, 0.08), 0 24px 48px -16px rgba(11, 21, 38, 0.28);

  /* dark — navy-graphite, never pure black */
  --_d-bg: #0d131b;
  --_d-raised: #141b25;
  --_d-surface: #1a2331;
  --_d-subtle: #17202b;
  --_d-overlay: rgba(2, 6, 12, 0.68);
  --_d-border: rgba(157, 178, 201, 0.16);
  --_d-border-strong: #66778c;
  --_d-fg: #e7edf4;
  --_d-muted: #a9b7c7;
  --_d-faint: #8d9db0;
  --_d-ok: #34c08b;
  --_d-ok-soft: #0f2e22;
  --_d-ok-fg: #6fd6a8;
  --_d-warn: #dda23c;
  --_d-warn-soft: #33250d;
  --_d-warn-fg: #f0c067;
  --_d-err: #f0675e;
  --_d-err-soft: #3d1c1a;
  --_d-err-fg: #ff9d94;
  --_d-info: #6a9df0;
  --_d-info-soft: #182841;
  --_d-info-fg: #9cc0fa;
  --_d-data: #8fa9c6;
  --_d-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --_d-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 22px -6px rgba(0, 0, 0, 0.6);
  --_d-shadow-pop: 0 2px 6px rgba(0, 0, 0, 0.5), 0 24px 56px -12px rgba(0, 0, 0, 0.72);

  /* ── theme: Validure (default) — logo teal on logo navy ───────────────── */
  --_l-primary: #0e7e90;
  --_l-primary-dark: #0c6b7a;
  --_l-primary-soft: #e2f3f6;
  --_l-on-primary: #ffffff;
  --_d-primary: #50afc1;
  --_d-primary-dark: #6ec0d1;
  --_d-primary-soft: #10333a;
  --_d-on-primary: #04121a;
  --e-sidebar: #0a1b3d;
  --e-sidebar-fg: #e6edf8;
  --e-sidebar-muted: #97a7c4;
  --e-sidebar-active: #047a8c;
  --e-sidebar-active-fg: #ffffff;
  --e-sidebar-border: rgba(230, 237, 248, 0.1);
}

/* ── themes (SRS §3.1.2) ─────────────────────────────────────────────────── */

html[data-theme="classic-blue"] {
  --_l-primary: #1d4ed8;
  --_l-primary-dark: #1e3a8a;
  --_l-primary-soft: #eaf0fd;
  --_l-on-primary: #ffffff;
  --_d-primary: #76a1ff;
  --_d-primary-dark: #91b4fe;
  --_d-primary-soft: #16264d;
  --_d-on-primary: #010932;
  --e-sidebar: #0c1e4e;
  --e-sidebar-fg: #e6edfb;
  --e-sidebar-muted: #9aa9c8;
  --e-sidebar-active: #3166f1;
  --e-sidebar-active-fg: #ffffff;
  --e-sidebar-border: rgba(230, 237, 251, 0.1);
}

html[data-theme="emerald"] {
  --_l-primary: #047857;
  --_l-primary-dark: #065f46;
  --_l-primary-soft: #e3f4ec;
  --_l-on-primary: #ffffff;
  --_d-primary: #56b38f;
  --_d-primary-dark: #72c4a2;
  --_d-primary-soft: #133528;
  --_d-on-primary: #00140f;
  --e-sidebar: #04231c;
  --e-sidebar-fg: #e3f0eb;
  --e-sidebar-muted: #8fb0a6;
  --e-sidebar-active: #157f5d;
  --e-sidebar-active-fg: #ffffff;
  --e-sidebar-border: rgba(227, 240, 235, 0.1);
}

html[data-theme="indigo"] {
  --_l-primary: #4338ca;
  --_l-primary-dark: #3730a3;
  --_l-primary-soft: #eceeff;
  --_l-on-primary: #ffffff;
  --_d-primary: #8f9bfe;
  --_d-primary-dark: #a4affe;
  --_d-primary-soft: #23265d;
  --_d-on-primary: #0b0631;
  --e-sidebar: #151244;
  --e-sidebar-fg: #e7e8fb;
  --e-sidebar-muted: #9ea2c4;
  --e-sidebar-active: #5b5aed;
  --e-sidebar-active-fg: #ffffff;
  --e-sidebar-border: rgba(231, 232, 251, 0.1);
}

html[data-theme="teal"] {
  --_l-primary: #0f766e;
  --_l-primary-dark: #115e59;
  --_l-primary-soft: #e2f3f1;
  --_l-on-primary: #ffffff;
  --_d-primary: #59b1a8;
  --_d-primary-dark: #75c2b9;
  --_d-primary-soft: #143431;
  --_d-on-primary: #001312;
  --e-sidebar: #042f2c;
  --e-sidebar-fg: #e1f0ee;
  --e-sidebar-muted: #8fb9b4;
  --e-sidebar-active: #238279;
  --e-sidebar-active-fg: #ffffff;
  --e-sidebar-border: rgba(225, 240, 238, 0.1);
}

html[data-theme="purple"] {
  --_l-primary: #7c3aed;
  --_l-primary-dark: #6d28d9;
  --_l-primary-soft: #f0edfe;
  --_l-on-primary: #ffffff;
  --_d-primary: #ac92fe;
  --_d-primary-dark: #baa8fe;
  --_d-primary-soft: #321d5f;
  --_d-on-primary: #120132;
  --e-sidebar: #22104a;
  --e-sidebar-fg: #ece8fb;
  --e-sidebar-muted: #a8a2c6;
  --e-sidebar-active: #8445f8;
  --e-sidebar-active-fg: #ffffff;
  --e-sidebar-border: rgba(236, 232, 251, 0.1);
}

html[data-theme="slate"] {
  --_l-primary: #334155;
  --_l-primary-dark: #1e293b;
  --_l-primary-soft: #eaeef4;
  --_l-on-primary: #ffffff;
  --_d-primary: #8aa4ca;
  --_d-primary-dark: #9db6d8;
  --_d-primary-soft: #262f3c;
  --_d-on-primary: #080f1f;
  --e-sidebar: #0f172a;
  --e-sidebar-fg: #e5eaf2;
  --e-sidebar-muted: #97a3bb;
  --e-sidebar-active: #576f90;
  --e-sidebar-active-fg: #ffffff;
  --e-sidebar-border: rgba(229, 234, 242, 0.1);
}

html[data-theme="orange"] {
  --_l-primary: #c2410c;
  --_l-primary-dark: #9a3412;
  --_l-primary-soft: #fdece5;
  --_l-on-primary: #ffffff;
  --_d-primary: #ff7c52;
  --_d-primary-dark: #fe9a7a;
  --_d-primary-soft: #4a1d0e;
  --_d-on-primary: #210500;
  --e-sidebar: #331004;
  --e-sidebar-fg: #f7e9e3;
  --e-sidebar-muted: #c29d90;
  --e-sidebar-active: #c4430f;
  --e-sidebar-active-fg: #ffffff;
  --e-sidebar-border: rgba(247, 233, 227, 0.1);
}

/* ── mode mappers: raw palette → public tokens ───────────────────────────── */

:root {
  color-scheme: light;
  --e-bg: var(--_l-bg);
  --e-raised: var(--_l-raised);
  --e-surface: var(--_l-surface);
  --e-subtle: var(--_l-subtle); /* ext: zebra rows, hover wells, read-only fields */
  --e-overlay: var(--_l-overlay);
  --e-border: var(--_l-border);
  --e-border-strong: var(--_l-border-strong);
  --e-fg: var(--_l-fg);
  --e-muted: var(--_l-muted);
  --e-faint: var(--_l-faint);
  --e-primary: var(--_l-primary);
  --e-primary-dark: var(--_l-primary-dark);
  --e-primary-soft: var(--_l-primary-soft);
  --e-on-primary: var(--_l-on-primary);
  --e-focus: var(--_l-primary);
  --e-ok: var(--_l-ok);
  --e-ok-soft: var(--_l-ok-soft);
  --e-ok-fg: var(--_l-ok-fg);
  --e-warn: var(--_l-warn);
  --e-warn-soft: var(--_l-warn-soft);
  --e-warn-fg: var(--_l-warn-fg);
  --e-err: var(--_l-err);
  --e-err-soft: var(--_l-err-soft);
  --e-err-fg: var(--_l-err-fg);
  --e-info: var(--_l-info);
  --e-info-soft: var(--_l-info-soft);
  --e-info-fg: var(--_l-info-fg);
  --e-data: var(--_l-data); /* ext */
  --shadow-1: var(--_l-shadow-1);
  --shadow-2: var(--_l-shadow-2);
  --shadow-pop: var(--_l-shadow-pop);
}

html[data-mode="dark"] {
  color-scheme: dark;
  --e-bg: var(--_d-bg);
  --e-raised: var(--_d-raised);
  --e-surface: var(--_d-surface);
  --e-subtle: var(--_d-subtle);
  --e-overlay: var(--_d-overlay);
  --e-border: var(--_d-border);
  --e-border-strong: var(--_d-border-strong);
  --e-fg: var(--_d-fg);
  --e-muted: var(--_d-muted);
  --e-faint: var(--_d-faint);
  --e-primary: var(--_d-primary);
  --e-primary-dark: var(--_d-primary-dark);
  --e-primary-soft: var(--_d-primary-soft);
  --e-on-primary: var(--_d-on-primary);
  --e-focus: var(--_d-primary);
  --e-ok: var(--_d-ok);
  --e-ok-soft: var(--_d-ok-soft);
  --e-ok-fg: var(--_d-ok-fg);
  --e-warn: var(--_d-warn);
  --e-warn-soft: var(--_d-warn-soft);
  --e-warn-fg: var(--_d-warn-fg);
  --e-err: var(--_d-err);
  --e-err-soft: var(--_d-err-soft);
  --e-err-fg: var(--_d-err-fg);
  --e-info: var(--_d-info);
  --e-info-soft: var(--_d-info-soft);
  --e-info-fg: var(--_d-info-fg);
  --e-data: var(--_d-data);
  --shadow-1: var(--_d-shadow-1);
  --shadow-2: var(--_d-shadow-2);
  --shadow-pop: var(--_d-shadow-pop);
}

@media (prefers-color-scheme: dark) {
  html[data-mode="system"] {
    color-scheme: dark;
    --e-bg: var(--_d-bg);
    --e-raised: var(--_d-raised);
    --e-surface: var(--_d-surface);
    --e-subtle: var(--_d-subtle);
    --e-overlay: var(--_d-overlay);
    --e-border: var(--_d-border);
    --e-border-strong: var(--_d-border-strong);
    --e-fg: var(--_d-fg);
    --e-muted: var(--_d-muted);
    --e-faint: var(--_d-faint);
    --e-primary: var(--_d-primary);
    --e-primary-dark: var(--_d-primary-dark);
    --e-primary-soft: var(--_d-primary-soft);
    --e-on-primary: var(--_d-on-primary);
    --e-focus: var(--_d-primary);
    --e-ok: var(--_d-ok);
    --e-ok-soft: var(--_d-ok-soft);
    --e-ok-fg: var(--_d-ok-fg);
    --e-warn: var(--_d-warn);
    --e-warn-soft: var(--_d-warn-soft);
    --e-warn-fg: var(--_d-warn-fg);
    --e-err: var(--_d-err);
    --e-err-soft: var(--_d-err-soft);
    --e-err-fg: var(--_d-err-fg);
    --e-info: var(--_d-info);
    --e-info-soft: var(--_d-info-soft);
    --e-info-fg: var(--_d-info-fg);
    --e-data: var(--_d-data);
    --shadow-1: var(--_d-shadow-1);
    --shadow-2: var(--_d-shadow-2);
    --shadow-pop: var(--_d-shadow-pop);
  }
}

/* ── Dark Professional — forced dark, zinc neutrals (SRS §3.1.2) ─────────── */
/* Same specificity as the mode mappers and later in source: always wins. */
html[data-theme="dark-pro"] {
  color-scheme: dark;
  --e-bg: #0f0f12;
  --e-raised: #17171b;
  --e-surface: #1e1e23;
  --e-subtle: #1a1a1f;
  --e-overlay: rgba(0, 0, 0, 0.7);
  --e-border: rgba(212, 212, 222, 0.13);
  --e-border-strong: #6b6b76;
  --e-fg: #ececef;
  --e-muted: #a9a9b2;
  --e-faint: #8e8e98;
  --e-primary: #10b981;
  --e-primary-dark: #4acb98;
  --e-primary-soft: #0b2e22;
  --e-on-primary: #04130d;
  --e-focus: #10b981;
  --e-ok: var(--_d-ok);
  --e-ok-soft: var(--_d-ok-soft);
  --e-ok-fg: var(--_d-ok-fg);
  --e-warn: var(--_d-warn);
  --e-warn-soft: var(--_d-warn-soft);
  --e-warn-fg: var(--_d-warn-fg);
  --e-err: var(--_d-err);
  --e-err-soft: var(--_d-err-soft);
  --e-err-fg: var(--_d-err-fg);
  --e-info: var(--_d-info);
  --e-info-soft: var(--_d-info-soft);
  --e-info-fg: var(--_d-info-fg);
  --e-data: var(--_d-data);
  --shadow-1: var(--_d-shadow-1);
  --shadow-2: var(--_d-shadow-2);
  --shadow-pop: var(--_d-shadow-pop);
  --e-sidebar: #09090b;
  --e-sidebar-fg: #ededef;
  --e-sidebar-muted: #9a9aa3;
  --e-sidebar-active: #047857;
  --e-sidebar-active-fg: #ffffff;
  --e-sidebar-border: rgba(237, 237, 239, 0.09);
}

/* ── paper surfaces: document previews stay paper in every theme and mode ──── */
/* 03-brand §4.1: tenant prints are ink-only, so an A4 / 80 mm / 58 mm .sheet
   previews the paper even when the operator works in a dark theme. Neutrals
   and status map to the light palette; the theme colour maps to ink (no brand
   colour on documents). [data-surface="paper"] is the same mapper for any other
   paper preview (e.g. a thumbnail of a print in a dialog). The contrast gate
   covers these pairs: they are the light-mode pairs of every theme.          */
.sheet,
[data-surface="paper"] {
  color-scheme: light;
  --e-bg: var(--_l-bg);
  --e-raised: var(--_l-raised);
  --e-surface: var(--_l-surface);
  --e-subtle: var(--_l-subtle);
  --e-overlay: var(--_l-overlay);
  --e-border: var(--_l-border);
  --e-border-strong: var(--_l-border-strong);
  --e-fg: var(--_l-fg);
  --e-muted: var(--_l-muted);
  --e-faint: var(--_l-faint);
  --e-primary: var(--_l-fg);
  --e-primary-dark: var(--_l-fg);
  --e-primary-soft: var(--_l-surface);
  --e-on-primary: var(--_l-raised);
  --e-focus: var(--_l-fg);
  --e-ok: var(--_l-ok);
  --e-ok-soft: var(--_l-ok-soft);
  --e-ok-fg: var(--_l-ok-fg);
  --e-warn: var(--_l-warn);
  --e-warn-soft: var(--_l-warn-soft);
  --e-warn-fg: var(--_l-warn-fg);
  --e-err: var(--_l-err);
  --e-err-soft: var(--_l-err-soft);
  --e-err-fg: var(--_l-err-fg);
  --e-info: var(--_l-info);
  --e-info-soft: var(--_l-info-soft);
  --e-info-fg: var(--_l-info-fg);
  --e-data: var(--_l-data); /* ext */
  --shadow-1: var(--_l-shadow-1);
  --shadow-2: var(--_l-shadow-2);
  --shadow-pop: var(--_l-shadow-pop);
}

/* ── theme preview swatches (ext, batch 4) ───────────────────────────────── */
/* Themes are keyed on html[data-theme], so a swatch cannot borrow another
   theme's colours. A preview of theme X (the Appearance theme cards, a theme
   menu) sets [data-swatch="X"] and paints with these read-only copies:
     --sw-sidebar / -muted / -active   the sidebar, a nav line, the active pill
     --sw-primary-l / --sw-raised-l    primary on a light card
     --sw-primary-d / --sw-raised-d    primary on a dark card
   Decoration only (never text). tools/contrast.mjs checks every value against
   the theme's own resolved tokens ("swatch = theme" parity), so a theme change
   that is not copied here fails the gate.                                   */
[data-swatch="validure"] { --sw-sidebar: #0a1b3d; --sw-sidebar-muted: #97a7c4; --sw-sidebar-active: #047a8c; --sw-primary-l: #0e7e90; --sw-raised-l: #ffffff; --sw-primary-d: #50afc1; --sw-raised-d: #141b25; }
[data-swatch="classic-blue"] { --sw-sidebar: #0c1e4e; --sw-sidebar-muted: #9aa9c8; --sw-sidebar-active: #3166f1; --sw-primary-l: #1d4ed8; --sw-raised-l: #ffffff; --sw-primary-d: #76a1ff; --sw-raised-d: #141b25; }
[data-swatch="emerald"] { --sw-sidebar: #04231c; --sw-sidebar-muted: #8fb0a6; --sw-sidebar-active: #157f5d; --sw-primary-l: #047857; --sw-raised-l: #ffffff; --sw-primary-d: #56b38f; --sw-raised-d: #141b25; }
[data-swatch="indigo"] { --sw-sidebar: #151244; --sw-sidebar-muted: #9ea2c4; --sw-sidebar-active: #5b5aed; --sw-primary-l: #4338ca; --sw-raised-l: #ffffff; --sw-primary-d: #8f9bfe; --sw-raised-d: #141b25; }
[data-swatch="teal"] { --sw-sidebar: #042f2c; --sw-sidebar-muted: #8fb9b4; --sw-sidebar-active: #238279; --sw-primary-l: #0f766e; --sw-raised-l: #ffffff; --sw-primary-d: #59b1a8; --sw-raised-d: #141b25; }
[data-swatch="purple"] { --sw-sidebar: #22104a; --sw-sidebar-muted: #a8a2c6; --sw-sidebar-active: #8445f8; --sw-primary-l: #7c3aed; --sw-raised-l: #ffffff; --sw-primary-d: #ac92fe; --sw-raised-d: #141b25; }
[data-swatch="slate"] { --sw-sidebar: #0f172a; --sw-sidebar-muted: #97a3bb; --sw-sidebar-active: #576f90; --sw-primary-l: #334155; --sw-raised-l: #ffffff; --sw-primary-d: #8aa4ca; --sw-raised-d: #141b25; }
[data-swatch="orange"] { --sw-sidebar: #331004; --sw-sidebar-muted: #c29d90; --sw-sidebar-active: #c4430f; --sw-primary-l: #c2410c; --sw-raised-l: #ffffff; --sw-primary-d: #ff7c52; --sw-raised-d: #141b25; }
/* Dark Professional is dark in every mode: its "light" pair is the dark one */
[data-swatch="dark-pro"] { --sw-sidebar: #09090b; --sw-sidebar-muted: #9a9aa3; --sw-sidebar-active: #047857; --sw-primary-l: #10b981; --sw-raised-l: #17171b; --sw-primary-d: #10b981; --sw-raised-d: #17171b; }

/* ── reduced motion: durations collapse, components stay intact ──────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur-med: 0.01ms;
  }
}