/* Aurum theme kit: palette, fonts, five themes, densities, brand and helper classes
   GENERATED by tooling/gen/theme-kit/build.mjs from apps/web/src/core/theme. Do not edit; re-run the script.
   Use: <html data-theme="classic|aurum|mono|terminal|meridian" data-density="compact|normal|detailed">.
   Classic is the default (also applied on :root). Components use the semantic tokens (--bg-canvas, --fg-1,
   --accent, --st-ok-bg ...), never --palette-* or raw values. */

/* 1. Palette (tier 1, raw colours) */
/* GENERATED from docs/design/aurum-canvas/themes.css (tier 1: primitive palette).
   Raw colour values live only here and in themes/*.css. Components never use --palette-* directly:
   they use the tier-2 semantic tokens (themes/*.css), through Tailwind utilities or var(--...). */
:root {
  --palette-amber-50: #FFFBEB;
  --palette-amber-100: #FFF7E8;
  --palette-amber-100-2: #FFF4D9;
  --palette-amber-200: #FFF3CC;
  --palette-amber-500: #FFD84D;
  --palette-amber-700: #D99A00;
  --palette-amber-700-2: #C98A00;
  --palette-amber-900: #7A4E00;
  --palette-amber-900-2: #774F00;
  --palette-amber-950: #1A1405;
  --palette-amber-950-2: #2E2600;
  --palette-black: #000000;
  --palette-blue-25: #F5F8FF;
  --palette-blue-50: #EFF5FF;
  --palette-blue-100: #DBE8FF;
  --palette-blue-100-2: #E8EEFF;
  --palette-blue-100-3: #EDF1F6;
  --palette-blue-100-4: #E6EBF2;
  --palette-blue-100-5: #E4EEF9;
  --palette-blue-200: #BCD4FE;
  --palette-blue-400: #6CC0FF;
  --palette-blue-600: #2F5FD0;
  --palette-blue-600-2: #2F5BEA;
  --palette-blue-700: #2650B3;
  --palette-blue-700-2: #1D3FA8;
  --palette-blue-700-3: #1F6FC5;
  --palette-blue-800: #0B4A86;
  --palette-blue-900: #132A50;
  --palette-blue-900-2: #1D3763;
  --palette-blue-900-3: #16305A;
  --palette-blue-950: #0A2540;
  --palette-blue-950-2: #0C1F3F;
  --palette-blue-950-3: #0F1D33;
  --palette-cream: #F6EDE9;
  --palette-cyan-50: #F2FAFA;
  --palette-cyan-100: #EEF6F7;
  --palette-cyan-100-2: #E3F3F4;
  --palette-cyan-400: #9FD3D7;
  --palette-cyan-800: #0E7C86;
  --palette-cyan-900: #0B6E77;
  --palette-cyan-900-2: #085A61;
  --palette-cyan-900-3: #0B6870;
  --palette-cyan-900-4: #0B5E66;
  --palette-green-100: #ECFAF2;
  --palette-green-100-2: #E9FBF0;
  --palette-green-100-3: #E2F5E9;
  --palette-green-200: #E2F3EA;
  --palette-green-300: #B6E8CB;
  --palette-green-400: #75F0A6;
  --palette-green-500: #5FD394;
  --palette-green-500-2: #4BE08A;
  --palette-green-500-3: #4FD1A1;
  --palette-green-700: #1F9D55;
  --palette-green-800: #1C8A50;
  --palette-green-800-2: #1E8A55;
  --palette-green-900: #17703F;
  --palette-green-900-2: #126B37;
  --palette-green-900-3: #1E6B3C;
  --palette-green-900-4: #12643D;
  --palette-green-950: #0B2E18;
  --palette-indigo-50: #ECEAFF;
  --palette-indigo-200: #CDC7FF;
  --palette-indigo-500: #5947FF;
  --palette-indigo-600: #3D2EE0;
  --palette-neutral-25: #FCFCFD;
  --palette-neutral-25-2: #FAFAFA;
  --palette-neutral-25-3: #F8FAFC;
  --palette-neutral-50: #F8F9FB;
  --palette-neutral-50-2: #F6F8FB;
  --palette-neutral-50-3: #FBF8F6;
  --palette-neutral-50-4: #FBF6F4;
  --palette-neutral-50-5: #F5F5F5;
  --palette-neutral-50-6: #F4F7FB;
  --palette-neutral-100: #EFEFEF;
  --palette-neutral-100-2: #F0F0F0;
  --palette-neutral-100-3: #F2F2F2;
  --palette-neutral-100-4: #EDEDED;
  --palette-neutral-200: #E5E5E5;
  --palette-neutral-200-2: #E6E6E6;
  --palette-neutral-400: #C4C4C4;
  --palette-neutral-500: #A3A3A3;
  --palette-neutral-500-2: #8F8F8F;
  --palette-neutral-500-3: #A6A6A6;
  --palette-neutral-700: #7A6770;
  --palette-neutral-700-2: #666666;
  --palette-neutral-800: #525252;
  --palette-neutral-900: #2A2A2A;
  --palette-neutral-900-2: #404040;
  --palette-neutral-900-3: #333333;
  --palette-neutral-900-4: #2B2B2B;
  --palette-neutral-950: #0A0A0A;
  --palette-neutral-950-2: #171717;
  --palette-neutral-950-3: #1F1F1F;
  --palette-neutral-950-4: #111111;
  --palette-neutral-950-5: #161616;
  --palette-neutral-950-6: #0F0F0F;
  --palette-neutral-950-7: #1C1C1C;
  --palette-neutral-950-8: #262626;
  --palette-neutral-950-9: #1A1A1A;
  --palette-neutral-950-10: #1A1400;
  --palette-orange-400: #FFD08A;
  --palette-orange-500: #FFB547;
  --palette-orange-600: #FF9F1A;
  --palette-orange-800: #8F5300;
  --palette-orange-800-2: #B46A00;
  --palette-orange-950: #2A1A00;
  --palette-red-50: #FDF0F0;
  --palette-red-100: #FDE4E1;
  --palette-red-100-2: #FBE7E6;
  --palette-red-400: #FF968A;
  --palette-red-400-2: #FF7070;
  --palette-red-600: #CC3333;
  --palette-red-600-2: #D0453E;
  --palette-red-700: #A82626;
  --palette-red-700-2: #B42318;
  --palette-red-700-3: #9E1F1A;
  --palette-red-800: #A8200F;
  --palette-red-950: #3A0D0D;
  --palette-rose-500: #E5484D;
  --palette-rose-900: #3A1A24;
  --palette-rose-950: #21030D;
  --palette-rose-950-2: #2A0F17;
  --palette-sand-200: #EFE6E2;
  --palette-slate-50: #F3F5F8;
  --palette-slate-100: #E9ECF1;
  --palette-slate-100-2: #F1F3F6;
  --palette-slate-200: #E1E5EB;
  --palette-slate-200-2: #D9E0EA;
  --palette-slate-400: #AEB6C4;
  --palette-slate-400-2: #A9B7CC;
  --palette-slate-600: #687183;
  --palette-slate-700: #5B6474;
  --palette-slate-700-2: #5A687D;
  --palette-slate-800: #434B59;
  --palette-slate-800-2: #3B4A60;
  --palette-slate-900: #262C37;
  --palette-slate-950: #11151C;
  --palette-slate-950-2: #1A1F27;
  --palette-slate-950-3: #171B22;
  --palette-slate-950-4: #1D222B;
  --palette-stone-300: #E0D4D0;
  --palette-stone-400: #C8B9B4;
  --palette-stone-900: #463037;
  --palette-warmblack: #190209;
  --palette-white: #FFFFFF;
  --palette-yellow-50: #FFFDF2;
  --palette-yellow-400: #F5F573;
  --palette-yellow-900: #7A6A00;
}


/* 2. Font stacks (local fonts only; nothing is bundled) */
/* GENERATED from docs/design/aurum-canvas/themes.css: font stacks (tier 1).
   Local fonts only: no licensed font files are bundled. Themes reference these through --font-body,
   --font-display and --font-mono; components use the font-body / font-display / font-mono utilities. */
:root {
  --font-stack-inter: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-stack-inter-2: Inter, "Segoe UI", system-ui, sans-serif;
  --font-stack-cascadia-code: "Cascadia Code", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-stack-aptos: Aptos, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-stack-georgia: Georgia, "Times New Roman", serif;
  --font-stack-aptos-mono: "Aptos Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  --font-stack-inter-3: Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-stack-inter-4: Inter, "Helvetica Neue", Arial, sans-serif;
  --font-stack-jetbrains-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-stack-ibm-plex-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, Consolas, monospace;
  --font-stack-ibm-plex-mono-2: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;
  --font-stack-ibm-plex-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-stack-ibm-plex-sans-2: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
}


/* 3. Theme-independent tokens (type scale, sizes, layers) */
:root {
  /* type scale (identical in every density, as on the canvas) */
  --fz-2xs: 10px;
  --fz-xs: 11px;
  --fz-sm: 12px;
  --fz-md: 13px;
  --fz-lg: 15px;
  --fz-xl: 18px;
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-body: 1.5;
  --tracking-label: 0.1em;
  --tracking-eyebrow: 0.12em;
  --tracking-nav: 0.14em;

  /* sizes used by components */
  --sidenav-w: 248px;
  --avatar-size: 34px;
  --icon-tile: 40px;
  --step-ico: 28px;
  --tick-size: 22px;
  --dot-size: 6px;
  --live-dot: 8px;
  --focus-width: 2px;
  --focus-offset: 2px;
  --hairline: 1px;
  --drawer-w: 560px;
  /* The run page's right column (owner, canvas Instance): narrower below 1536 px so the tab row never wraps. */
  --run-side-w: 21rem;
  --run-side-w-wide: 26rem;
  --dialog-w: 520px;
  --dialog-max-h: 85vh;
  --sheet-max-w: 92vw;
  --popover-w: 320px;
  --toast-w: 380px;
  --z-dropdown: 50;
  --z-sticky: 40;
  --z-overlay: 60;
  --z-modal: 70;
  --z-toast: 80;
  --z-tooltip: 90;
}

@media (prefers-reduced-motion: reduce) {
  :root,
  [data-theme] {
    --dur-fast: 0ms !important;
    --dur-med: 0ms !important;
    --dur-slow: 0ms !important;
  }
}

/* 4. Themes (tier 2, semantic tokens) */
/* GENERATED from docs/design/aurum-canvas/themes.css, then reviewed. Theme id "classic".
   Classic: the look of the app as built (slate sidebar, white top bar, blue accent, Inter). Default.
   Section 1: canvas tokens (same names and values as the canvas; the parity test checks them).
   Section 2: canvas section 6 "theme-specific touches" as semantic tokens (defined in every theme).
   Section 3: additional semantic tokens (legacy bridge, status outlines, focus, shadows). */
:root,
[data-theme="classic"] {
  /* 1. canvas tokens */
  --bg-canvas: var(--palette-neutral-50);
  --bg-surface: var(--palette-white);
  --bg-surface-2: var(--palette-neutral-25);
  --bg-thead: var(--palette-neutral-50);
  --bg-row-hover: var(--palette-neutral-50-2);
  --bg-chrome: var(--palette-slate-950);
  --bg-chrome-2: var(--palette-slate-950-2);
  --bg-chrome-3: var(--palette-slate-900);
  --scrim: rgba(16, 24, 40, 0.45);
  --fg-1: var(--palette-slate-950-3);
  --fg-2: var(--palette-slate-700);
  --fg-3: var(--palette-slate-600);
  --fg-display: var(--palette-slate-950-3);
  --fg-chrome-1: var(--palette-white);
  --fg-chrome-2: var(--palette-slate-400);
  --fg-on-accent: var(--palette-white);
  --th-fg: var(--palette-slate-700);
  --link: var(--palette-blue-600);
  --link-hover: var(--palette-blue-700);
  --line: var(--palette-slate-200);
  --line-soft: var(--palette-slate-100);
  --line-chrome: var(--palette-slate-900);
  --line-chrome-soft: var(--palette-slate-950-4);
  --chrome-border: 0 solid transparent;
  --accent: var(--palette-blue-600);
  --accent-hover: var(--palette-blue-700);
  --accent-soft: var(--palette-blue-50);
  --accent-soft-fg: var(--palette-blue-700);
  --nav-active-bg: rgba(255, 255, 255, 0.10);
  --nav-active-fg: var(--palette-white);
  --sel-bg: var(--palette-blue-600);
  --sel-fg: var(--palette-white);
  --avatar-bg: var(--palette-blue-100);
  --avatar-fg: var(--palette-blue-700);
  --st-run-bg: var(--palette-blue-50);
  --st-run-fg: var(--palette-blue-700);
  --st-run-dot: var(--palette-blue-600);
  --st-wait-bg: var(--palette-amber-100);
  --st-wait-fg: var(--palette-orange-800);
  --st-wait-dot: var(--palette-orange-800-2);
  --st-ok-bg: var(--palette-green-100);
  --st-ok-fg: var(--palette-green-900);
  --st-ok-dot: var(--palette-green-800);
  --st-fail-bg: var(--palette-red-50);
  --st-fail-fg: var(--palette-red-700);
  --st-fail-dot: var(--palette-red-600);
  --st-idle-bg: var(--palette-slate-100-2);
  --st-idle-fg: var(--palette-slate-800);
  --st-neutral-bg: var(--palette-slate-100-2);
  --st-neutral-fg: var(--palette-slate-950-3);
  --bar-track: var(--palette-slate-100);
  --bar-run: var(--palette-blue-600);
  --bar-ok: var(--palette-green-800);
  --bar-fail: var(--palette-red-600);
  --up: var(--palette-green-900);
  --down: var(--palette-red-700);
  --live: var(--palette-green-500);
  --row-focus-bg: var(--palette-blue-25);
  --row-focus-edge: var(--palette-blue-600);
  --step-current-bg: var(--palette-blue-50);
  --step-current-edge: var(--palette-blue-200);
  --font-body: var(--font-stack-inter);
  --font-display: var(--font-stack-inter-2);
  --font-mono: var(--font-stack-cascadia-code);
  --display-weight: 600;
  --display-tracking: -0.01em;
  --display-case: none;
  --display-scale: 0.75;
  --r-chrome: 10px;
  --r-card: 10px;
  --r-tile: 6px;
  --r-ctl: 6px;
  --r-btn: 6px;
  --r-chip: 999px;
  --r-kbd: 4px;
  --shadow-card: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-modal: 0 16px 40px -8px rgba(16, 24, 40, 0.22);
  --ease: ease;
  --dur-fast: 120ms;
  --dur-med: 160ms;
  --dur-slow: 220ms;
  --enter: wm-fade;

  /* 2. theme-specific touches (canvas section 6) */
  --nav-item-fg: var(--fg-chrome-1);
  --nav-hover-bg: rgba(255, 255, 255, 0.06);
  --seg-active-bg: var(--fg-chrome-1);
  --seg-active-fg: var(--bg-chrome);
  --hdr-bg: #FFFFFF;
  --hdr-bg-2: #F4F6F9;
  --hdr-bg-3: #E6EAF0;
  --hdr-line: #DCE2EA;
  --hdr-line-soft: #E6EAF0;
  --hdr-fg-1: #171B22;
  --hdr-fg-2: #5B6474;
  --hdr-border: 1px solid var(--line);
  --hdr-shadow: var(--shadow-card);
  --hdr-logo-filter: brightness(0) opacity(0.88);
  --hdr-seg-active-bg: #FFFFFF;
  --hdr-seg-active-fg: #171B22;
  --hdr-seg-active-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
  --option-fg: #111111;
  --option-bg: #FFFFFF;
  --label-case: none;
  --label-tracking: normal;
  --btn-case: none;
  --btn-tracking: normal;
  --btn-fz: 13px;
  --pill-fz: 14px;
  --cell-fz-delta: 0px;
  --num-variant: normal;
  --th-tracking: 0.04em;
  --th-edge: 0 solid transparent;
  --td-line: var(--line-soft);
  --row-zebra-bg: transparent;
  --kpi-edge-top: 1px solid var(--line);
  --kpi-label-fg: var(--fg-3);
  --kpi-value-fg: var(--fg-1);
  --kpi-value-weight: var(--display-weight);
  --chip-border-width: 0px;
  --chip-border-run: transparent;
  --chip-border-wait: transparent;
  --chip-border-ok: transparent;
  --chip-border-fail: transparent;
  --chip-border-idle: transparent;
  --chip-border-neutral: transparent;
  --avatar-radius: 999px;
  --node-radius: 999px;
  --bar-radius: 999px;
  --live-radius: 999px;
  --clock-fg: var(--fg-chrome-1);
  --clock-time-fg: var(--fg-chrome-1);
  --field-scheme: light;
  --portal-bar-bg: var(--bg-surface);
  /* Aurum brand (D10): logo mask fills, at least 3:1 on the rail chrome, the top bar and the portal bar. */
  --brand-mark: var(--fg-chrome-1);
  --brand-wordmark: var(--hdr-fg-1);
  --brand-wordmark-portal: var(--fg-1);

  /* 3. additional semantic tokens */
  --line-strong: #CDD3DC;
  --st-run-line: #BCD4FE;
  --st-ok-line: #B6E8CB;
  --st-wait-line: #F8D999;
  --st-fail-line: #F5C2C2;
  --st-info-bg: #EBF7FB;
  --st-info-fg: #11688A;
  --st-info-line: #B5E0EE;
  --st-alt-bg: #F4F0FE;
  --st-alt-fg: #5534B5;
  --st-alt-line: #D6C9FB;
  --focus-glow: rgba(47, 95, 208, 0.35);
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-pop: 0 6px 16px -4px rgba(16, 24, 40, 0.12), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --color-scheme: light;
}


/* GENERATED from docs/design/aurum-canvas/themes.css, then reviewed. Theme id "aurum".
   Aurum (canvas "alchelyst"): cream canvas, warm-black chrome, indigo accent.
   Section 1: canvas tokens (same names and values as the canvas; the parity test checks them).
   Section 2: canvas section 6 "theme-specific touches" as semantic tokens (defined in every theme).
   Section 3: additional semantic tokens (legacy bridge, status outlines, focus, shadows). */
[data-theme="aurum"] {
  /* 1. canvas tokens */
  --bg-canvas: var(--palette-cream);
  --bg-surface: var(--palette-white);
  --bg-surface-2: var(--palette-neutral-50-3);
  --bg-thead: var(--palette-indigo-50);
  --bg-row-hover: var(--palette-neutral-50-4);
  --bg-chrome: var(--palette-warmblack);
  --bg-chrome-2: var(--palette-rose-950);
  --bg-chrome-3: var(--palette-rose-900);
  --scrim: rgba(25, 2, 9, 0.48);
  --fg-1: var(--palette-warmblack);
  --fg-2: var(--palette-stone-900);
  --fg-3: var(--palette-neutral-700);
  --fg-display: var(--palette-warmblack);
  --fg-chrome-1: var(--palette-cream);
  --fg-chrome-2: var(--palette-stone-400);
  --fg-on-accent: var(--palette-white);
  --th-fg: var(--palette-indigo-500);
  --link: var(--palette-indigo-500);
  --link-hover: var(--palette-indigo-600);
  --line: var(--palette-stone-300);
  --line-soft: var(--palette-sand-200);
  --line-chrome: var(--palette-rose-900);
  --line-chrome-soft: var(--palette-rose-950-2);
  --chrome-border: 0 solid transparent;
  --accent: var(--palette-indigo-500);
  --accent-hover: var(--palette-indigo-600);
  --accent-soft: var(--palette-indigo-50);
  --accent-soft-fg: var(--palette-indigo-600);
  --nav-active-bg: var(--palette-indigo-500);
  --nav-active-fg: var(--palette-white);
  --sel-bg: var(--palette-warmblack);
  --sel-fg: var(--palette-cream);
  --avatar-bg: var(--palette-indigo-200);
  --avatar-fg: var(--palette-warmblack);
  --st-run-bg: var(--palette-indigo-200);
  --st-run-fg: var(--palette-warmblack);
  --st-run-dot: var(--palette-indigo-500);
  --st-wait-bg: var(--palette-yellow-400);
  --st-wait-fg: var(--palette-warmblack);
  --st-wait-dot: var(--palette-yellow-900);
  --st-ok-bg: var(--palette-green-400);
  --st-ok-fg: var(--palette-warmblack);
  --st-ok-dot: var(--palette-green-800);
  --st-fail-bg: var(--palette-red-400);
  --st-fail-fg: var(--palette-warmblack);
  --st-fail-dot: var(--palette-red-700-2);
  --st-idle-bg: var(--palette-sand-200);
  --st-idle-fg: var(--palette-stone-900);
  --st-neutral-bg: var(--palette-cream);
  --st-neutral-fg: var(--palette-warmblack);
  --bar-track: var(--palette-sand-200);
  --bar-run: var(--palette-indigo-500);
  --bar-ok: var(--palette-green-800);
  --bar-fail: var(--palette-red-600);
  --up: var(--palette-green-900);
  --down: var(--palette-red-700);
  --live: var(--palette-green-400);
  --row-focus-bg: var(--palette-yellow-50);
  --row-focus-edge: var(--palette-yellow-400);
  --step-current-bg: var(--palette-green-100-2);
  --step-current-edge: var(--palette-green-300);
  --font-body: var(--font-stack-aptos);
  --font-display: var(--font-stack-georgia);
  --font-mono: var(--font-stack-aptos-mono);
  --display-weight: 400;
  --display-tracking: 0;
  --display-case: none;
  --display-scale: 1;
  --r-chrome: 20px;
  --r-card: 24px;
  --r-tile: 16px;
  --r-ctl: 12px;
  --r-btn: 10px;
  --r-chip: 999px;
  --r-kbd: 6px;
  --shadow-card: none;
  --shadow-modal: 0 24px 64px rgba(25, 2, 9, 0.28);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-med: 260ms;
  --dur-slow: 420ms;
  --enter: wm-rise;

  /* 2. theme-specific touches (canvas section 6) */
  --nav-item-fg: var(--fg-chrome-1);
  --nav-hover-bg: var(--bg-chrome-3);
  --seg-active-bg: var(--fg-chrome-1);
  --seg-active-fg: var(--bg-chrome);
  --hdr-bg: var(--bg-chrome);
  --hdr-bg-2: var(--bg-chrome-2);
  --hdr-bg-3: var(--bg-chrome-3);
  --hdr-line: var(--line-chrome);
  --hdr-line-soft: var(--line-chrome-soft);
  --hdr-fg-1: var(--fg-chrome-1);
  --hdr-fg-2: var(--fg-chrome-2);
  --hdr-border: var(--chrome-border);
  --hdr-shadow: none;
  --hdr-logo-filter: none;
  --hdr-seg-active-bg: var(--fg-chrome-1);
  --hdr-seg-active-fg: var(--bg-chrome);
  --hdr-seg-active-shadow: none;
  --option-fg: #111111;
  --option-bg: #FFFFFF;
  --label-case: none;
  --label-tracking: normal;
  --btn-case: none;
  --btn-tracking: normal;
  --btn-fz: 13px;
  --pill-fz: 14px;
  --cell-fz-delta: 0px;
  --num-variant: normal;
  --th-tracking: 0.08em;
  --th-edge: 0 solid transparent;
  --td-line: var(--line-soft);
  --row-zebra-bg: transparent;
  --kpi-edge-top: 1px solid var(--line);
  --kpi-label-fg: var(--fg-3);
  --kpi-value-fg: var(--fg-1);
  --kpi-value-weight: var(--display-weight);
  --chip-border-width: 0px;
  --chip-border-run: transparent;
  --chip-border-wait: transparent;
  --chip-border-ok: transparent;
  --chip-border-fail: transparent;
  --chip-border-idle: transparent;
  --chip-border-neutral: transparent;
  --avatar-radius: 999px;
  --node-radius: 999px;
  --bar-radius: 999px;
  --live-radius: 999px;
  --clock-fg: var(--fg-chrome-1);
  --clock-time-fg: var(--fg-chrome-1);
  --field-scheme: light;
  --portal-bar-bg: var(--bg-canvas);
  /* Aurum brand (D10): logo mask fills, at least 3:1 on the rail chrome, the top bar and the portal bar. */
  --brand-mark: var(--palette-cream);
  --brand-wordmark: var(--palette-cream);
  --brand-wordmark-portal: var(--palette-warmblack);

  /* 3. additional semantic tokens */
  --line-strong: #CDBDB7;
  --st-run-line: #A99FFF;
  --st-ok-line: #8FD9AE;
  --st-wait-line: #D9D94A;
  --st-fail-line: #F07A6D;
  --st-info-bg: #E3F2F7;
  --st-info-fg: #0E5670;
  --st-info-line: #B2DCEA;
  --st-alt-bg: #ECEAFF;
  --st-alt-fg: #3D2EE0;
  --st-alt-line: #CDC7FF;
  --focus-glow: rgba(89, 71, 255, 0.35);
  --shadow-xs: none;
  --shadow-pop: 0 8px 24px -6px rgba(25, 2, 9, 0.18);
  --color-scheme: light;
}


/* GENERATED from docs/design/aurum-canvas/themes.css, then reviewed. Theme id "mono".
   Monochrome: black and white UI; colour is reserved for status.
   Section 1: canvas tokens (same names and values as the canvas; the parity test checks them).
   Section 2: canvas section 6 "theme-specific touches" as semantic tokens (defined in every theme).
   Section 3: additional semantic tokens (legacy bridge, status outlines, focus, shadows). */
[data-theme="mono"] {
  /* 1. canvas tokens */
  --bg-canvas: var(--palette-neutral-50-5);
  --bg-surface: var(--palette-white);
  --bg-surface-2: var(--palette-neutral-25-2);
  --bg-thead: var(--palette-neutral-50-5);
  --bg-row-hover: var(--palette-neutral-25-2);
  --bg-chrome: var(--palette-neutral-950);
  --bg-chrome-2: var(--palette-neutral-950-2);
  --bg-chrome-3: var(--palette-neutral-900);
  --scrim: rgba(0, 0, 0, 0.42);
  --fg-1: var(--palette-neutral-950);
  --fg-2: var(--palette-neutral-900-2);
  --fg-3: var(--palette-neutral-700-2);
  --fg-display: var(--palette-neutral-950);
  --fg-chrome-1: var(--palette-neutral-25-2);
  --fg-chrome-2: var(--palette-neutral-500);
  --fg-on-accent: var(--palette-white);
  --th-fg: var(--palette-neutral-800);
  --link: var(--palette-neutral-950);
  --link-hover: var(--palette-neutral-800);
  --line: var(--palette-neutral-200);
  --line-soft: var(--palette-neutral-100);
  --line-chrome: var(--palette-neutral-900);
  --line-chrome-soft: var(--palette-neutral-950-3);
  --chrome-border: 0 solid transparent;
  --accent: var(--palette-neutral-950);
  --accent-hover: var(--palette-neutral-900-3);
  --accent-soft: var(--palette-neutral-100-2);
  --accent-soft-fg: var(--palette-neutral-950);
  --nav-active-bg: var(--palette-neutral-25-2);
  --nav-active-fg: var(--palette-neutral-950);
  --sel-bg: var(--palette-neutral-950);
  --sel-fg: var(--palette-white);
  --avatar-bg: var(--palette-neutral-25-2);
  --avatar-fg: var(--palette-neutral-950);
  --st-run-bg: var(--palette-blue-100-2);
  --st-run-fg: var(--palette-blue-700-2);
  --st-run-dot: var(--palette-blue-600-2);
  --st-wait-bg: var(--palette-amber-200);
  --st-wait-fg: var(--palette-amber-900);
  --st-wait-dot: var(--palette-amber-700);
  --st-ok-bg: var(--palette-green-100-3);
  --st-ok-fg: var(--palette-green-900-2);
  --st-ok-dot: var(--palette-green-700);
  --st-fail-bg: var(--palette-red-100);
  --st-fail-fg: var(--palette-red-800);
  --st-fail-dot: var(--palette-rose-500);
  --st-idle-bg: var(--palette-neutral-100-3);
  --st-idle-fg: var(--palette-neutral-800);
  --st-neutral-bg: var(--palette-neutral-100-3);
  --st-neutral-fg: var(--palette-neutral-950);
  --bar-track: var(--palette-neutral-100-4);
  --bar-run: var(--palette-neutral-950);
  --bar-ok: var(--palette-green-700);
  --bar-fail: var(--palette-rose-500);
  --up: var(--palette-green-900-2);
  --down: var(--palette-red-800);
  --live: var(--palette-green-700);
  --row-focus-bg: var(--palette-amber-50);
  --row-focus-edge: var(--palette-amber-700);
  --step-current-bg: var(--palette-neutral-50-5);
  --step-current-edge: var(--palette-neutral-950);
  --font-body: var(--font-stack-inter-3);
  --font-display: var(--font-stack-inter-4);
  --font-mono: var(--font-stack-jetbrains-mono);
  --display-weight: 600;
  --display-tracking: -0.025em;
  --display-case: none;
  --display-scale: 0.9;
  --r-chrome: 12px;
  --r-card: 12px;
  --r-tile: 10px;
  --r-ctl: 8px;
  --r-btn: 8px;
  --r-chip: 6px;
  --r-kbd: 4px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.22);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med: 200ms;
  --dur-slow: 300ms;
  --enter: wm-fade;

  /* 2. theme-specific touches (canvas section 6) */
  --nav-item-fg: var(--fg-chrome-1);
  --nav-hover-bg: var(--bg-chrome-3);
  --seg-active-bg: #FAFAFA;
  --seg-active-fg: #0A0A0A;
  --hdr-bg: var(--bg-chrome);
  --hdr-bg-2: var(--bg-chrome-2);
  --hdr-bg-3: var(--bg-chrome-3);
  --hdr-line: var(--line-chrome);
  --hdr-line-soft: var(--line-chrome-soft);
  --hdr-fg-1: var(--fg-chrome-1);
  --hdr-fg-2: var(--fg-chrome-2);
  --hdr-border: var(--chrome-border);
  --hdr-shadow: none;
  --hdr-logo-filter: none;
  --hdr-seg-active-bg: #FAFAFA;
  --hdr-seg-active-fg: #0A0A0A;
  --hdr-seg-active-shadow: none;
  --option-fg: #111111;
  --option-bg: #FFFFFF;
  --label-case: none;
  --label-tracking: normal;
  --btn-case: none;
  --btn-tracking: normal;
  --btn-fz: 13px;
  --pill-fz: 14px;
  --cell-fz-delta: 0px;
  --num-variant: normal;
  --th-tracking: 0.06em;
  --th-edge: 1px solid var(--line);
  --td-line: var(--line-soft);
  --row-zebra-bg: transparent;
  --kpi-edge-top: 1px solid var(--line);
  --kpi-label-fg: var(--fg-3);
  --kpi-value-fg: var(--fg-1);
  --kpi-value-weight: 600;
  --chip-border-width: 1px;
  --chip-border-run: #C9D6FF;
  --chip-border-wait: #F2DC8F;
  --chip-border-ok: #BCE5CB;
  --chip-border-fail: #F7C1BA;
  --chip-border-idle: var(--line);
  --chip-border-neutral: var(--line);
  --avatar-radius: 999px;
  --node-radius: 999px;
  --bar-radius: 999px;
  --live-radius: 999px;
  --clock-fg: var(--fg-chrome-1);
  --clock-time-fg: var(--fg-chrome-1);
  --field-scheme: light;
  --portal-bar-bg: var(--bg-surface);
  /* Aurum brand (D10): logo mask fills, at least 3:1 on the rail chrome, the top bar and the portal bar. */
  --brand-mark: var(--fg-chrome-1);
  --brand-wordmark: var(--hdr-fg-1);
  --brand-wordmark-portal: var(--fg-1);

  /* 3. additional semantic tokens */
  --line-strong: #D4D4D4;
  --st-run-line: #C9D6FF;
  --st-ok-line: #BCE5CB;
  --st-wait-line: #F2DC8F;
  --st-fail-line: #F7C1BA;
  --st-info-bg: #EEF6F9;
  --st-info-fg: #0E5A78;
  --st-info-line: #C2DFEA;
  --st-alt-bg: #F3F0FB;
  --st-alt-fg: #4B2F9E;
  --st-alt-line: #D8CDF5;
  --focus-glow: rgba(10, 10, 10, 0.30);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-pop: 0 6px 16px -4px rgba(0, 0, 0, 0.12);
  --color-scheme: light;
}


/* GENERATED from docs/design/aurum-canvas/themes.css, then reviewed. Theme id "terminal".
   Terminal (canvas "bloomberg"): black terminal, amber accents, monospaced, square, dense.
   Section 1: canvas tokens (same names and values as the canvas; the parity test checks them).
   Section 2: canvas section 6 "theme-specific touches" as semantic tokens (defined in every theme).
   Section 3: additional semantic tokens (legacy bridge, status outlines, focus, shadows). */
[data-theme="terminal"] {
  /* 1. canvas tokens */
  --bg-canvas: var(--palette-black);
  --bg-surface: var(--palette-neutral-950);
  --bg-surface-2: var(--palette-neutral-950-4);
  --bg-thead: var(--palette-neutral-950-5);
  --bg-row-hover: var(--palette-amber-950);
  --bg-chrome: var(--palette-black);
  --bg-chrome-2: var(--palette-neutral-950-6);
  --bg-chrome-3: var(--palette-neutral-950-3);
  --scrim: rgba(0, 0, 0, 0.72);
  --fg-1: var(--palette-neutral-100-3);
  --fg-2: var(--palette-neutral-400);
  --fg-3: var(--palette-neutral-500-2);
  --fg-display: var(--palette-orange-600);
  --fg-chrome-1: var(--palette-orange-600);
  --fg-chrome-2: var(--palette-neutral-500-3);
  --fg-on-accent: var(--palette-black);
  --th-fg: var(--palette-orange-600);
  --link: var(--palette-orange-500);
  --link-hover: var(--palette-orange-400);
  --line: var(--palette-neutral-900-4);
  --line-soft: var(--palette-neutral-950-7);
  --line-chrome: var(--palette-neutral-900-3);
  --line-chrome-soft: var(--palette-neutral-950-8);
  --chrome-border: 1px solid #2B2B2B;
  --accent: var(--palette-orange-600);
  --accent-hover: var(--palette-orange-500);
  --accent-soft: var(--palette-orange-950);
  --accent-soft-fg: var(--palette-orange-500);
  --nav-active-bg: var(--palette-orange-600);
  --nav-active-fg: var(--palette-black);
  --sel-bg: var(--palette-orange-600);
  --sel-fg: var(--palette-black);
  --avatar-bg: var(--palette-orange-600);
  --avatar-fg: var(--palette-black);
  --st-run-bg: var(--palette-blue-950);
  --st-run-fg: var(--palette-blue-400);
  --st-run-dot: var(--palette-blue-400);
  --st-wait-bg: var(--palette-amber-950-2);
  --st-wait-fg: var(--palette-amber-500);
  --st-wait-dot: var(--palette-amber-500);
  --st-ok-bg: var(--palette-green-950);
  --st-ok-fg: var(--palette-green-500-2);
  --st-ok-dot: var(--palette-green-500-2);
  --st-fail-bg: var(--palette-red-950);
  --st-fail-fg: var(--palette-red-400-2);
  --st-fail-dot: var(--palette-red-400-2);
  --st-idle-bg: var(--palette-neutral-950-9);
  --st-idle-fg: var(--palette-neutral-500-3);
  --st-neutral-bg: var(--palette-neutral-950-5);
  --st-neutral-fg: var(--palette-neutral-200-2);
  --bar-track: var(--palette-neutral-950-3);
  --bar-run: var(--palette-orange-600);
  --bar-ok: var(--palette-green-500-2);
  --bar-fail: var(--palette-red-400-2);
  --up: var(--palette-green-500-2);
  --down: var(--palette-red-400-2);
  --live: var(--palette-green-500-2);
  --row-focus-bg: var(--palette-neutral-950-10);
  --row-focus-edge: var(--palette-amber-500);
  --step-current-bg: var(--palette-green-950);
  --step-current-edge: var(--palette-green-900-3);
  --font-body: var(--font-stack-ibm-plex-mono);
  --font-display: var(--font-stack-ibm-plex-mono-2);
  --font-mono: var(--font-stack-ibm-plex-mono);
  --display-weight: 600;
  --display-tracking: 0.02em;
  --display-case: uppercase;
  --display-scale: 0.7;
  --r-chrome: 0px;
  --r-card: 2px;
  --r-tile: 2px;
  --r-ctl: 2px;
  --r-btn: 2px;
  --r-chip: 2px;
  --r-kbd: 2px;
  --shadow-card: none;
  --shadow-modal: 0 0 0 1px #FF9F1A, 0 24px 64px rgba(0, 0, 0, 0.8);
  --ease: linear;
  --dur-fast: 60ms;
  --dur-med: 100ms;
  --dur-slow: 160ms;
  --enter: wm-scan;

  /* 2. theme-specific touches (canvas section 6) */
  --nav-item-fg: #E6E6E6;
  --nav-hover-bg: var(--bg-chrome-3);
  --seg-active-bg: var(--accent);
  --seg-active-fg: #000000;
  --hdr-bg: var(--bg-chrome);
  --hdr-bg-2: var(--bg-chrome-2);
  --hdr-bg-3: var(--bg-chrome-3);
  --hdr-line: var(--line-chrome);
  --hdr-line-soft: var(--line-chrome-soft);
  --hdr-fg-1: var(--fg-chrome-1);
  --hdr-fg-2: var(--fg-chrome-2);
  --hdr-border: var(--chrome-border);
  --hdr-shadow: none;
  --hdr-logo-filter: none;
  --hdr-seg-active-bg: var(--accent);
  --hdr-seg-active-fg: #000000;
  --hdr-seg-active-shadow: none;
  --option-fg: #111111;
  --option-bg: #FFFFFF;
  --label-case: uppercase;
  --label-tracking: 0.04em;
  --btn-case: uppercase;
  --btn-tracking: 0.04em;
  --btn-fz: 12px;
  --pill-fz: 12px;
  --cell-fz-delta: -1px;
  --num-variant: normal;
  --th-tracking: 0.08em;
  --th-edge: 1px solid #FF9F1A;
  --td-line: #161616;
  --row-zebra-bg: #070707;
  --kpi-edge-top: 2px solid var(--accent);
  --kpi-label-fg: var(--accent);
  --kpi-value-fg: #FFFFFF;
  --kpi-value-weight: var(--display-weight);
  --chip-border-width: 0px;
  --chip-border-run: transparent;
  --chip-border-wait: transparent;
  --chip-border-ok: transparent;
  --chip-border-fail: transparent;
  --chip-border-idle: transparent;
  --chip-border-neutral: transparent;
  --avatar-radius: 2px;
  --node-radius: 0px;
  --bar-radius: 0px;
  --live-radius: 0px;
  --clock-fg: #E6E6E6;
  --clock-time-fg: var(--accent);
  --field-scheme: dark;
  --portal-bar-bg: var(--bg-surface);
  /* Aurum brand (D10): logo mask fills, at least 3:1 on the rail chrome, the top bar and the portal bar. */
  --brand-mark: var(--accent);
  --brand-wordmark: var(--hdr-fg-1);
  --brand-wordmark-portal: var(--accent);

  /* 3. additional semantic tokens */
  --line-strong: #3D3D3D;
  --st-run-line: #1E4F80;
  --st-ok-line: #1E6B3C;
  --st-wait-line: #6B5A00;
  --st-fail-line: #7A1F1F;
  --st-info-bg: #062A33;
  --st-info-fg: #5ED0F0;
  --st-info-line: #13505F;
  --st-alt-bg: #1C1233;
  --st-alt-fg: #B79CFF;
  --st-alt-line: #3E2C70;
  --focus-glow: rgba(255, 159, 26, 0.45);
  --shadow-xs: none;
  --shadow-pop: 0 0 0 1px #2B2B2B, 0 8px 24px rgba(0, 0, 0, 0.6);
  --color-scheme: dark;
}


/* GENERATED from docs/design/aurum-canvas/themes.css, then reviewed. Theme id "meridian".
   Meridian: institutional fund-administration style, deep navy navigation, teal accent, tabular figures.
   Section 1: canvas tokens (same names and values as the canvas; the parity test checks them).
   Section 2: canvas section 6 "theme-specific touches" as semantic tokens (defined in every theme).
   Section 3: additional semantic tokens (legacy bridge, status outlines, focus, shadows). */
[data-theme="meridian"] {
  /* 1. canvas tokens */
  --bg-canvas: var(--palette-slate-50);
  --bg-surface: var(--palette-white);
  --bg-surface-2: var(--palette-neutral-25-3);
  --bg-thead: var(--palette-blue-100-3);
  --bg-row-hover: var(--palette-cyan-100);
  --bg-chrome: var(--palette-blue-950-2);
  --bg-chrome-2: var(--palette-blue-900);
  --bg-chrome-3: var(--palette-blue-900-2);
  --scrim: rgba(12, 31, 63, 0.5);
  --fg-1: var(--palette-blue-950-3);
  --fg-2: var(--palette-slate-800-2);
  --fg-3: var(--palette-slate-700-2);
  --fg-display: var(--palette-blue-950-2);
  --fg-chrome-1: var(--palette-neutral-50-6);
  --fg-chrome-2: var(--palette-slate-400-2);
  --fg-on-accent: var(--palette-white);
  --th-fg: var(--palette-slate-800-2);
  --link: var(--palette-cyan-900);
  --link-hover: var(--palette-cyan-900-2);
  --line: var(--palette-slate-200-2);
  --line-soft: var(--palette-blue-100-4);
  --line-chrome: var(--palette-blue-900-2);
  --line-chrome-soft: var(--palette-blue-900-3);
  --chrome-border: 0 solid transparent;
  --accent: var(--palette-cyan-800);
  --accent-hover: var(--palette-cyan-900-3);
  --accent-soft: var(--palette-cyan-100-2);
  --accent-soft-fg: var(--palette-cyan-900-4);
  --nav-active-bg: var(--palette-cyan-800);
  --nav-active-fg: var(--palette-white);
  --sel-bg: var(--palette-blue-950-2);
  --sel-fg: var(--palette-white);
  --avatar-bg: var(--palette-cyan-100-2);
  --avatar-fg: var(--palette-cyan-900-4);
  --st-run-bg: var(--palette-blue-100-5);
  --st-run-fg: var(--palette-blue-800);
  --st-run-dot: var(--palette-blue-700-3);
  --st-wait-bg: var(--palette-amber-100-2);
  --st-wait-fg: var(--palette-amber-900-2);
  --st-wait-dot: var(--palette-amber-700-2);
  --st-ok-bg: var(--palette-green-200);
  --st-ok-fg: var(--palette-green-900-4);
  --st-ok-dot: var(--palette-green-800-2);
  --st-fail-bg: var(--palette-red-100-2);
  --st-fail-fg: var(--palette-red-700-3);
  --st-fail-dot: var(--palette-red-600-2);
  --st-idle-bg: var(--palette-blue-100-3);
  --st-idle-fg: var(--palette-slate-800-2);
  --st-neutral-bg: var(--palette-blue-100-3);
  --st-neutral-fg: var(--palette-blue-950-3);
  --bar-track: var(--palette-blue-100-4);
  --bar-run: var(--palette-cyan-800);
  --bar-ok: var(--palette-green-800-2);
  --bar-fail: var(--palette-red-600-2);
  --up: var(--palette-green-900-4);
  --down: var(--palette-red-700-3);
  --live: var(--palette-green-500-3);
  --row-focus-bg: var(--palette-cyan-50);
  --row-focus-edge: var(--palette-cyan-800);
  --step-current-bg: var(--palette-cyan-100-2);
  --step-current-edge: var(--palette-cyan-400);
  --font-body: var(--font-stack-ibm-plex-sans);
  --font-display: var(--font-stack-ibm-plex-sans-2);
  --font-mono: var(--font-stack-ibm-plex-mono);
  --display-weight: 600;
  --display-tracking: -0.01em;
  --display-case: none;
  --display-scale: 0.75;
  --r-chrome: 8px;
  --r-card: 8px;
  --r-tile: 6px;
  --r-ctl: 6px;
  --r-btn: 6px;
  --r-chip: 4px;
  --r-kbd: 4px;
  --shadow-card: 0 1px 2px rgba(12, 31, 63, 0.06);
  --shadow-modal: 0 20px 48px rgba(12, 31, 63, 0.25);
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 100ms;
  --dur-med: 160ms;
  --dur-slow: 240ms;
  --enter: wm-fade;

  /* 2. theme-specific touches (canvas section 6) */
  --nav-item-fg: var(--fg-chrome-1);
  --nav-hover-bg: var(--bg-chrome-3);
  --seg-active-bg: var(--fg-chrome-1);
  --seg-active-fg: var(--bg-chrome);
  --hdr-bg: #FFFFFF;
  --hdr-bg-2: #F4F6F9;
  --hdr-bg-3: #E6EAF0;
  --hdr-line: #DCE2EA;
  --hdr-line-soft: #E6EAF0;
  --hdr-fg-1: #0C1F3F;
  --hdr-fg-2: #5A687D;
  --hdr-border: 1px solid var(--line);
  --hdr-shadow: var(--shadow-card);
  --hdr-logo-filter: brightness(0) opacity(0.88);
  --hdr-seg-active-bg: #0C1F3F;
  --hdr-seg-active-fg: #FFFFFF;
  --hdr-seg-active-shadow: none;
  --option-fg: #111111;
  --option-bg: #FFFFFF;
  --label-case: none;
  --label-tracking: normal;
  --btn-case: none;
  --btn-tracking: normal;
  --btn-fz: 13px;
  --pill-fz: 14px;
  --cell-fz-delta: 0px;
  --num-variant: tabular-nums;
  --th-tracking: 0.05em;
  --th-edge: 1px solid var(--line);
  --td-line: var(--line-soft);
  --row-zebra-bg: #F8FAFC;
  --kpi-edge-top: 3px solid var(--accent);
  --kpi-label-fg: var(--fg-3);
  --kpi-value-fg: var(--fg-1);
  --kpi-value-weight: 600;
  --chip-border-width: 1px;
  --chip-border-run: #C4D8EF;
  --chip-border-wait: #F0D58C;
  --chip-border-ok: #B7DEC8;
  --chip-border-fail: #F1C0BC;
  --chip-border-idle: transparent;
  --chip-border-neutral: transparent;
  --avatar-radius: 999px;
  --node-radius: 999px;
  --bar-radius: 999px;
  --live-radius: 999px;
  --clock-fg: var(--fg-chrome-1);
  --clock-time-fg: var(--fg-chrome-1);
  --field-scheme: light;
  --portal-bar-bg: var(--bg-surface);
  /* Aurum brand (D10): logo mask fills, at least 3:1 on the rail chrome, the top bar and the portal bar. */
  --brand-mark: var(--fg-chrome-1);
  --brand-wordmark: var(--hdr-fg-1);
  --brand-wordmark-portal: var(--fg-1);

  /* 3. additional semantic tokens */
  --line-strong: #C3CDDA;
  --st-run-line: #C4D8EF;
  --st-ok-line: #B7DEC8;
  --st-wait-line: #F0D58C;
  --st-fail-line: #F1C0BC;
  --st-info-bg: #E4F2F7;
  --st-info-fg: #0B5C78;
  --st-info-line: #B9DCE8;
  --st-alt-bg: #F1EEFB;
  --st-alt-fg: #4A2F9C;
  --st-alt-line: #D3C8F2;
  --focus-glow: rgba(14, 124, 134, 0.35);
  --shadow-xs: 0 1px 2px rgba(12, 31, 63, 0.05);
  --shadow-pop: 0 6px 16px -4px rgba(12, 31, 63, 0.14);
  --color-scheme: light;
}


/* 5. Densities */
/* GENERATED from docs/design/aurum-canvas/themes.css section 2 (densities).
   Type sizes are identical in every density. Compact only tightens spacing and hides secondary text
   (utilities: compact:hidden, detailed:..., and the <Density> composite). Detailed adds information. */
:root,
[data-density="normal"] {
  --fz-base: 14px;
  --gap-shell: 12px;
  --gap-page: 24px;
  --gap-block: 14px;
  --hdr-h: 64px;
  --ctl-h: 38px;
  --rail-w: 64px;
  --rail-btn: 44px;
  --cell-py: 14px;
  --cell-px: 16px;
  --fz-cell: 14px;
  --kpi-pad: 18px 20px;
  --kpi-fz: 36px;
  --h1-fz: 40px;
  --h2-fz: 22px;
  --card-pad: 20px 22px;
  --btn-h: 34px;
  --chip-py: 3px;
  --chip-px: 10px;
  --fz-chip: 12px;
  --bar-h: 6px;
}

[data-density="compact"] {
  --gap-page: 16px;
  --gap-block: 10px;
  --cell-py: 7px;
  --btn-h: 28px;
  --chip-py: 1px;
}

/* Detailed: same values as Normal; it adds information instead. */
[data-density="detailed"] {
  --fz-base: 14px;
  --gap-shell: 12px;
  --gap-page: 24px;
  --gap-block: 14px;
  --hdr-h: 64px;
  --ctl-h: 38px;
  --rail-w: 64px;
  --rail-btn: 44px;
  --cell-py: 14px;
  --cell-px: 16px;
  --fz-cell: 14px;
  --kpi-pad: 18px 20px;
  --kpi-fz: 36px;
  --h1-fz: 40px;
  --h2-fz: 22px;
  --card-pad: 20px 22px;
  --btn-h: 34px;
  --chip-py: 3px;
  --chip-px: 10px;
  --fz-chip: 12px;
  --bar-h: 6px;
}


/* 6. Brand: the Aurum logo as masks filled by theme tokens (shown in every theme) */
/* The Aurum brand in every theme (owner decision D10, 2026-10-26). The logo PNGs are cropped to their alpha bounding box
   (public/brand/*-mask.png, white + alpha) and used as CSS masks, so the logo takes the colour of the theme's brand tokens
   (--brand-mark on the rail chrome, --brand-wordmark on the top bar, --brand-wordmark-portal on the portal bar). Each theme
   sets them for at least 3:1 contrast on its own chrome (brandContrast.test.ts). */
.brand-mark {
  display: inline-block;
  aspect-ratio: 115 / 128;
  background-color: var(--brand-mark);
  -webkit-mask: url('./brand/a-symbol-mask.png') center / contain no-repeat;
  mask: url('./brand/a-symbol-mask.png') center / contain no-repeat;
}

.brand-wordmark {
  display: inline-block;
  aspect-ratio: 395 / 96;
  background-color: var(--brand-fill, var(--brand-wordmark));
  -webkit-mask: url('./brand/alchelyst-wordmark-mask.png') center / contain no-repeat;
  mask: url('./brand/alchelyst-wordmark-mask.png') center / contain no-repeat;
}

/* The wordmark on another surface: the chrome (pinned sidebar) or the client portal's top bar. */
.brand-fill-chrome {
  --brand-fill: var(--brand-mark);
}

.brand-fill-portal {
  --brand-fill: var(--brand-wordmark-portal);
}

/* Print: masks are not printed by default; force the colour so the logo stays. */
@media print {
  .brand-mark,
  .brand-wordmark {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}


/* 7. Helper classes (focus ring, display type, eyebrow, numbers ...) */
/* Token utilities that Tailwind has no built-in for. They carry the canvas section-6 "theme-specific
   touches" through tokens, so no component needs a [data-theme] selector or an arbitrary value. */

/* Visible keyboard focus (WCAG 2.2 focus visible): accent outline, offset from the control. */
.focus-ring {
  &:focus-visible {
    outline: var(--focus-width) solid var(--accent);
    outline-offset: var(--focus-offset);
  }
}

/* Same, for elements that receive focus inside a composite (rows, tabs) where the outline sits inside. */
.focus-ring-inset {
  &:focus-visible {
    outline: var(--focus-width) solid var(--accent);
    outline-offset: calc(var(--focus-width) * -1);
  }
}

/* Button and label typography: Terminal upper-cases and tracks them. */
.btn-case {
  text-transform: var(--btn-case);
  letter-spacing: var(--btn-tracking);
}

.label-case {
  text-transform: var(--label-case);
  letter-spacing: var(--label-tracking);
}

/* Display type (page titles, section titles, KPI values). */
.display-type {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  text-transform: var(--display-case);
}

/* Mono eyebrow / label text from the canvas (.eyebrow, .label, .nav-sec). */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fz-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Table text: Terminal sets cells one pixel smaller. */
.text-cell-adjusted {
  font-size: calc(var(--fz-cell) + var(--cell-fz-delta));
}

/* Figures: Meridian uses tabular numbers. */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: var(--num-variant);
}

.tabular {
  font-variant-numeric: var(--num-variant);
}

/* Table header cell edge and tracking (Mono, Terminal, Meridian draw a line under the header). */
.th-cell {
  font-size: var(--fz-xs);
  font-weight: 700;
  letter-spacing: var(--th-tracking);
  text-transform: uppercase;
  color: var(--th-fg);
  border-bottom: var(--th-edge);
}

/* Zebra rows (Terminal and Meridian); transparent elsewhere. */
.zebra {
  &:nth-child(even) > * {
    background-color: var(--row-zebra-bg);
  }
}

/* KPI tile top edge (Terminal 2px, Meridian 3px accent). */
.kpi-edge {
  border-top: var(--kpi-edge-top);
}

/* KPI value weight (Mono and Meridian use 600). Combine after display-type. */
.kpi-weight {
  font-weight: var(--kpi-value-weight);
}

/* Status chip outline per state (Mono and Meridian). */
.chip-outline {
  border-width: var(--chip-border-width);
  border-style: solid;
}

/* The top bar surface: chrome in Aurum, Mono and Terminal; a white bar in Classic and Meridian. */
.hdr-surface {
  background-color: var(--hdr-bg);
  color: var(--hdr-fg-1);
  border: var(--hdr-border);
  box-shadow: var(--hdr-shadow);
}

.hdr-logo {
  filter: var(--hdr-logo-filter);
}

/* Chrome surfaces (rail, sidebar, status bar). */
.chrome-surface {
  background-color: var(--bg-chrome);
  color: var(--fg-chrome-1);
  border: var(--chrome-border);
}

/* Native form controls follow the theme's light/dark scheme (date pickers, scrollbars). */
.field-scheme {
  color-scheme: var(--field-scheme);
}

/* Shimmer for skeletons. */
.skeleton-shimmer {
  background-image: linear-gradient(90deg, var(--line-soft) 0%, var(--bg-surface-2) 50%, var(--line-soft) 100%);
  background-size: 200% 100%;
}

/* The active row marker in lists (canvas .res.is-active, .step.is-focus). */
.active-edge {
  box-shadow: inset 3px 0 0 var(--accent);
}

.focus-edge {
  box-shadow: inset 3px 0 0 var(--row-focus-edge);
}

/* A control that looks like the text around it (sortable header buttons). */
.inherit-type {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

/* A split view that fills the working height of the page (viewport minus the shell's top bar, status bar and a page
   header with tabs), so its panes scroll independently (SplitPane scrollPanes). */
.h-split-fill {
  height: calc(100dvh - var(--hdr-h) - 4 * var(--gap-shell) - 20rem);
  min-height: 26rem;
}


/* 8. Motion */
@keyframes wm-rise    { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes wm-fade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes wm-scan    { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes wm-pop     { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes wm-grow    { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wm-pulse   { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } }
@keyframes wm-blink   { 50% { opacity: 0; } }
@keyframes wm-spin    { to { transform: rotate(360deg); } }
@keyframes wm-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }