/* ─────────────────────────────────────────────────────────────────────────
   Magic UI design tokens (on Bootstrap 5)

   Every colour, size and timing the kit uses. Components read tokens only;
   no component carries a literal colour, and css/magic-ui-bootstrap.css feeds
   these same values to Bootstrap's --bs-* variables: one theme, not two.

   With no switches set you get the default look: light, the Northwind blue,
   the soft rail. Three switches on <html> change it, and combine freely:

     data-theme   "light" (default) | "dark"
     data-accent  "blue" (default, Northwind #2B64E9) | "purple" (Coursue #6A5DE1) | "green"
     data-rail    "soft" (default) | "colored" | "neutral"  — the navigation rail's style

   One more switch works on any element, not just <html>:

     data-density "comfortable" (overviews, dashboards) | "compact" (lists,
                  inspectors); without it, the in-between defaults below apply.

   Contrast: every text colour reaches WCAG AA (4.5:1) on the surface it is
   used on, in every combination. Recheck with tokens/check_contrast.py
   when adding an accent.
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-Variable.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Variable.ttf') format('truetype-variations');
  font-weight: 100 800;
  font-display: swap;
}

:root {
  /* ── Type ──────────────────────────────────────────────────────────── */
  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --fs-2xs: 10.5px;   /* rail labels, version line */
  --fs-xs: 11px;      /* uppercase labels, column heads, badges */
  --fs-sm: 12px;      /* hints, secondary lines */
  --fs-md: 12.5px;    /* secondary UI text, small buttons */
  --fs-base: 13px;    /* default UI text, buttons, menu items */
  --fs-lg: 13.5px;    /* row names, toasts, inputs */
  --fs-xl: 15px;      /* page titles in the toolbar */
  --fs-2xl: 16px;     /* dialog titles */
  --fs-3xl: 18px;     /* public page headings */
  --fs-hero: 26px;    /* full-window overlays ("Drop to import") */
  --fs-display: 28px; /* the page title on an overview ("Good afternoon, Terry") */
  --fw-regular: 500; --fw-medium: 600; --fw-bold: 700; --fw-heavy: 800;
  --lh-tight: 1.3; --lh-base: 1.45; --lh-loose: 1.6;
  --tracking-label: .06em;   /* uppercase labels */
  --tracking-title: -.01em;  /* headings */

  /* ── Space (4px grid, with the in-between steps the UI actually uses) ─ */
  --sp-1: 2px; --sp-2: 4px; --sp-3: 6px; --sp-4: 8px; --sp-5: 10px; --sp-6: 12px;
  --sp-7: 14px; --sp-8: 16px; --sp-9: 18px; --sp-10: 20px; --sp-11: 22px; --sp-12: 24px; --sp-14: 28px;

  /* ── Radius ────────────────────────────────────────────────────────── */
  --r-xs: 6px;    /* tiny buttons, kbd hints */
  --r-sm: 8px;    /* menu items, icon buttons, small controls */
  --r-md: 9px;    /* buttons, tool buttons */
  --r-lg: 10px;   /* inputs, segmented controls, chips' container */
  --r-xl: 12px;   /* menus, cards in panels, previews */
  --r-2xl: 13px;  /* toasts and the selection bar: floating strips */
  --r-3xl: 14px;  /* cards, the task tray, tiles */
  --r-dialog: 16px;
  --r-pill: 999px;
  /* Soft bento (1.1): overviews and dashboards. Cards float on the canvas. */
  --radius-card: 18px;     /* bento cards and overview panels (chosen 22 Sep 2026; the brief suggested 20–28px) */
  --radius-control: 12px;  /* the wide search field, week-strip days */
  --radius-chip: 999px;    /* status chips, the stat strip */

  /* ── Control sizes ─────────────────────────────────────────────────── */
  --h-xs: 22px;   /* pills, row badges */
  --h-sm: 30px;   /* compact buttons, toast actions */
  --h-md: 34px;   /* tool buttons, secondary buttons */
  --h-lg: 38px;   /* dialog buttons, search pill, text inputs in dialogs */
  --h-xl: 44px;   /* primary buttons on standalone pages */
  --row-h: 56px;  /* list/table row (36px content + 2 × --row-pad) */
  /* --row-pad records how --row-h was arrived at. Rows centre their content
     in --row-h, so no rule reads it; change --row-h to change a row. */
  --row-pad: 10px;
  --card-pad: 20px;   /* inside a card; data-density changes it */
  --bento-gap: 16px;  /* between cards on an overview */
  --page-pad: 28px;   /* an overview page's side gutters */

  /* ── Layout ────────────────────────────────────────────────────────── */
  --rail-w: 80px;
  --rail-w-open: 240px;
  --toolbar-h: 66px;
  --inspector-w: 286px;
  --pane-w: 300px;          /* side panes beside a full-window viewer */
  --dialog-w: 420px;
  --content-max: 72ch;      /* running text */

  /* ── Motion ────────────────────────────────────────────────────────── */
  --t-fast: .12s; --t-base: .18s; --t-slow: .25s;
  --ease-out: cubic-bezier(.2, .9, .3, 1);
  --ease-spring: cubic-bezier(.2, .9, .3, 1.2);
  --ease-rail: cubic-bezier(.2, .8, .2, 1);

  /* ── Layers (z-index) ──────────────────────────────────────────────── */
  --topbar-h: 58px;
  /* The product bar sits above the rail, so it outranks it and the
     screen's own toolbar. */
  --z-rail: 6; --z-sticky: 8; --z-topbar: 12; --z-menu: 20; --z-selection-bar: 40; --z-task-tray: 55;
  /* The tour dims the screen, so it sits on the dialog layer — above
     everything it is pointing at, below toasts, which must still be read. */
  --z-tour: 66;
  --z-banner: 60; --z-viewer: 62; --z-dialog: 66; --z-toast: 70; --z-floating-menu: 80;

  /* ── Colour: light, Northwind blue, soft rail (the default) ─────────────
     Seeds: references/tokens-seed.json. Scales: tokens/build_scales.py.
     Existing role names (--bg, --surface, --accent…) read from the scales,
     so every component keeps working. */

  /* Neutral scale, cool grey. 1 card · 2 canvas · 3 sunken/hover · 4 hairlines
     · 6 strong borders · 7 disabled marks · 10 quietest text · 11 secondary
     text · 12 text. Seeds pinned at 1, 2, 4, 6, 7, 12; the seed's secondary
     text (#6B7280) is deepened a step so it holds AA on the canvas and on
     sunken fills. */
  --neutral-1: #ffffff; --neutral-2: #f5f7fb; --neutral-3: #eef0f5; --neutral-4: #e7e8ee;
  --neutral-5: #dcdfe6; --neutral-6: #d0d0d8; --neutral-7: #b9bfc6; --neutral-8: #9aa1ad;
  --neutral-9: #7c8493; --neutral-10: #687080; --neutral-11: #535b68; --neutral-12: #111827;

  /* Primary scale: follows the accent (here the Northwind blue, #2B64E9 = step 9). */
  --primary-1: #f8faff; --primary-2: #f0f5fe; --primary-3: #e1ecff; --primary-4: #d0e0ff;
  --primary-5: #bed4ff; --primary-6: #a8c5fe; --primary-7: #8ab1fe; --primary-8: #6394fd;
  --primary-9: #2b64e9; --primary-10: #1b52d6; --primary-11: #2450b6; --primary-12: #102962;

  /* Roles */
  --bg: var(--neutral-1);           /* the content ground (list screens) */
  --canvas: var(--neutral-2);       /* the ground cards float on (overviews) */
  --surface-muted: var(--canvas);   /* the brief's name for the canvas */
  --surface: var(--neutral-1);      /* panels, cards, menus, dialogs */
  --surface-2: var(--neutral-3);    /* sunken fills, hover */
  --surface-3: var(--neutral-5);    /* stronger hover, tracks */
  --border: var(--neutral-4);
  --border-strong: var(--neutral-6);
  --text: var(--neutral-12);
  --dim: var(--neutral-11);         /* secondary text */
  --faint: var(--neutral-10);       /* the quietest text that still reads */
  --text-rgb: 17, 24, 39; --bg-rgb: 255, 255, 255;

  /* Semantic colours: never follow the accent. */
  --danger: #d62c2c; --danger-soft: rgba(214, 44, 44, 0.09); --danger-rgb: 214, 44, 44;
  --warn: #976617; --warn-soft: rgba(200, 150, 40, 0.16); --warn-rgb: 151, 102, 23;
  --success: #0c8056; --success-soft: rgba(12, 128, 86, 0.1); --success-rgb: 12, 128, 86;
  --info: #2f6fdb; --info-rgb: 47, 111, 219;

  /* Glass: the bars that sit over content rather than beside it. The tint is
     deliberately high — 82% — because text on a bar whose background is
     whatever happens to be scrolling underneath is text with no contrast
     guarantee at all. This is as translucent as the kit will go and still
     hold AA against the content it is most likely to cover. */
  --glass-bg: color-mix(in srgb, var(--surface) 82%, transparent);
  --glass-edge: color-mix(in srgb, var(--border) 70%, transparent);
  --glass-blur: 18px;
  --glass-saturate: 1.6;
  --shadow: 0 16px 48px rgba(20, 30, 40, 0.2); --shadow-sm: 0 4px 16px rgba(20, 30, 40, 0.12);
  --elevation-card: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.07);
  --elevation-raised: 0 12px 32px rgba(16, 24, 40, 0.1);
  --overlay: rgba(18, 24, 30, 0.45);
  --tooltip-bg: var(--text); --tooltip-fg: var(--bg);

  /* Accent (from the primary scale). */
  --accent: var(--primary-9); --accent-strong: var(--primary-10); --on-accent: #ffffff;
  --accent-soft: rgba(43, 100, 233, 0.1);    /* selected rows, focus halos */
  --accent-subtle: var(--primary-3);         /* opaque selected fill */
  --accent-rgb: 43, 100, 233;

  /* Status chips: the Northwind pastels, fixed across accents (seeds). The
     accent chip is the one exception: "active", in the accent's own scale. */
  --chip-success-bg: #a5eeac; --chip-success-fg: #166534; --chip-success-border: #81bd87;
  --chip-pending-bg: #e7a5ee; --chip-pending-fg: #5b1a91; --chip-pending-border: #b781bd;
  --chip-info-bg: #a5bbee;    --chip-info-fg: #1e3a8a;    --chip-info-border: #5d85e1;
  --chip-warning-bg: #fde68a; --chip-warning-fg: #92400e; --chip-warning-border: #f59e0b;
  --chip-danger-bg: #fecaca;  --chip-danger-fg: #991b1b;  --chip-danger-border: #ef4444;
  --chip-neutral-bg: var(--neutral-4); --chip-neutral-fg: var(--neutral-11); --chip-neutral-border: var(--neutral-6);
  --chip-accent-bg: var(--primary-6); --chip-accent-fg: var(--primary-12); --chip-accent-border: var(--primary-8);

  /* Labels: colours people give to queues, calendars and projects. Always
     shown beside the label's name, never as the only cue. */
  --label-blue: #5b8ef5; --label-green: #5fcf72; --label-pink: #de86e3; --label-orange: #ef9a4c;

  /* Chart series: eight slots, assigned in order and never cycled. Deliberately
     outside the accent blocks — a series must not change hue when someone
     switches the accent, or the same measure is a different colour on two
     screens. They are also not the semantic colours: --success/--warn/--danger
     stay reserved for status, and are never "series 4".
     Validated (OKLCH lightness band, chroma floor, protan/deutan separation of
     ADJACENT slots, normal-vision floor, WCAG 3:1 against --surface). Adjacent
     pairs pass, so line/bar/stacked/area are safe to 8 series; all-pairs fails
     past 3 hues, so pie, donut and scatter stop at 3 or direct-label every
     mark. Charts belong on --surface (a card): on the grey --canvas the amber
     and pink slots fall below 3:1. */
  --chart-1: #2b64e9; --chart-2: #e2622f; --chart-3: #0f9d8a; --chart-4: #c98400;
  --chart-5: #df6fa5; --chart-6: #2f7d2f; --chart-7: #6a4bd0; --chart-8: #cf4038;
  /* The three accent seeds, by name. An accent swatch has to show a colour
     that is NOT the active accent, so it cannot read --accent — but it should
     not be a literal in a script either. These are accent-independent on
     purpose: all three are readable whichever accent is on. */
  --accent-swatch-blue: #2b64e9; --accent-swatch-purple: #6a5de1; --accent-swatch-green: #0c8056;

  --chart-grid: var(--border);      /* the faint horizontal rules */
  --chart-axis: var(--faint);       /* axis line, ticks, crosshair */
  --chart-label: var(--dim);        /* tick text, legend text */
  --chart-surface: var(--surface);  /* what a chart must sit on */

  /* Rail: soft — a labelled drawer on the panel colour; the current item is a
     filled accent pill (the Northwind nav). */
  --rail-bg: var(--surface); --rail-fg: var(--text); --rail-fg-muted: var(--dim);
  --rail-active-bg: var(--accent); --rail-active-fg: var(--on-accent);
  --rail-hover-bg: var(--surface-2); --rail-divider: var(--border); --rail-card-bg: var(--surface-2);
  --rail-border: var(--border);
  /* The unread dot. It is a solid 10px mark with no text on it, so it takes
     the vivid tone rather than a chip fill — and on a coloured rail it has to
     give up the green, because green on blue is a dot nobody can see. */
  --rail-dot: var(--success);

  /* Status fills for meters and badges that sit on the rail */
  --status-warn-bg: #ecc16d; --status-warn-fg: #0a0f0c;
  --status-crit-bg: #f9b8b8; --status-crit-fg: #0a0f0c;

  color-scheme: light;
}

/* ── Accent: green ───────────────────────────────────────────────────── */
[data-accent="green"] {
  --primary-1: #f6fcf9; --primary-2: #edf8f1; --primary-3: #ddf1e6; --primary-4: #cbe8d8;
  --primary-5: #b9dec9; --primary-6: #a3d1b8; --primary-7: #89c0a3; --primary-8: #63aa87;
  --primary-9: #0c8056; --primary-10: #036e49; --primary-11: #1a6948; --primary-12: #0c3724;
  --accent-soft: rgba(12, 128, 86, 0.1); --accent-rgb: 12, 128, 86;
}

/* ── Accent: purple (the Coursue seed, #6A5DE1) ──────────────────────── */
[data-accent="purple"] {
  --primary-1: #f9fafe; --primary-2: #f3f3ff; --primary-3: #e8e9fe; --primary-4: #daddfe;
  --primary-5: #cdcffe; --primary-6: #bcbefe; --primary-7: #a7a8fc; --primary-8: #8d8af2;
  --primary-9: #6a5de1; --primary-10: #5c4bce; --primary-11: #5047ac; --primary-12: #29245c;
  --accent-soft: rgba(106, 93, 225, 0.1); --accent-rgb: 106, 93, 225;
}

/* ── Colored rail: the rail carries the brand colour. Darkened until white
      text on it reaches 5:1; the muted text is a near-white tint so it still
      reaches 4.5:1 — the current item's fill tells items apart. ────────── */
[data-rail="colored"] {
  --rail-bg: #2167e3; --rail-fg: #ffffff; --rail-fg-muted: #eff4fd; --rail-active-bg: #1a50b1; --rail-active-fg: var(--rail-fg);
  --rail-hover-bg: #1d5cca; --rail-divider: #5288e9; --rail-card-bg: #1c57bf; --rail-border: transparent;
  --rail-dot: var(--rail-fg);
  --status-warn-bg: #edc371; --status-warn-fg: #0a0f0c; --status-crit-bg: #f9b8b8; --status-crit-fg: #0a0f0c;
}
[data-accent="green"][data-rail="colored"] {
  --rail-bg: #1f7c52; --rail-fg: #ffffff; --rail-fg-muted: #ecf4f0; --rail-active-bg: #186140; --rail-active-fg: var(--rail-fg);
  --rail-hover-bg: #1c6e49; --rail-divider: #509978; --rail-card-bg: #1a6845; --rail-border: transparent;
  --rail-dot: var(--rail-fg);
  --status-warn-bg: #ecc16d; --status-warn-fg: #0a0f0c; --status-crit-bg: #f9b8b8; --status-crit-fg: #0a0f0c;
}
[data-accent="purple"][data-rail="colored"] {
  --rail-bg: #5a4bcf; --rail-fg: #ffffff; --rail-fg-muted: #efedfc; --rail-active-bg: #4a3cb0; --rail-active-fg: var(--rail-fg);
  --rail-hover-bg: #5343c2; --rail-divider: #7d70dc; --rail-card-bg: #5142c0; --rail-border: transparent;
  --rail-dot: var(--rail-fg);
  --status-warn-bg: #edc371; --status-warn-fg: #0a0f0c; --status-crit-bg: #f9b8b8; --status-crit-fg: #0a0f0c;
}

/* ── Neutral rail: the rail is plain; only accents carry colour. ─────── */
[data-rail="neutral"] {
  --rail-bg: #f4f6f8; --rail-fg: #181f26; --rail-fg-muted: #5d6a77; --rail-active-bg: #d3e1f9; --rail-active-fg: var(--rail-fg);
  --rail-hover-bg: #e9edf1; --rail-divider: #dfe4ea; --rail-card-bg: #ffffff; --rail-border: var(--border);
  --status-warn-bg: #996d15; --status-warn-fg: #ffffff; --status-crit-bg: #d53f3f; --status-crit-fg: #ffffff;
}
[data-accent="green"][data-rail="neutral"] { --rail-active-bg: #d4e5e1; }
[data-accent="purple"][data-rail="neutral"] { --rail-active-bg: #e4e1fb; }

/* ── Dark ──────────────────────────────────────────────────────────────
   Generated from the same seeds as light by tokens/build_dark.py, on its own
   lightness ramp — never an inversion. Every role below picks the step that
   clears its contrast floor on the surface it sits on; check_contrast.py
   proves it for all eighteen theme × accent × rail combinations. */
[data-theme="dark"] {
  /* Neutral scale, from #111827 */
  --neutral-1: #14171d; --neutral-2: #1b1e24; --neutral-3: #24282f; --neutral-4: #2c3039;
  --neutral-5: #363b44; --neutral-6: #434852; --neutral-7: #565b65; --neutral-8: #6f757f;
  --neutral-9: #8d929c; --neutral-10: #9fa3ac; --neutral-11: #babec5; --neutral-12: #e2e5ea;
  /* Primary scale, from the Northwind blue */
  --primary-1: #0f1727; --primary-2: #121d34; --primary-3: #15264a; --primary-4: #172d5e;
  --primary-5: #1a3675; --primary-6: #1f428f; --primary-7: #2a54b1; --primary-8: #386cdf;
  --primary-9: #578cfe; --primary-10: #73a0fe; --primary-11: #9dbefe; --primary-12: #d8e5ff;

  --bg: var(--neutral-1); --canvas: var(--neutral-1);
  --surface: var(--neutral-3); --surface-2: var(--neutral-4); --surface-3: var(--neutral-5);
  --border: var(--neutral-5); --border-strong: var(--neutral-7);
  --text: var(--neutral-12); --dim: #9fa3ac; --faint: #8d929c;
  --text-rgb: 226, 229, 234; --bg-rgb: 20, 23, 29;

  --danger: #f64f48; --danger-soft: rgba(246, 79, 72, 0.16); --danger-rgb: 246, 79, 72;
  --warn: #ba873f; --warn-soft: rgba(186, 135, 63, 0.16); --warn-rgb: 186, 135, 63;
  --success: #45a87b; --success-soft: rgba(69, 168, 123, 0.16); --success-rgb: 69, 168, 123;
  --info: #578cfe; --info-rgb: 87, 140, 254;

  /* Dark glass needs to be tinted harder: a light surface scrolling under a
     dark bar washes it out much faster than the other way round. */
  --glass-bg: color-mix(in srgb, var(--surface) 88%, transparent);
  --glass-edge: color-mix(in srgb, var(--border) 80%, transparent);
  --glass-blur: 20px;
  --glass-saturate: 1.4;
  --shadow: 0 16px 48px rgba(0, 0, 0, 0.5); --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.35);
  --elevation-card: 0 1px 2px rgba(0, 0, 0, 0.28);
  --elevation-raised: 0 10px 28px rgba(0, 0, 0, 0.4);
  --overlay: rgba(4, 6, 9, 0.66);

  /* The accent lights up rather than darkens: solid fills carry dark text. */
  --accent: #578cfe; --accent-strong: #73a0fe; --on-accent: var(--neutral-1);
  --accent-soft: rgba(87, 140, 254, 0.16); --accent-rgb: 87, 140, 254;

  /* Chips: each status hue's own dark scale — fill at step 3, text at 11,
     edge at 6. The accent chip follows the accent, as in light. */
  --chip-success-bg: #142e21; --chip-success-fg: #8dcfad; --chip-success-border: #1a543b;
  --chip-pending-bg: #242247; --chip-pending-fg: #b4b5ff; --chip-pending-border: #403b87;
  --chip-info-bg: #15264a; --chip-info-fg: #9dbefe; --chip-info-border: #1f428f;
  --chip-warning-bg: #332512; --chip-warning-fg: #ddb685; --chip-warning-border: #5e4117;
  --chip-danger-bg: #441714; --chip-danger-fg: #ffa196; --chip-danger-border: #80201d;

  --label-blue: #71a1fe; --label-green: #52bd65; --label-pink: #d27fd7; --label-orange: #de8e43;

  /* Chart series, dark. Validated on the dark --surface (#24282f) on its own
     ramp, not by inverting light: slots 1, 5, 6 and 7 lift, the rest already
     clear 3:1 there. Same fixed order, same rules — adjacent pairs to 8 series,
     three hues for a donut. Accent-independent, as in light. */
  --chart-1: #4a7ef2; --chart-2: #e2622f; --chart-3: #0f9d8a; --chart-4: #c98400;
  --chart-5: #d4618f; --chart-6: #3f9440; --chart-7: #8468e0; --chart-8: #cf4038;
  --chart-grid: var(--border);
  --chart-axis: var(--faint);
  --chart-label: var(--dim);
  --chart-surface: var(--surface);

  --status-warn-bg: #ca9955; --status-warn-fg: var(--neutral-1);
  --status-crit-bg: #fe6f64; --status-crit-fg: var(--neutral-1);

  color-scheme: dark;
}

[data-theme="dark"][data-accent="green"] {
  --primary-1: #101a14; --primary-2: #13221a; --primary-3: #142e21; --primary-4: #153828;
  --primary-5: #164430; --primary-6: #1a543b; --primary-7: #25694b; --primary-8: #328761;
  --primary-9: #45a87b; --primary-10: #5cb88d; --primary-11: #8dcfad; --primary-12: #cbefdb;
  --accent: #45a87b; --accent-strong: #5cb88d;
  --accent-soft: rgba(69, 168, 123, 0.16); --accent-rgb: 69, 168, 123;
}

[data-theme="dark"][data-accent="purple"] {
  --primary-1: #151525; --primary-2: #1b1b32; --primary-3: #242247; --primary-4: #2b2959;
  --primary-5: #34306e; --primary-6: #403b87; --primary-7: #524ba7; --primary-8: #6961d3;
  --primary-9: #857dfe; --primary-10: #9694fe; --primary-11: #b4b5ff; --primary-12: #e0e2ff;
  --accent: #857dfe; --accent-strong: #9694fe;
  --accent-soft: rgba(133, 125, 254, 0.16); --accent-rgb: 133, 125, 254;
}

/* The rails read from the scales above, so one block covers every accent. */
[data-theme="dark"][data-rail="colored"] {
  --rail-bg: var(--primary-2); --rail-fg: var(--neutral-12); --rail-fg-muted: var(--neutral-11);
  --rail-active-bg: var(--primary-5); --rail-active-fg: var(--neutral-12);
  --rail-hover-bg: var(--primary-4); --rail-divider: var(--primary-6); --rail-card-bg: var(--primary-3);
  --rail-border: transparent;
}
[data-theme="dark"][data-rail="neutral"] {
  --rail-bg: var(--neutral-2); --rail-fg: var(--neutral-12); --rail-fg-muted: var(--neutral-11);
  --rail-active-bg: var(--primary-4); --rail-active-fg: var(--neutral-12);
  --rail-hover-bg: var(--neutral-4); --rail-divider: var(--neutral-5); --rail-card-bg: var(--neutral-3);
  --rail-border: var(--border);
}

/* ── Density: set on any container. Comfortable suits overviews and any
      list whose rows carry two lines; compact is for dense, single-line
      tables (audit logs, long admin lists) and for the inspector. ──────── */
[data-density="comfortable"] { --row-h: 64px; --row-pad: 14px; --card-pad: 24px; --bento-gap: 20px; }
[data-density="compact"] { --row-h: 52px; --row-pad: 8px; --card-pad: 18px; --bento-gap: 14px; }