@attrus-ds/core 0.2.0 → 1.0.0

package/dist/css/tokens.css

@@ -1,695 +1,742 @@
 /* @attrus/cabiros — design tokens + type classes (concatenated).
    Generated by scripts/build.mjs from src/tokens/ and src/typography/. */
 
-/* ============================================================
-   ATTRUS / Cabiros — BASE PALETTE (raw color tokens)
-   The primitive layer. Theme-agnostic. Referenced only by the
-   semantic layer (color-semantic.css) and effect layers — never
-   consumed directly by components.
-   ============================================================ */
-
-:root {
-  /* --- Brand (from manual: Lato + 4 HEX stops) --- */
-  --brand-attrus-ink:        #0F0F1A;   /* almost-black, blue-tinted */
-  --brand-attrus-navy:       #002142;   /* deep navy */
-  --brand-attrus-blue:       #003399;   /* PRIMARY brand blue */
-  --brand-attrus-sky:        #3399FF;   /* bright accent / highlight */
-  --brand-attrus-logo-ink:   #000033;   /* per logo SVG fills */
-
-  /* --- Neutrals (cool, with a subtle bluish tint — never pure) --- */
-  /* Pure achromatic primitives — referenced by transparency tokens */
-  --color-pure-white:  #FFFFFF;
-  --color-pure-black:  #000000;
-  --color-shadow-tint:         var(--color-neutral-900);   /* default — blue-tinted ink, aligned to neutral scale */
-  --shadow-tint-success-color: var(--color-success-900);  /* green-tinted ink */
-  --shadow-tint-warning-color: var(--color-warning-900);  /* amber-tinted ink */
-  --shadow-tint-danger-color:  var(--color-danger-900);   /* wine-tinted ink */
-  --shadow-tint-info-color:    var(--color-info-900);     /* steel-blue-tinted ink */
-
-  --color-neutral-0:   var(--color-pure-white);
-  --color-neutral-25:  #FAFBFD;  /* app canvas bg */
-  --color-neutral-50:  #F4F6FA;  /* rows, subdued surfaces */
-  --color-neutral-100: #EDF0F5;  /* hover, very soft chips */
-  --color-neutral-150: #E3E8F0;  /* dividers, borders */
-  --color-neutral-200: #D6DCE7;  /* stronger borders */
-  --color-neutral-300: #B8C1D1;  /* placeholder */
-  --color-neutral-400: #8A94A8;  /* muted text */
-  --color-neutral-500: #5E6A82;  /* secondary text */
-  --color-neutral-600: #3F4A61;  /* strong secondary */
-  --color-neutral-700: #27304A;  /* headings on light */
-  --color-neutral-800: #141B2E;  /* near-surface dark */
-  --color-neutral-900: #0A0F1F;  /* inverse surface (never pure black) */
-  --color-neutral-950: #05081A;  /* deepest inverse */
-
-  /* --- Inverse "ink" tones (variants of neutral-900/-950, used by inverse layer) --- */
-  --color-ink-base:    #0B1230;   /* near-black navy */
-  --color-ink-raised:  #111A3D;   /* card on inverse */
-  --color-ink-deep:    #0A1128;   /* deeper than base — wells, alt rows */
-  --color-ink-hover:   #15214A;   /* hover state on inverse */
-
-  /* --- Brand primary · Navy (institutional — logo, headings, primary surfaces)
-     10-stop scale anchored at -500: #002142 (ATTRUS Navy from brand book).
-     Interpolated in OKLCH from anchor for uniform perceptual distance.
-     Dominant brand colour — 40% of usage per brand book. */
-  --color-brand-primary-50:  #E5EBF2;
-  --color-brand-primary-100: #C2CDDB;
-  --color-brand-primary-200: #8E9FB8;
-  --color-brand-primary-300: #5F7596;
-  --color-brand-primary-400: #2F4F75;
-  --color-brand-primary-500: #002142;  /* ★ ATTRUS Navy — brand primary */
-  --color-brand-primary-600: #001D3A;
-  --color-brand-primary-700: #001830;
-  --color-brand-primary-800: #001226;
-  --color-brand-primary-900: #000C1A;
-
-  /* --- Brand secondary · Royal (support — highlights, secondary blocks)
-     10-stop scale anchored at -500: #003399 (ATTRUS Royal from brand book).
-     Used for accent surfaces with more presence than Sky but less than Navy.
-     10% of brand usage. */
-  --color-brand-secondary-50:  #EAF1FF;
-  --color-brand-secondary-100: #D1DEFF;
-  --color-brand-secondary-200: #A3BEFF;
-  --color-brand-secondary-300: #6B95FB;
-  --color-brand-secondary-400: #3F6DEF;
-  --color-brand-secondary-500: #003399;  /* brand */
-  --color-brand-secondary-600: #002A80;
-  --color-brand-secondary-700: #002166;
-  --color-brand-secondary-800: #001A4D;
-  --color-brand-secondary-900: #001133;
-
-  /* --- Brand accent · Sky (action — CTAs, links, highlights)
-     10-stop scale anchored at -500: #3399FF (ATTRUS Sky from brand book).
-     Used for primary actions and call-outs only — 3% of brand usage.
-     Stops 50/200/400/600/800/900 interpolated in OKLCH for uniform perceptual distance.
-     Dark stops (700-900) used as inverse surfaces in dark mode;
-     light stops (50-200) for foreground text on those surfaces. */
-  --color-brand-accent-50:  #ECF5FF;
-  --color-brand-accent-100: #D9ECFF;
-  --color-brand-accent-200: #ADD2FF;
-  --color-brand-accent-300: #7AB8FF;
-  --color-brand-accent-400: #549EFF;
-  --color-brand-accent-500: #3399FF;  /* accent */
-  --color-brand-accent-600: #2880DD;
-  --color-brand-accent-700: #1E6DC4;
-  --color-brand-accent-800: #155198;
-  --color-brand-accent-900: #0E3B70;
-
-  /* --- Semantic feedback (subdued, sober) — perceptually calibrated 10-stop scales (OKLCH) ---
-     Anchors at 50/100/500/700/900 are immutable (preserved from the original 5-stop palette).
-     Stops 200/300/400/600/800 are interpolated in OKLCH for uniform perceptual distance.
-     info-900 is derived from the average L/C trajectory of the other three families' 700→900. */
-  --color-success-50:  #E8F5EE;
-  --color-success-100: #CDEBD9;
-  --color-success-200: #9CCEAF;
-  --color-success-300: #74B68C;
-  --color-success-400: #499D69;
-  --color-success-500: #1F8A4C;
-  --color-success-600: #1A7A43;
-  --color-success-700: #136236;
-  --color-success-800: #0E4F2B;
-  --color-success-900: #0A3D21;
-
-  --color-warning-50:  #FDF5E3;
-  --color-warning-100: #FAE8BE;
-  --color-warning-200: #E4C790;
-  --color-warning-300: #D2AC69;
-  --color-warning-400: #C19040;
-  --color-warning-500: #B47A12;
-  --color-warning-600: #A16B0F;
-  --color-warning-700: #84560A;
-  --color-warning-800: #694307;
-  --color-warning-900: #4F3105;
-
-  --color-danger-50:  #FCEBEA;
-  --color-danger-100: #F7CFCD;
-  --color-danger-200: #EBA4A0;
-  --color-danger-300: #DE807A;
-  --color-danger-400: #CF5B54;
-  --color-danger-500: #C23934;
-  --color-danger-600: #AB312D;
-  --color-danger-700: #8A2622;
-  --color-danger-800: #6C1D1A;
-  --color-danger-900: #4F1512;
-
-  --color-info-50:  #E6F0FB;
-  --color-info-100: #C5DCF4;
-  --color-info-200: #93BBE8;
-  --color-info-300: #6B9FDD;
-  --color-info-400: #4383D1;
-  --color-info-500: #1F6BC7;
-  --color-info-600: #1A5EAF;
-  --color-info-700: #144B8C;
-  --color-info-800: #0D3A6E;
-  --color-info-900: #072951;
+/* ============================================================
+   ATTRUS / Cabiros — BASE PALETTE (raw color tokens)
+   The primitive layer. Theme-agnostic. Referenced only by the
+   semantic layer (color-semantic.css) and effect layers — never
+   consumed directly by components.
+   ============================================================ */
+
+:root {
+  /* --- Brand (from manual: Lato + 4 HEX stops) --- */
+  --brand-attrus-ink:        #0F0F1A;   /* almost-black, blue-tinted */
+  --brand-attrus-navy:       #002142;   /* deep navy */
+  --brand-attrus-blue:       #003399;   /* PRIMARY brand blue */
+  --brand-attrus-sky:        #3399FF;   /* bright accent / highlight */
+  --brand-attrus-logo-ink:   #000033;   /* per logo SVG fills */
+
+  /* --- Neutrals (cool, with a subtle bluish tint — never pure) --- */
+  /* Pure achromatic primitives — referenced by transparency tokens */
+  --color-pure-white:  #FFFFFF;
+  --color-pure-black:  #000000;
+  --color-shadow-tint:         var(--color-neutral-900);   /* default — blue-tinted ink, aligned to neutral scale */
+  --shadow-tint-success-color: var(--color-success-900);  /* green-tinted ink */
+  --shadow-tint-warning-color: var(--color-warning-900);  /* amber-tinted ink */
+  --shadow-tint-danger-color:  var(--color-danger-900);   /* wine-tinted ink */
+  --shadow-tint-info-color:    var(--color-info-900);     /* steel-blue-tinted ink */
+
+  --color-neutral-0:   var(--color-pure-white);
+  --color-neutral-25:  #FAFBFD;  /* app canvas bg */
+  --color-neutral-50:  #F4F6FA;  /* rows, subdued surfaces */
+  --color-neutral-100: #EDF0F5;  /* hover, very soft chips */
+  --color-neutral-150: #E3E8F0;  /* dividers, borders */
+  --color-neutral-200: #D6DCE7;  /* stronger borders */
+  --color-neutral-300: #B8C1D1;  /* placeholder */
+  --color-neutral-400: #8A94A8;  /* muted text */
+  --color-neutral-500: #5E6A82;  /* secondary text */
+  --color-neutral-600: #3F4A61;  /* strong secondary */
+  --color-neutral-700: #27304A;  /* headings on light */
+  --color-neutral-800: #141B2E;  /* near-surface dark */
+  --color-neutral-900: #0A0F1F;  /* inverse surface (never pure black) */
+  --color-neutral-950: #05081A;  /* deepest inverse */
+
+  /* --- Inverse "ink" tones (variants of neutral-900/-950, used by inverse layer) --- */
+  --color-ink-base:    #0B1230;   /* near-black navy */
+  --color-ink-raised:  #111A3D;   /* card on inverse */
+  --color-ink-deep:    #0A1128;   /* deeper than base — wells, alt rows */
+  --color-ink-hover:   #15214A;   /* hover state on inverse */
+
+  /* --- Brand primary · Navy (institutional — logo, headings, primary surfaces)
+     10-stop scale anchored at -500: #002142 (ATTRUS Navy from brand book).
+     Interpolated in OKLCH from anchor for uniform perceptual distance.
+     Dominant brand colour — 40% of usage per brand book. */
+  --color-brand-primary-50:  #E5EBF2;
+  --color-brand-primary-100: #C2CDDB;
+  --color-brand-primary-200: #8E9FB8;
+  --color-brand-primary-300: #5F7596;
+  --color-brand-primary-400: #2F4F75;
+  --color-brand-primary-500: #002142;  /* ★ ATTRUS Navy — brand primary */
+  --color-brand-primary-600: #001D3A;
+  --color-brand-primary-700: #001830;
+  --color-brand-primary-800: #001226;
+  --color-brand-primary-900: #000C1A;
+
+  /* --- Brand secondary · Royal (support — highlights, secondary blocks)
+     10-stop scale anchored at -500: #003399 (ATTRUS Royal from brand book).
+     Used for accent surfaces with more presence than Sky but less than Navy.
+     10% of brand usage. */
+  --color-brand-secondary-50:  #EAF1FF;
+  --color-brand-secondary-100: #D1DEFF;
+  --color-brand-secondary-200: #A3BEFF;
+  --color-brand-secondary-300: #6B95FB;
+  --color-brand-secondary-400: #3F6DEF;
+  --color-brand-secondary-500: #003399;  /* brand */
+  --color-brand-secondary-600: #002A80;
+  --color-brand-secondary-700: #002166;
+  --color-brand-secondary-800: #001A4D;
+  --color-brand-secondary-900: #001133;
+
+  /* --- Brand accent · Sky (action — CTAs, links, highlights)
+     10-stop scale anchored at -500: #3399FF (ATTRUS Sky from brand book).
+     Used for primary actions and call-outs only — 3% of brand usage.
+     Stops 50/200/400/600/800/900 interpolated in OKLCH for uniform perceptual distance.
+     Dark stops (700-900) used as inverse surfaces in dark mode;
+     light stops (50-200) for foreground text on those surfaces. */
+  --color-brand-accent-50:  #ECF5FF;
+  --color-brand-accent-100: #D9ECFF;
+  --color-brand-accent-200: #ADD2FF;
+  --color-brand-accent-300: #7AB8FF;
+  --color-brand-accent-400: #549EFF;
+  --color-brand-accent-500: #3399FF;  /* accent */
+  --color-brand-accent-600: #2880DD;
+  --color-brand-accent-700: #1E6DC4;
+  --color-brand-accent-800: #155198;
+  --color-brand-accent-900: #0E3B70;
+
+  /* --- Semantic feedback (subdued, sober) — perceptually calibrated 10-stop scales (OKLCH) ---
+     Anchors at 50/100/500/700/900 are immutable (preserved from the original 5-stop palette).
+     Stops 200/300/400/600/800 are interpolated in OKLCH for uniform perceptual distance.
+     info-900 is derived from the average L/C trajectory of the other three families' 700→900. */
+  --color-success-50:  #E8F5EE;
+  --color-success-100: #CDEBD9;
+  --color-success-200: #9CCEAF;
+  --color-success-300: #74B68C;
+  --color-success-400: #499D69;
+  --color-success-500: #1F8A4C;
+  --color-success-600: #1A7A43;
+  --color-success-700: #136236;
+  --color-success-800: #0E4F2B;
+  --color-success-900: #0A3D21;
+
+  --color-warning-50:  #FDF5E3;
+  --color-warning-100: #FAE8BE;
+  --color-warning-200: #E4C790;
+  --color-warning-300: #D2AC69;
+  --color-warning-400: #C19040;
+  --color-warning-500: #B47A12;
+  --color-warning-600: #A16B0F;
+  --color-warning-700: #84560A;
+  --color-warning-800: #694307;
+  --color-warning-900: #4F3105;
+
+  --color-danger-50:  #FCEBEA;
+  --color-danger-100: #F7CFCD;
+  --color-danger-200: #EBA4A0;
+  --color-danger-300: #DE807A;
+  --color-danger-400: #CF5B54;
+  --color-danger-500: #C23934;
+  --color-danger-600: #AB312D;
+  --color-danger-700: #8A2622;
+  --color-danger-800: #6C1D1A;
+  --color-danger-900: #4F1512;
+
+  --color-info-50:  #E6F0FB;
+  --color-info-100: #C5DCF4;
+  --color-info-200: #93BBE8;
+  --color-info-300: #6B9FDD;
+  --color-info-400: #4383D1;
+  --color-info-500: #1F6BC7;
+  --color-info-600: #1A5EAF;
+  --color-info-700: #144B8C;
+  --color-info-800: #0D3A6E;
+  --color-info-900: #072951;
 }
 
-/* ============================================================
-   ATTRUS / Cabiros — SEMANTIC COLOR TOKENS
-   Reference the base palette (palette.css). This is the layer
-   components consume.
-   Roles: default | secondary | muted | accent | placeholder
-   Contexts: fg (text/icon), bg (surface), br (border)
-   ============================================================ */
-
-:root {
-  /* Default (light) theme — the 60% whites/light grays */
-  --color-background-canvas:      var(--color-neutral-25);          /* app background */
-  --color-background-surface:     var(--color-neutral-0);           /* card / container */
-  --color-background-subtle:      var(--color-neutral-50);          /* row / nested */
-  --color-background-raised:      var(--color-neutral-0);           /* floating panels */
-  --color-background-sunken:      var(--color-neutral-100);         /* inputs, wells */
-  --color-background-hover:       var(--color-neutral-100);
-  --color-background-press:       var(--color-neutral-150);
-  --color-background-selected:    var(--color-brand-secondary-50);
-
-  /* ─────────────────────────────────────────────────────────────────────────
-     INVERSE LAYER — contextual contrast surface, NOT dark theme
-     ─────────────────────────────────────────────────────────────────────────
-     Inverse is a deliberate high-contrast surface usable inside ANY theme.
-     Use it for: institutional sidebars, premium hero panels, KPI emphasis
-     cards, command palettes, modal overlays — surfaces where contrast is the
-     intent, not the ambient theme.
-
-     Key rule (ATTRUS): inverse is ALWAYS the dark "preto-azulado" — even when
-     dark theme arrives. In dark theme, surface becomes dark and inverse stays
-     dark too, but inverse keeps a deliberate, branded character (deeper navy,
-     brand-tinted) that distinguishes it from the ambient surface.
-
-     Decision matrix:
-       Use --color-background-surface  → ambient surface of current theme
-       Use --color-background-inverse  → deliberate contrast vs. ambient
-       Use --color-background-inverse-brand → premium brand emphasis on inverse
-
-     Anti-patterns:
-       ✗ Using inverse to fake dark mode (use a real theme switch)
-       ✗ Mixing inverse and surface tokens in the same component without intent
-       ✗ Hard-coding #0B1230 / white instead of inverse tokens
-     ───────────────────────────────────────────────────────────────────────── */
-  --color-background-inverse:          var(--color-ink-base);
-  --color-background-inverse-surface:  var(--color-ink-raised);
-  --color-background-inverse-subtle:   var(--color-ink-deep);
-  --color-background-inverse-hover:    var(--color-ink-hover);
-
-  /* Scrim — modal/drawer/sheet backdrop. Same in light and dark themes.
-     Pairs --color-scrim (tint) with --scrim-blur (depth via backdrop-filter).
-     The lower tint (0.32) works because blur alone separates focus from background;
-     fallback for browsers without backdrop-filter is in components/overlays.css. */
-  --color-scrim:                       rgba(10, 15, 31, 0.32);
-  --scrim-blur:                        6px;
-  --color-background-inverse-press:    color-mix(in srgb, var(--color-ink-hover) 70%, var(--color-pure-white));
-  --color-background-inverse-selected: color-mix(in srgb, var(--color-brand-secondary-500) 22%, var(--color-ink-base));
-  --color-background-inverse-brand:    var(--color-brand-primary-500);   /* CTA / hero with brand weight — Navy */
-
-  /* Foreground (text + icons) on LIGHT surfaces */
-  --color-foreground-default:     var(--color-neutral-800);   /* primary copy / headings */
-  --color-foreground-secondary:   var(--color-neutral-600);   /* hierarchy step 2 */
-  --color-foreground-muted:       var(--color-neutral-500);   /* captions, helper */
-  --color-foreground-placeholder: var(--color-neutral-300);   /* disabled + placeholder */
-  --color-foreground-accent:      var(--color-brand-accent-700);       /* accent / highlight TEXT — accent-700 #1E6DC4 (5.20:1 on white). NOT Sky-500: that fails AA as text (2.94:1). For decorative Sky fills use --color-brand-accent-500 directly. */
-  --color-foreground-brand:       var(--color-brand-primary-500);      /* institutional brand text/icon — Navy */
-  --color-foreground-highlight:   var(--color-brand-accent-700);       /* links, selected TEXT — accent-700 #1E6DC4 (legible on light). */
-  --color-foreground-on-solid:    var(--color-neutral-0);     /* text on any solid/strong fill (brand, ink, navy, dark hovers) */
-  --color-foreground-disabled:    var(--color-neutral-300);
-
-  /* Foreground on INVERSE (dark navy/ink) surfaces */
-  --color-foreground-inverse-default:     var(--color-neutral-50);
-  --color-foreground-inverse-secondary:   var(--color-neutral-300);
-  --color-foreground-inverse-muted:       var(--color-neutral-400);
-  --color-foreground-inverse-placeholder: var(--color-neutral-500);
-  --color-foreground-inverse-accent:      var(--color-brand-accent-500);
-  --color-foreground-inverse-highlight:   var(--color-brand-accent-300);
-  --color-foreground-inverse-disabled:    var(--color-neutral-600);
-
-  /* Borders */
-  --color-border-subtle:    var(--color-neutral-100);
-  --color-border-default:   var(--color-neutral-150);
-  --color-border-strong:    var(--color-neutral-200);
-  --color-border-focus:     var(--color-brand-accent-500);
-  --color-border-accent:    var(--color-brand-accent-500);
-  --color-border-success:   var(--color-success-500);
-  --color-border-warning:   var(--color-warning-500);
-  --color-border-danger:    var(--color-danger-500);
-  --color-border-info:      var(--color-info-500);
-  --color-border-inverse:        color-mix(in srgb, var(--color-pure-white) 10%, transparent);
-  --color-border-inverse-strong: color-mix(in srgb, var(--color-pure-white) 18%, transparent);
-
-  /* White-alpha overlays — for chips, ghost buttons, hairlines on dark/brand surfaces.
-     Use these instead of rgba(255,255,255,…) literals. */
-  --color-overlay-white-08:  color-mix(in srgb, var(--color-pure-white)  8%, transparent);
-  --color-overlay-white-12:  color-mix(in srgb, var(--color-pure-white) 12%, transparent);
-  --color-overlay-white-14:  color-mix(in srgb, var(--color-pure-white) 14%, transparent);
-  --color-overlay-white-16:  color-mix(in srgb, var(--color-pure-white) 16%, transparent);
-  --color-overlay-white-18:  color-mix(in srgb, var(--color-pure-white) 18%, transparent);
-  --color-overlay-white-22:  color-mix(in srgb, var(--color-pure-white) 22%, transparent);
-
-  /* Semantic fg/bg pairs (status chips, alerts) */
-  --color-feedback-success-foreground:        var(--color-success-700);
-  --color-feedback-success-foreground-muted:  var(--color-success-500);
-  --color-feedback-success-foreground-subtle: color-mix(in srgb, var(--color-success-500) 70%, var(--color-foreground-muted));
-  --color-feedback-success-background:        var(--color-success-50);
-  --color-feedback-success-border:        var(--color-success-100);
-  --color-feedback-warning-foreground:        var(--color-warning-700);
-  --color-feedback-warning-foreground-muted:  var(--color-warning-500);
-  --color-feedback-warning-foreground-subtle: color-mix(in srgb, var(--color-warning-500) 70%, var(--color-foreground-muted));
-  --color-feedback-warning-background:        var(--color-warning-50);
-  --color-feedback-warning-border:        var(--color-warning-100);
-  --color-feedback-danger-foreground:         var(--color-danger-700);
-  --color-feedback-danger-foreground-muted:   var(--color-danger-500);
-  --color-feedback-danger-foreground-subtle:  color-mix(in srgb, var(--color-danger-500) 70%, var(--color-foreground-muted));
-  --color-feedback-danger-background:         var(--color-danger-50);
-  --color-feedback-danger-border:         var(--color-danger-100);
-  --color-feedback-info-foreground:           var(--color-info-700);
-  --color-feedback-info-foreground-muted:     var(--color-info-500);
-  --color-feedback-info-foreground-subtle:    color-mix(in srgb, var(--color-info-500) 70%, var(--color-foreground-muted));
-  --color-feedback-info-background:           var(--color-info-50);
-  --color-feedback-info-border:           var(--color-info-100);
-
-  /* Semantic foregrounds on INVERSE surfaces (chips/banners over dark) */
-  --color-feedback-success-foreground-on-inverse:       var(--color-success-100);
-  --color-feedback-success-foreground-on-inverse-muted: color-mix(in srgb, var(--color-success-100) 70%, var(--color-foreground-inverse-muted));
-  --color-feedback-warning-foreground-on-inverse:       var(--color-warning-100);
-  --color-feedback-warning-foreground-on-inverse-muted: color-mix(in srgb, var(--color-warning-100) 70%, var(--color-foreground-inverse-muted));
-  --color-feedback-danger-foreground-on-inverse:        var(--color-danger-100);
-  --color-feedback-danger-foreground-on-inverse-muted:  color-mix(in srgb, var(--color-danger-100)  70%, var(--color-foreground-inverse-muted));
-  --color-feedback-info-foreground-on-inverse:          var(--color-info-100);
-  --color-feedback-info-foreground-on-inverse-muted:    color-mix(in srgb, var(--color-info-100)    70%, var(--color-foreground-inverse-muted));
+/* ============================================================
+   ATTRUS / Cabiros — SEMANTIC COLOR TOKENS
+   Reference the base palette (palette.css). This is the layer
+   components consume.
+   Roles: default | secondary | muted | accent | placeholder
+   Contexts: fg (text/icon), bg (surface), br (border)
+   ============================================================ */
+
+:root {
+  /* Default (light) theme — the 60% whites/light grays */
+  --color-background-canvas:      var(--color-neutral-25);          /* app background */
+  --color-background-surface:     var(--color-neutral-0);           /* card / container */
+  --color-background-subtle:      var(--color-neutral-50);          /* row / nested */
+  --color-background-raised:      var(--color-neutral-0);           /* floating panels */
+  --color-background-sunken:      var(--color-neutral-100);         /* inputs, wells */
+  --color-background-hover:       var(--color-neutral-100);
+  --color-background-press:       var(--color-neutral-150);
+  --color-background-selected:    var(--color-brand-subtle-solid);  /* product-aware via brand-subtle-solid (dark theme overrides below) */
+
+  /* ─────────────────────────────────────────────────────────────────────────
+     THEMING SURFACE — product axis (semantic brand/accent tokens)
+     ─────────────────────────────────────────────────────────────────────────
+     A product theme (`[data-product="…"]`) redefines ONLY this short set; every
+     component fill, text and tint reads from these, so swapping them reskins the
+     whole catalog with no per-component edits. Primer/Spectrum-style aliasing.
+
+     The two axes stay orthogonal:
+       • PRODUCT axis → matiz: this set + the brand/accent scales, logo, hero grad.
+       • THEME axis (light/dark) → surface ramp + tint intensity. NEVER matiz.
+
+     Brand = institutional / primary action. */
+  --color-brand-solid:        var(--color-brand-primary-500);  /* Enterprise primary — ATTRUS Navy #002142 (buttons, avatars, toggles, badges, hero) */
+  --color-brand-solid-hover:  color-mix(in srgb, var(--color-pure-white) 12%, var(--color-brand-primary-500));  /* navy is near-ink → states LIGHTEN */
+  --color-brand-solid-active: color-mix(in srgb, var(--color-pure-white) 6%,  var(--color-brand-primary-500));
+  --color-brand-text:         var(--color-brand-primary-500);  /* navy as text — 15:1 on white */
+  --color-brand-text-strong:  var(--color-brand-primary-700);  /* brand text pressed/emphasis */
+  --color-brand-subtle:       color-mix(in srgb, var(--color-brand-primary-500) 12%, transparent);  /* tints: brand chips, selected, tags */
+  --color-brand-subtle-solid: var(--color-brand-primary-50);   /* opaque light brand tint: brand avatars, selected-row base */
+  --color-brand-border:       var(--color-brand-primary-200);  /* light brand border: selected filter chips */
+  --color-brand-on-solid:     var(--color-foreground-on-solid);  /* text/icon on --color-brand-solid */
+  /* Accent = interactive / wayfinding (Sky). accent text = --color-foreground-accent. */
+  --color-accent-solid:       var(--color-brand-accent-500);   /* tab/active indicator, focus ring */
+  --color-accent-subtle:      color-mix(in srgb, var(--color-brand-accent-500) 14%, transparent);  /* counts, pagination, accent chips */
+
+  /* ─────────────────────────────────────────────────────────────────────────
+     INVERSE LAYER — contextual contrast surface, NOT dark theme
+     ─────────────────────────────────────────────────────────────────────────
+     Inverse is a deliberate high-contrast surface usable inside ANY theme.
+     Use it for: institutional sidebars, premium hero panels, KPI emphasis
+     cards, command palettes, modal overlays — surfaces where contrast is the
+     intent, not the ambient theme.
+
+     Key rule (ATTRUS): inverse is ALWAYS the dark "preto-azulado" — even when
+     dark theme arrives. In dark theme, surface becomes dark and inverse stays
+     dark too, but inverse keeps a deliberate, branded character (deeper navy,
+     brand-tinted) that distinguishes it from the ambient surface.
+
+     Decision matrix:
+       Use --color-background-surface  → ambient surface of current theme
+       Use --color-background-inverse  → deliberate contrast vs. ambient
+       Use --color-background-inverse-brand → premium brand emphasis on inverse
+
+     Anti-patterns:
+       ✗ Using inverse to fake dark mode (use a real theme switch)
+       ✗ Mixing inverse and surface tokens in the same component without intent
+       ✗ Hard-coding #0B1230 / white instead of inverse tokens
+     ───────────────────────────────────────────────────────────────────────── */
+  --color-background-inverse:          color-mix(in srgb, var(--color-brand-solid) 16%, var(--color-ink-base));      /* product-tinted dark panel */
+  --color-background-inverse-surface:  color-mix(in srgb, var(--color-brand-solid) 20%, var(--color-ink-raised));
+  --color-background-inverse-subtle:   color-mix(in srgb, var(--color-brand-solid) 12%, var(--color-ink-deep));
+  --color-background-inverse-hover:    var(--color-ink-hover);
+
+  /* Scrim — modal/drawer/sheet backdrop. Same in light and dark themes.
+     Pairs --color-scrim (tint) with --scrim-blur (depth via backdrop-filter).
+     The lower tint (0.32) works because blur alone separates focus from background;
+     fallback for browsers without backdrop-filter is in components/overlays.css. */
+  --color-scrim:                       rgba(10, 15, 31, 0.32);
+  --scrim-blur:                        6px;
+  --color-background-inverse-press:    color-mix(in srgb, var(--color-ink-hover) 70%, var(--color-pure-white));
+  --color-background-inverse-selected: color-mix(in srgb, var(--color-brand-solid) 22%, var(--color-ink-base));
+  --color-background-inverse-brand:    var(--color-brand-solid);   /* CTA / hero with brand weight — follows product */
+
+  /* Foreground (text + icons) on LIGHT surfaces */
+  --color-foreground-default:     var(--color-neutral-800);   /* primary copy / headings */
+  --color-foreground-secondary:   var(--color-neutral-600);   /* hierarchy step 2 */
+  --color-foreground-muted:       var(--color-neutral-500);   /* captions, helper */
+  --color-foreground-placeholder: var(--color-neutral-300);   /* disabled + placeholder */
+  --color-foreground-accent:      var(--color-brand-accent-700);       /* accent / highlight TEXT — accent-700 #1E6DC4 (5.20:1 on white). NOT Sky-500: that fails AA as text (2.94:1). For decorative Sky fills use --color-brand-accent-500 directly. */
+  --color-foreground-brand:       var(--color-brand-primary-500);      /* institutional brand text/icon — Navy */
+  --color-foreground-highlight:   var(--color-brand-accent-700);       /* links, selected TEXT — accent-700 #1E6DC4 (legible on light). */
+  --color-foreground-on-solid:    var(--color-neutral-0);     /* text on any solid/strong fill (brand, ink, navy, dark hovers) */
+  --color-foreground-disabled:    var(--color-neutral-300);
+
+  /* Foreground on INVERSE (dark navy/ink) surfaces */
+  --color-foreground-inverse-default:     var(--color-neutral-50);
+  --color-foreground-inverse-secondary:   var(--color-neutral-300);
+  --color-foreground-inverse-muted:       var(--color-neutral-400);
+  --color-foreground-inverse-placeholder: var(--color-neutral-500);
+  --color-foreground-inverse-accent:      var(--color-brand-accent-500);
+  --color-foreground-inverse-highlight:   var(--color-brand-accent-300);
+  --color-foreground-inverse-disabled:    var(--color-neutral-600);
+
+  /* Borders */
+  --color-border-subtle:    var(--color-neutral-100);
+  --color-border-default:   var(--color-neutral-150);
+  --color-border-strong:    var(--color-neutral-200);
+  --color-border-focus:     var(--color-accent-solid);   /* per-theme accent (Sky default) — follows the product's accent */
+  --color-border-accent:    var(--color-accent-solid);
+  --color-border-success:   var(--color-success-500);
+  --color-border-warning:   var(--color-warning-500);
+  --color-border-danger:    var(--color-danger-500);
+  --color-border-info:      var(--color-info-500);
+  --color-border-inverse:        color-mix(in srgb, var(--color-pure-white) 10%, transparent);
+  --color-border-inverse-strong: color-mix(in srgb, var(--color-pure-white) 18%, transparent);
+
+  /* White-alpha overlays — for chips, ghost buttons, hairlines on dark/brand surfaces.
+     Use these instead of rgba(255,255,255,…) literals. */
+  --color-overlay-white-08:  color-mix(in srgb, var(--color-pure-white)  8%, transparent);
+  --color-overlay-white-12:  color-mix(in srgb, var(--color-pure-white) 12%, transparent);
+  --color-overlay-white-14:  color-mix(in srgb, var(--color-pure-white) 14%, transparent);
+  --color-overlay-white-16:  color-mix(in srgb, var(--color-pure-white) 16%, transparent);
+  --color-overlay-white-18:  color-mix(in srgb, var(--color-pure-white) 18%, transparent);
+  --color-overlay-white-22:  color-mix(in srgb, var(--color-pure-white) 22%, transparent);
+
+  /* Semantic fg/bg pairs (status chips, alerts) */
+  --color-feedback-success-foreground:        var(--color-success-700);
+  --color-feedback-success-foreground-muted:  var(--color-success-500);
+  --color-feedback-success-foreground-subtle: color-mix(in srgb, var(--color-success-500) 70%, var(--color-foreground-muted));
+  --color-feedback-success-background:        var(--color-success-50);
+  --color-feedback-success-border:        var(--color-success-100);
+  --color-feedback-warning-foreground:        var(--color-warning-700);
+  --color-feedback-warning-foreground-muted:  var(--color-warning-500);
+  --color-feedback-warning-foreground-subtle: color-mix(in srgb, var(--color-warning-500) 70%, var(--color-foreground-muted));
+  --color-feedback-warning-background:        var(--color-warning-50);
+  --color-feedback-warning-border:        var(--color-warning-100);
+  --color-feedback-danger-foreground:         var(--color-danger-700);
+  --color-feedback-danger-foreground-muted:   var(--color-danger-500);
+  --color-feedback-danger-foreground-subtle:  color-mix(in srgb, var(--color-danger-500) 70%, var(--color-foreground-muted));
+  --color-feedback-danger-background:         var(--color-danger-50);
+  --color-feedback-danger-border:         var(--color-danger-100);
+  --color-feedback-info-foreground:           var(--color-info-700);
+  --color-feedback-info-foreground-muted:     var(--color-info-500);
+  --color-feedback-info-foreground-subtle:    color-mix(in srgb, var(--color-info-500) 70%, var(--color-foreground-muted));
+  --color-feedback-info-background:           var(--color-info-50);
+  --color-feedback-info-border:           var(--color-info-100);
+
+  /* Semantic foregrounds on INVERSE surfaces (chips/banners over dark) */
+  --color-feedback-success-foreground-on-inverse:       var(--color-success-100);
+  --color-feedback-success-foreground-on-inverse-muted: color-mix(in srgb, var(--color-success-100) 70%, var(--color-foreground-inverse-muted));
+  --color-feedback-warning-foreground-on-inverse:       var(--color-warning-100);
+  --color-feedback-warning-foreground-on-inverse-muted: color-mix(in srgb, var(--color-warning-100) 70%, var(--color-foreground-inverse-muted));
+  --color-feedback-danger-foreground-on-inverse:        var(--color-danger-100);
+  --color-feedback-danger-foreground-on-inverse-muted:  color-mix(in srgb, var(--color-danger-100)  70%, var(--color-foreground-inverse-muted));
+  --color-feedback-info-foreground-on-inverse:          var(--color-info-100);
+  --color-feedback-info-foreground-on-inverse-muted:    color-mix(in srgb, var(--color-info-100)    70%, var(--color-foreground-inverse-muted));
+}
+
+/* ============================================================
+   ATTRUS / Cabiros — GRADIENTS (primary brand + layers)
+   ============================================================ */
+
+/* Brand gradients — DERIVED from --color-brand-solid so they follow the
+   active product automatically (Enterprise Navy / Business Blue / …). The
+   var() resolves at use-site, so an element under [data-product] recomputes
+   these with that product's primary — no per-product override needed.
+   --grad-brand tips into the shared Sky accent. */
+:root {
+  --grad-brand:       linear-gradient(135deg,
+                        color-mix(in srgb, var(--color-pure-black) 45%, var(--color-brand-solid)) 0%,
+                        var(--color-brand-solid) 55%,
+                        var(--color-accent-solid) 100%);
+  --grad-brand-soft:  linear-gradient(135deg,
+                        var(--color-brand-solid) 0%,
+                        color-mix(in srgb, var(--color-pure-black) 20%, var(--color-brand-solid)) 100%);
+  --grad-ink:         linear-gradient(160deg,
+                        color-mix(in srgb, var(--color-pure-black) 68%, var(--color-brand-solid)) 0%,
+                        color-mix(in srgb, var(--color-pure-black) 45%, var(--color-brand-solid)) 55%,
+                        color-mix(in srgb, var(--color-pure-black) 25%, var(--color-brand-solid)) 100%);
+  --grad-hero:        linear-gradient(180deg,
+                        color-mix(in srgb, var(--color-pure-black) 52%, var(--color-brand-solid)) 0%,
+                        color-mix(in srgb, var(--color-pure-black) 18%, var(--color-brand-solid)) 100%);
+  --grad-sheen:       linear-gradient(120deg,
+                        color-mix(in srgb, var(--color-pure-white) 14%, transparent) 0%,
+                        color-mix(in srgb, var(--color-pure-white)  0%, transparent) 40%,
+                        color-mix(in srgb, var(--color-pure-white)  0%, transparent) 60%,
+                        color-mix(in srgb, var(--color-pure-white)  8%, transparent) 100%);
+  --grad-surface-top: linear-gradient(180deg,
+                        color-mix(in srgb, var(--color-pure-white) 65%, transparent) 0%,
+                        color-mix(in srgb, var(--color-pure-white)  0%, transparent) 100%);
+  --grad-radial-glow: radial-gradient(1200px 500px at 20% -10%,
+                        color-mix(in srgb, var(--color-accent-solid) 25%, transparent) 0%,
+                        color-mix(in srgb, var(--color-accent-solid)  0%, transparent) 60%);
+  --grad-data-pos:    linear-gradient(180deg,
+                        color-mix(in srgb, var(--color-success-500) 35%, transparent) 0%,
+                        color-mix(in srgb, var(--color-success-500)  0%, transparent) 100%);
+  --grad-data-neg:    linear-gradient(180deg,
+                        color-mix(in srgb, var(--color-danger-500) 35%, transparent) 0%,
+                        color-mix(in srgb, var(--color-danger-500)  0%, transparent) 100%);
+  --grad-data-brand:  linear-gradient(180deg,
+                        color-mix(in srgb, var(--color-brand-accent-500) 30%, transparent) 0%,
+                        color-mix(in srgb, var(--color-brand-accent-500)  0%, transparent) 100%);
 }
 
-/* ============================================================
-   ATTRUS / Cabiros — GRADIENTS (primary brand + layers)
-   ============================================================ */
-
-:root {
-  --grad-brand:       linear-gradient(135deg, #001A4D 0%, #003399 50%, #3399FF 100%);
-  --grad-brand-soft:  linear-gradient(135deg, #002A80 0%, #003399 100%);
-  --grad-ink:         linear-gradient(160deg, #0B1230 0%, #001A4D 55%, #002A80 100%);
-  --grad-hero:        linear-gradient(180deg, #001133 0%, #003399 100%);
-  --grad-sheen:       linear-gradient(120deg,
-                        color-mix(in srgb, var(--color-pure-white) 14%, transparent) 0%,
-                        color-mix(in srgb, var(--color-pure-white)  0%, transparent) 40%,
-                        color-mix(in srgb, var(--color-pure-white)  0%, transparent) 60%,
-                        color-mix(in srgb, var(--color-pure-white)  8%, transparent) 100%);
-  --grad-surface-top: linear-gradient(180deg,
-                        color-mix(in srgb, var(--color-pure-white) 65%, transparent) 0%,
-                        color-mix(in srgb, var(--color-pure-white)  0%, transparent) 100%);
-  --grad-radial-glow: radial-gradient(1200px 500px at 20% -10%,
-                        color-mix(in srgb, var(--color-brand-accent-500) 25%, transparent) 0%,
-                        color-mix(in srgb, var(--color-brand-accent-500)  0%, transparent) 60%);
-  --grad-data-pos:    linear-gradient(180deg,
-                        color-mix(in srgb, var(--color-success-500) 35%, transparent) 0%,
-                        color-mix(in srgb, var(--color-success-500)  0%, transparent) 100%);
-  --grad-data-neg:    linear-gradient(180deg,
-                        color-mix(in srgb, var(--color-danger-500) 35%, transparent) 0%,
-                        color-mix(in srgb, var(--color-danger-500)  0%, transparent) 100%);
-  --grad-data-brand:  linear-gradient(180deg,
-                        color-mix(in srgb, var(--color-brand-accent-500) 30%, transparent) 0%,
-                        color-mix(in srgb, var(--color-brand-accent-500)  0%, transparent) 100%);
+/* ============================================================
+   ATTRUS / Cabiros — DATA VISUALIZATION (chart palettes & structure)
+   Categorical = qualitative series (distinct, on-brand, cool).
+   Sequential  = single-hue magnitude ramp (Sky).
+   Diverging   = danger ← neutral → success (variance/heatmap).
+   Structure   = grid / axis / track / reference (semantic → theme).
+   Categorical gets dark-theme overrides (lift the dark hues, in
+   theme-dark.css); ramps + structure follow semantic tokens.
+   ============================================================ */
+
+:root {
+  /* Categorical — order chosen for max adjacent contrast */
+  --dataviz-cat-1: #003399;  /* Royal — brand-anchored series 1 */
+  --dataviz-cat-2: #3399FF;  /* Sky */
+  --dataviz-cat-3: #0F9A8C;  /* Teal */
+  --dataviz-cat-4: #C68A1A;  /* Gold */
+  --dataviz-cat-5: #6B5CE0;  /* Violet */
+  --dataviz-cat-6: #CC4F7A;  /* Rose */
+  --dataviz-cat-7: #18A0B8;  /* Cyan */
+  --dataviz-cat-8: #5E6A82;  /* Slate (neutral-500) */
+
+  /* Sequential — Sky single-hue ramp (low → high). Reuses accent stops. */
+  --dataviz-seq-1: var(--color-brand-accent-100);  /* #D9ECFF */
+  --dataviz-seq-2: var(--color-brand-accent-200);  /* #ADD2FF */
+  --dataviz-seq-3: var(--color-brand-accent-300);  /* #7AB8FF */
+  --dataviz-seq-4: var(--color-brand-accent-500);  /* #3399FF */
+  --dataviz-seq-5: var(--color-brand-accent-700);  /* #1E6DC4 */
+  --dataviz-seq-6: var(--color-brand-accent-900);  /* #0E3B70 */
+
+  /* Diverging — danger ← neutral mid → success (7 stops) */
+  --dataviz-div-1: var(--color-danger-500);   /* most negative */
+  --dataviz-div-2: var(--color-danger-300);
+  --dataviz-div-3: var(--color-danger-100);
+  --dataviz-div-mid: var(--color-neutral-100); /* neutral midpoint */
+  --dataviz-div-5: var(--color-success-100);
+  --dataviz-div-6: var(--color-success-300);
+  --dataviz-div-7: var(--color-success-500);  /* most positive */
+
+  /* Semantic data encodings */
+  --dataviz-positive: var(--color-success-500);
+  --dataviz-negative: var(--color-danger-500);
+  --dataviz-neutral:  var(--color-neutral-400);
+
+  /* Structure — grid, axis, track, reference lines */
+  --dataviz-grid:        var(--color-border-subtle);     /* gridlines */
+  --dataviz-axis:        var(--color-border-strong);     /* axis baseline */
+  --dataviz-axis-label:  var(--color-foreground-muted);  /* tick labels */
+  --dataviz-track:       var(--color-background-subtle);  /* empty bar / gauge track */
+  --dataviz-reference:   var(--color-foreground-muted);   /* dashed target/avg line */
 }
 
-/* ============================================================
-   ATTRUS / Cabiros — DATA VISUALIZATION (chart palettes & structure)
-   Categorical = qualitative series (distinct, on-brand, cool).
-   Sequential  = single-hue magnitude ramp (Sky).
-   Diverging   = danger ← neutral → success (variance/heatmap).
-   Structure   = grid / axis / track / reference (semantic → theme).
-   Categorical gets dark-theme overrides (lift the dark hues, in
-   theme-dark.css); ramps + structure follow semantic tokens.
-   ============================================================ */
-
-:root {
-  /* Categorical — order chosen for max adjacent contrast */
-  --dataviz-cat-1: #003399;  /* Royal — brand-anchored series 1 */
-  --dataviz-cat-2: #3399FF;  /* Sky */
-  --dataviz-cat-3: #0F9A8C;  /* Teal */
-  --dataviz-cat-4: #C68A1A;  /* Gold */
-  --dataviz-cat-5: #6B5CE0;  /* Violet */
-  --dataviz-cat-6: #CC4F7A;  /* Rose */
-  --dataviz-cat-7: #18A0B8;  /* Cyan */
-  --dataviz-cat-8: #5E6A82;  /* Slate (neutral-500) */
-
-  /* Sequential — Sky single-hue ramp (low → high). Reuses accent stops. */
-  --dataviz-seq-1: var(--color-brand-accent-100);  /* #D9ECFF */
-  --dataviz-seq-2: var(--color-brand-accent-200);  /* #ADD2FF */
-  --dataviz-seq-3: var(--color-brand-accent-300);  /* #7AB8FF */
-  --dataviz-seq-4: var(--color-brand-accent-500);  /* #3399FF */
-  --dataviz-seq-5: var(--color-brand-accent-700);  /* #1E6DC4 */
-  --dataviz-seq-6: var(--color-brand-accent-900);  /* #0E3B70 */
-
-  /* Diverging — danger ← neutral mid → success (7 stops) */
-  --dataviz-div-1: var(--color-danger-500);   /* most negative */
-  --dataviz-div-2: var(--color-danger-300);
-  --dataviz-div-3: var(--color-danger-100);
-  --dataviz-div-mid: var(--color-neutral-100); /* neutral midpoint */
-  --dataviz-div-5: var(--color-success-100);
-  --dataviz-div-6: var(--color-success-300);
-  --dataviz-div-7: var(--color-success-500);  /* most positive */
-
-  /* Semantic data encodings */
-  --dataviz-positive: var(--color-success-500);
-  --dataviz-negative: var(--color-danger-500);
-  --dataviz-neutral:  var(--color-neutral-400);
-
-  /* Structure — grid, axis, track, reference lines */
-  --dataviz-grid:        var(--color-border-subtle);     /* gridlines */
-  --dataviz-axis:        var(--color-border-strong);     /* axis baseline */
-  --dataviz-axis-label:  var(--color-foreground-muted);  /* tick labels */
-  --dataviz-track:       var(--color-background-subtle);  /* empty bar / gauge track */
-  --dataviz-reference:   var(--color-foreground-muted);   /* dashed target/avg line */
+/* ============================================================
+   ATTRUS / Cabiros — LIQUID GLASS (transparent / frosted layers)
+   Use with backdrop-filter: blur().
+   ============================================================ */
+
+:root {
+  --glass-white:     color-mix(in srgb, var(--color-pure-white) 58%, transparent);
+  --glass-white-hi:  color-mix(in srgb, var(--color-pure-white) 78%, transparent);
+  --glass-white-lo:  color-mix(in srgb, var(--color-pure-white) 38%, transparent);
+  --glass-tint:      color-mix(in srgb, var(--color-neutral-50) 55%, transparent);   /* bluish white */
+  --glass-ink:       color-mix(in srgb, var(--color-background-inverse) 55%, transparent);   /* dark navy */
+  --glass-ink-hi:    color-mix(in srgb, var(--color-background-inverse) 78%, transparent);
+  --glass-ink-lo:    color-mix(in srgb, var(--color-background-inverse) 35%, transparent);
+  --glass-blur:      saturate(140%) blur(18px);
+  --glass-blur-sm:   saturate(130%) blur(10px);
+  --glass-blur-lg:   saturate(160%) blur(28px);
+  --glass-border:      1px solid color-mix(in srgb, var(--color-pure-white) 45%, transparent);
+  --glass-border-dark: 1px solid color-mix(in srgb, var(--color-pure-white) 10%, transparent);
 }
 
-/* ============================================================
-   ATTRUS / Cabiros — LIQUID GLASS (transparent / frosted layers)
-   Use with backdrop-filter: blur().
-   ============================================================ */
-
-:root {
-  --glass-white:     color-mix(in srgb, var(--color-pure-white) 58%, transparent);
-  --glass-white-hi:  color-mix(in srgb, var(--color-pure-white) 78%, transparent);
-  --glass-white-lo:  color-mix(in srgb, var(--color-pure-white) 38%, transparent);
-  --glass-tint:      color-mix(in srgb, var(--color-neutral-50) 55%, transparent);   /* bluish white */
-  --glass-ink:       color-mix(in srgb, var(--color-background-inverse) 55%, transparent);   /* dark navy */
-  --glass-ink-hi:    color-mix(in srgb, var(--color-background-inverse) 78%, transparent);
-  --glass-ink-lo:    color-mix(in srgb, var(--color-background-inverse) 35%, transparent);
-  --glass-blur:      saturate(140%) blur(18px);
-  --glass-blur-sm:   saturate(130%) blur(10px);
-  --glass-blur-lg:   saturate(160%) blur(28px);
-  --glass-border:      1px solid color-mix(in srgb, var(--color-pure-white) 45%, transparent);
-  --glass-border-dark: 1px solid color-mix(in srgb, var(--color-pure-white) 10%, transparent);
+/* ============================================================
+   ATTRUS / Cabiros — RADII
+   Mostly softly rounded; buttons fully rounded.
+   ============================================================ */
+
+:root {
+  --radius-2xs: 2px;   /* never-square minimum — tiny chips, ticks, dividers */
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-sm-md: 8px;  /* in-between — avatar tiles, square icon buttons */
+  --radius-md: 10px;   /* cards, inputs — softly rounded */
+  --radius-md-lg: 12px; /* in-between — medium cards, drawer rows */
+  --radius-lg: 14px;   /* containers */
+  --radius-lg-xl: 16px; /* in-between — hero / large panels */
+  --radius-xl: 20px;   /* hero / large panels */
+  --radius-2xl: 28px;
+  --radius-pill: 999px; /* BUTTONS — fully rounded */
 }
 
-/* ============================================================
-   ATTRUS / Cabiros — RADII
-   Mostly softly rounded; buttons fully rounded.
-   ============================================================ */
-
-:root {
-  --radius-2xs: 2px;   /* never-square minimum — tiny chips, ticks, dividers */
-  --radius-xs: 4px;
-  --radius-sm: 6px;
-  --radius-sm-md: 8px;  /* in-between — avatar tiles, square icon buttons */
-  --radius-md: 10px;   /* cards, inputs — softly rounded */
-  --radius-md-lg: 12px; /* in-between — medium cards, drawer rows */
-  --radius-lg: 14px;   /* containers */
-  --radius-lg-xl: 16px; /* in-between — hero / large panels */
-  --radius-xl: 20px;   /* hero / large panels */
-  --radius-2xl: 28px;
-  --radius-pill: 999px; /* BUTTONS — fully rounded */
+/* ============================================================
+   ATTRUS / Cabiros — SHADOWS (soft, blue-tinted, multi-layer)
+   ============================================================ */
+
+:root {
+  --shadow-xs:  0 1px 2px color-mix(in srgb, var(--color-shadow-tint) 5%, transparent);
+  --shadow-sm:  0 1px 2px color-mix(in srgb, var(--color-shadow-tint) 6%, transparent),
+                0 2px 6px color-mix(in srgb, var(--color-shadow-tint) 4%, transparent);
+  --shadow-md:  0 2px 4px  color-mix(in srgb, var(--color-shadow-tint) 6%, transparent),
+                0 8px 20px color-mix(in srgb, var(--color-shadow-tint) 6%, transparent);
+  --shadow-lg:  0 4px 8px   color-mix(in srgb, var(--color-shadow-tint) 6%,  transparent),
+                0 20px 40px color-mix(in srgb, var(--color-shadow-tint) 10%, transparent);
+  --shadow-xl:  0 12px 24px color-mix(in srgb, var(--color-shadow-tint) 10%, transparent),
+                0 32px 80px color-mix(in srgb, var(--color-shadow-tint) 18%, transparent);
+  --shadow-2xl: 0 24px 48px color-mix(in srgb, var(--color-shadow-tint) 14%, transparent),
+                0 48px 120px color-mix(in srgb, var(--color-shadow-tint) 24%, transparent); /* deepest — modals, drawers, floating overlays above scrim */
+  --shadow-focus:         0 0 0 4px color-mix(in srgb, var(--color-accent-solid)     22%, transparent);   /* per-theme accent */
+  --shadow-focus-sky:     0 0 0 4px color-mix(in srgb, var(--color-brand-accent-500)     25%, transparent);
+  --shadow-focus-success: 0 0 0 4px color-mix(in srgb, var(--color-success-500) 22%, transparent);
+  --shadow-focus-warning: 0 0 0 4px color-mix(in srgb, var(--color-warning-500) 22%, transparent);
+  --shadow-focus-danger:  0 0 0 4px color-mix(in srgb, var(--color-danger-500)  22%, transparent);
+  --shadow-focus-info:    0 0 0 4px color-mix(in srgb, var(--color-info-500)    22%, transparent);
+
+  /* Semantic elevation — for status cards, toasts, banners, action buttons */
+  --shadow-success-sm: 0 1px 2px  color-mix(in srgb, var(--shadow-tint-success-color)  8%, transparent),
+                       0 4px 12px color-mix(in srgb, var(--shadow-tint-success-color) 12%, transparent);
+  --shadow-success-md: 0 4px 8px   color-mix(in srgb, var(--shadow-tint-success-color) 10%, transparent),
+                       0 16px 32px color-mix(in srgb, var(--shadow-tint-success-color) 16%, transparent);
+  --shadow-warning-sm: 0 1px 2px  color-mix(in srgb, var(--shadow-tint-warning-color)  8%, transparent),
+                       0 4px 12px color-mix(in srgb, var(--shadow-tint-warning-color) 12%, transparent);
+  --shadow-warning-md: 0 4px 8px   color-mix(in srgb, var(--shadow-tint-warning-color) 10%, transparent),
+                       0 16px 32px color-mix(in srgb, var(--shadow-tint-warning-color) 16%, transparent);
+  --shadow-danger-sm:  0 1px 2px  color-mix(in srgb, var(--shadow-tint-danger-color)   8%, transparent),
+                       0 4px 12px color-mix(in srgb, var(--shadow-tint-danger-color)  14%, transparent);
+  --shadow-danger-md:  0 4px 8px   color-mix(in srgb, var(--shadow-tint-danger-color)  12%, transparent),
+                       0 16px 32px color-mix(in srgb, var(--shadow-tint-danger-color)  18%, transparent);
+  --shadow-info-sm:    0 1px 2px  color-mix(in srgb, var(--shadow-tint-info-color)     8%, transparent),
+                       0 4px 12px color-mix(in srgb, var(--shadow-tint-info-color)    12%, transparent);
+  --shadow-info-md:    0 4px 8px   color-mix(in srgb, var(--shadow-tint-info-color)    10%, transparent),
+                       0 16px 32px color-mix(in srgb, var(--shadow-tint-info-color)    16%, transparent);
+  --shadow-inset: inset 0  1px 0 color-mix(in srgb, var(--color-pure-white) 60%, transparent),
+                  inset 0 -1px 0 color-mix(in srgb, var(--color-shadow-tint) 4%, transparent);
+  --shadow-glass: 0 1px 0 color-mix(in srgb, var(--color-pure-white) 50%, transparent) inset,
+                  0 10px 30px color-mix(in srgb, var(--color-shadow-tint) 12%, transparent);
+  --shadow-glass-dark: 0 1px 0 color-mix(in srgb, var(--color-pure-white)  8%, transparent) inset,
+                       0 10px 40px color-mix(in srgb, var(--color-pure-black) 35%, transparent);
 }
 
-/* ============================================================
-   ATTRUS / Cabiros — SHADOWS (soft, blue-tinted, multi-layer)
-   ============================================================ */
-
-:root {
-  --shadow-xs:  0 1px 2px color-mix(in srgb, var(--color-shadow-tint) 5%, transparent);
-  --shadow-sm:  0 1px 2px color-mix(in srgb, var(--color-shadow-tint) 6%, transparent),
-                0 2px 6px color-mix(in srgb, var(--color-shadow-tint) 4%, transparent);
-  --shadow-md:  0 2px 4px  color-mix(in srgb, var(--color-shadow-tint) 6%, transparent),
-                0 8px 20px color-mix(in srgb, var(--color-shadow-tint) 6%, transparent);
-  --shadow-lg:  0 4px 8px   color-mix(in srgb, var(--color-shadow-tint) 6%,  transparent),
-                0 20px 40px color-mix(in srgb, var(--color-shadow-tint) 10%, transparent);
-  --shadow-xl:  0 12px 24px color-mix(in srgb, var(--color-shadow-tint) 10%, transparent),
-                0 32px 80px color-mix(in srgb, var(--color-shadow-tint) 18%, transparent);
-  --shadow-2xl: 0 24px 48px color-mix(in srgb, var(--color-shadow-tint) 14%, transparent),
-                0 48px 120px color-mix(in srgb, var(--color-shadow-tint) 24%, transparent); /* deepest — modals, drawers, floating overlays above scrim */
-  --shadow-focus:         0 0 0 4px color-mix(in srgb, var(--color-brand-accent-500)     22%, transparent);
-  --shadow-focus-sky:     0 0 0 4px color-mix(in srgb, var(--color-brand-accent-500)     25%, transparent);
-  --shadow-focus-success: 0 0 0 4px color-mix(in srgb, var(--color-success-500) 22%, transparent);
-  --shadow-focus-warning: 0 0 0 4px color-mix(in srgb, var(--color-warning-500) 22%, transparent);
-  --shadow-focus-danger:  0 0 0 4px color-mix(in srgb, var(--color-danger-500)  22%, transparent);
-  --shadow-focus-info:    0 0 0 4px color-mix(in srgb, var(--color-info-500)    22%, transparent);
-
-  /* Semantic elevation — for status cards, toasts, banners, action buttons */
-  --shadow-success-sm: 0 1px 2px  color-mix(in srgb, var(--shadow-tint-success-color)  8%, transparent),
-                       0 4px 12px color-mix(in srgb, var(--shadow-tint-success-color) 12%, transparent);
-  --shadow-success-md: 0 4px 8px   color-mix(in srgb, var(--shadow-tint-success-color) 10%, transparent),
-                       0 16px 32px color-mix(in srgb, var(--shadow-tint-success-color) 16%, transparent);
-  --shadow-warning-sm: 0 1px 2px  color-mix(in srgb, var(--shadow-tint-warning-color)  8%, transparent),
-                       0 4px 12px color-mix(in srgb, var(--shadow-tint-warning-color) 12%, transparent);
-  --shadow-warning-md: 0 4px 8px   color-mix(in srgb, var(--shadow-tint-warning-color) 10%, transparent),
-                       0 16px 32px color-mix(in srgb, var(--shadow-tint-warning-color) 16%, transparent);
-  --shadow-danger-sm:  0 1px 2px  color-mix(in srgb, var(--shadow-tint-danger-color)   8%, transparent),
-                       0 4px 12px color-mix(in srgb, var(--shadow-tint-danger-color)  14%, transparent);
-  --shadow-danger-md:  0 4px 8px   color-mix(in srgb, var(--shadow-tint-danger-color)  12%, transparent),
-                       0 16px 32px color-mix(in srgb, var(--shadow-tint-danger-color)  18%, transparent);
-  --shadow-info-sm:    0 1px 2px  color-mix(in srgb, var(--shadow-tint-info-color)     8%, transparent),
-                       0 4px 12px color-mix(in srgb, var(--shadow-tint-info-color)    12%, transparent);
-  --shadow-info-md:    0 4px 8px   color-mix(in srgb, var(--shadow-tint-info-color)    10%, transparent),
-                       0 16px 32px color-mix(in srgb, var(--shadow-tint-info-color)    16%, transparent);
-  --shadow-inset: inset 0  1px 0 color-mix(in srgb, var(--color-pure-white) 60%, transparent),
-                  inset 0 -1px 0 color-mix(in srgb, var(--color-shadow-tint) 4%, transparent);
-  --shadow-glass: 0 1px 0 color-mix(in srgb, var(--color-pure-white) 50%, transparent) inset,
-                  0 10px 30px color-mix(in srgb, var(--color-shadow-tint) 12%, transparent);
-  --shadow-glass-dark: 0 1px 0 color-mix(in srgb, var(--color-pure-white)  8%, transparent) inset,
-                       0 10px 40px color-mix(in srgb, var(--color-pure-black) 35%, transparent);
+/* ============================================================
+   ATTRUS / Cabiros — SPACING
+   4px base; dense, data-heavy layouts.
+   ============================================================ */
+
+:root {
+  --space-0:   0;
+  --space-1:   2px;
+  --space-2:   4px;
+  --space-2-5: 6px;   /* half-step — dense chips, tight icon gaps */
+  --space-3:   8px;
+  --space-3-5: 10px;  /* half-step — control padding, list-row gaps */
+  --space-4:   12px;
+  --space-4-5: 14px;  /* half-step — card padding, section gaps */
+  --space-5:   16px;
+  --space-6:   20px;
+  --space-7:   24px;
+  --space-8:   32px;
+  --space-9:   40px;
+  --space-10:  48px;
+  --space-12:  64px;
+  --space-14:  80px;
+  --space-16:  96px;
 }
 
-/* ============================================================
-   ATTRUS / Cabiros — SPACING
-   4px base; dense, data-heavy layouts.
-   ============================================================ */
-
-:root {
-  --space-0:   0;
-  --space-1:   2px;
-  --space-2:   4px;
-  --space-2-5: 6px;   /* half-step — dense chips, tight icon gaps */
-  --space-3:   8px;
-  --space-3-5: 10px;  /* half-step — control padding, list-row gaps */
-  --space-4:   12px;
-  --space-4-5: 14px;  /* half-step — card padding, section gaps */
-  --space-5:   16px;
-  --space-6:   20px;
-  --space-7:   24px;
-  --space-8:   32px;
-  --space-9:   40px;
-  --space-10:  48px;
-  --space-12:  64px;
-  --space-14:  80px;
-  --space-16:  96px;
+/* ============================================================
+   ATTRUS / Cabiros — ICONOGRAPHY (Lucide; sized to pair with type scale)
+   ============================================================ */
+
+:root {
+  --icon-xs: 12px;  /* helper text, micro caption          (paired w/ 11–12px text) */
+  --icon-sm: 14px;  /* input affix, dense inline           (paired w/ 13px text) */
+  --icon-md: 16px;  /* default — buttons, nav, body        (paired w/ 14px text) */
+  --icon-lg: 20px;  /* iconography grid, prominent CTAs    (paired w/ 16+ text) */
+  --icon-xl: 24px;  /* hero, empty states, splash          (paired w/ 18+ text) */
+
+  /* Stroke widths — Lucide */
+  --icon-stroke:      1.75;  /* default — slightly bolder than 1.5, calmer than 2 */
+  --icon-stroke-bold: 2;     /* close buttons, X marks, indicators where weight matters */
+  --icon-stroke-thin: 1.5;   /* decorative / large hero icons where 1.75 looks heavy */
 }
 
-/* ============================================================
-   ATTRUS / Cabiros — ICONOGRAPHY (Lucide; sized to pair with type scale)
-   ============================================================ */
-
-:root {
-  --icon-xs: 12px;  /* helper text, micro caption          (paired w/ 11–12px text) */
-  --icon-sm: 14px;  /* input affix, dense inline           (paired w/ 13px text) */
-  --icon-md: 16px;  /* default — buttons, nav, body        (paired w/ 14px text) */
-  --icon-lg: 20px;  /* iconography grid, prominent CTAs    (paired w/ 16+ text) */
-  --icon-xl: 24px;  /* hero, empty states, splash          (paired w/ 18+ text) */
-
-  /* Stroke widths — Lucide */
-  --icon-stroke:      1.75;  /* default — slightly bolder than 1.5, calmer than 2 */
-  --icon-stroke-bold: 2;     /* close buttons, X marks, indicators where weight matters */
-  --icon-stroke-thin: 1.5;   /* decorative / large hero icons where 1.75 looks heavy */
+/* ============================================================
+   ATTRUS / Cabiros — MOTION (durations + easings for transitions/animations)
+   ============================================================ */
+
+:root {
+  /* Easing — single curve across the system; "out-expo-ish" for snappy UI */
+  --ease-standard: cubic-bezier(.2, .8, .2, 1);
+  --ease-emphasis: cubic-bezier(.2, .9, .15, 1);   /* slightly more overshoot — for entries */
+  --ease-linear:   linear;                         /* loading bars, scrubbers */
+
+  /* Durations — paired with --ease-standard unless noted */
+  --duration-instant: 80ms;     /* micro feedback (tap echo) */
+  --duration-fast:    140ms;    /* hover, focus, color shifts */
+  --duration-base:    200ms;    /* default for most UI */
+  --duration-slow:    320ms;    /* expansions, reveals */
+  --duration-slower:  480ms;    /* page-level transitions */
+  --duration-deliberate: 640ms; /* overlays — modal/drawer entry */
+
+  /* Pre-composed transition shorthand (most common cases) */
+  --transition-fast:  140ms var(--ease-standard);   /* default for buttons/inputs */
+  --transition-base:  200ms var(--ease-standard);
+  --transition-slow:  320ms var(--ease-standard);
 }
 
-/* ============================================================
-   ATTRUS / Cabiros — MOTION (durations + easings for transitions/animations)
-   ============================================================ */
-
-:root {
-  /* Easing — single curve across the system; "out-expo-ish" for snappy UI */
-  --ease-standard: cubic-bezier(.2, .8, .2, 1);
-  --ease-emphasis: cubic-bezier(.2, .9, .15, 1);   /* slightly more overshoot — for entries */
-  --ease-linear:   linear;                         /* loading bars, scrubbers */
-
-  /* Durations — paired with --ease-standard unless noted */
-  --duration-instant: 80ms;     /* micro feedback (tap echo) */
-  --duration-fast:    140ms;    /* hover, focus, color shifts */
-  --duration-base:    200ms;    /* default for most UI */
-  --duration-slow:    320ms;    /* expansions, reveals */
-  --duration-slower:  480ms;    /* page-level transitions */
-  --duration-deliberate: 640ms; /* overlays — modal/drawer entry */
-
-  /* Pre-composed transition shorthand (most common cases) */
-  --transition-fast:  140ms var(--ease-standard);   /* default for buttons/inputs */
-  --transition-base:  200ms var(--ease-standard);
-  --transition-slow:  320ms var(--ease-standard);
+/* ============================================================
+   ATTRUS / Cabiros — TYPOGRAPHY TOKENS (Lato family per brand manual)
+   Font families, weights, type scale, line heights, letter spacing.
+   Ready-to-use type CLASSES live in ../typography/index.css.
+   ============================================================ */
+
+:root {
+  --font-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
+  --font-display: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
+
+  /* Weights (per manual) */
+  --w-light: 300;
+  --w-regular: 400;
+  --w-medium: 500;  /* Lato doesn't ship 500 natively; maps to 400 */
+  --w-semibold: 600;
+  --w-bold: 700;
+  --w-extrabold: 800;
+  --w-black: 900;
+
+  /* Type scale  (px) */
+  --fs-xxs: 10px;
+  --fs-xs:  11px;
+  --fs-sm:  12px;
+  --fs-md:  13px;  /* default UI */
+  --fs-base:14px;  /* default body */
+  --fs-lg:  16px;
+  --fs-xl:  18px;
+  --fs-2xl: 20px;
+  --fs-3xl: 24px;
+  --fs-4xl: 28px;
+  --fs-5xl: 32px;
+  --fs-6xl: 40px;
+  --fs-7xl: 56px;
+  --fs-8xl: 72px;
+
+  /* Line heights */
+  --lh-tight:   1.15;
+  --lh-snug:    1.3;
+  --lh-normal:  1.5;
+  --lh-relaxed: 1.65;
+
+  /* Letter spacing — per Lato manual rules */
+  --ls-display: -0.03em;  /* 32–80px headlines */
+  --ls-tight:   -0.01em;  /* large numerics / stat values — between display and body */
+  --ls-title:   -0.015em; /* 16–32px titles (manual says -5%, but -5% looks tight on screens; using -1.5%) */
+  --ls-body:    0em;      /* <16px body */
+  --ls-label:   0.02em;   /* small caps / labels */
+  --ls-caps:    0.08em;
 }
 
-/* ============================================================
-   ATTRUS / Cabiros — TYPOGRAPHY TOKENS (Lato family per brand manual)
-   Font families, weights, type scale, line heights, letter spacing.
-   Ready-to-use type CLASSES live in ../typography/index.css.
-   ============================================================ */
-
-:root {
-  --font-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
-  --font-display: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
-
-  /* Weights (per manual) */
-  --w-light: 300;
-  --w-regular: 400;
-  --w-medium: 500;  /* Lato doesn't ship 500 natively; maps to 400 */
-  --w-semibold: 600;
-  --w-bold: 700;
-  --w-extrabold: 800;
-  --w-black: 900;
-
-  /* Type scale  (px) */
-  --fs-xxs: 10px;
-  --fs-xs:  11px;
-  --fs-sm:  12px;
-  --fs-md:  13px;  /* default UI */
-  --fs-base:14px;  /* default body */
-  --fs-lg:  16px;
-  --fs-xl:  18px;
-  --fs-2xl: 20px;
-  --fs-3xl: 24px;
-  --fs-4xl: 28px;
-  --fs-5xl: 32px;
-  --fs-6xl: 40px;
-  --fs-7xl: 56px;
-  --fs-8xl: 72px;
-
-  /* Line heights */
-  --lh-tight:   1.15;
-  --lh-snug:    1.3;
-  --lh-normal:  1.5;
-  --lh-relaxed: 1.65;
-
-  /* Letter spacing — per Lato manual rules */
-  --ls-display: -0.03em;  /* 32–80px headlines */
-  --ls-tight:   -0.01em;  /* large numerics / stat values — between display and body */
-  --ls-title:   -0.015em; /* 16–32px titles (manual says -5%, but -5% looks tight on screens; using -1.5%) */
-  --ls-body:    0em;      /* <16px body */
-  --ls-label:   0.02em;   /* small caps / labels */
-  --ls-caps:    0.08em;
+/* ============================================================
+   ATTRUS / Cabiros — DARK THEME
+   [data-theme="dark"] remaps the AMBIENT semantic tokens to a dark
+   ink ramp. Components consume semantic tokens, so they flip
+   automatically — no per-component dark CSS needed.
+   Philosophy: the INVERSE layer stays a deliberate, brand-tinted
+   dark even here (see note in color-semantic.css), distinct from the
+   ambient surface. Raw palette + brand/accent scales are theme-agnostic.
+   Toggle via JS: set data-theme on <html>, persist to localStorage,
+   seed from prefers-color-scheme.
+   ============================================================ */
+
+[data-theme="dark"] {
+  color-scheme: dark;
+
+  /* Ambient surfaces — dark ink ramp (canvas deepest → surface raised) */
+  --color-background-canvas:   var(--color-ink-deep);     /* #0A1128 — app background */
+  --color-background-surface:  var(--color-ink-raised);   /* #111A3D — cards sit above canvas */
+  --color-background-subtle:   var(--color-ink-base);     /* #0B1230 — nested rows / wells-lite */
+  --color-background-raised:   var(--color-ink-raised);
+  --color-background-sunken:   color-mix(in srgb, var(--color-pure-black) 28%, var(--color-ink-deep)); /* inputs / wells — deeper */
+  --color-background-hover:    color-mix(in srgb, var(--color-pure-white) 6%,  var(--color-ink-raised));
+  --color-background-press:    color-mix(in srgb, var(--color-pure-white) 10%, var(--color-ink-raised));
+  --color-background-selected: var(--color-background-inverse-selected);
+
+  /* Enterprise primary is Navy (#002142) — near-ink, so it vanishes as a solid
+     fill on the dark canvas. Lift it to a visible deep-blue in dark (Business,
+     via [data-product=business], re-asserts its own #1F6FD6 and wins by order). */
+  --color-brand-solid:        var(--color-brand-primary-400);  /* #2F4F75 — reads on ink */
+  --color-brand-solid-hover:  var(--color-brand-primary-300);  /* #5F7596 */
+  --color-brand-solid-active: var(--color-brand-primary-500);  /* settles to navy */
+
+  /* Inverse layer — stays distinct: a brand-tinted dark, lifted off the ambient ink */
+  --color-background-inverse:         color-mix(in srgb, var(--color-brand-solid) 24%, var(--color-ink-base));
+  --color-background-inverse-surface: color-mix(in srgb, var(--color-brand-solid) 30%, var(--color-ink-raised));
+  --color-background-inverse-subtle:  color-mix(in srgb, var(--color-brand-solid) 18%, var(--color-ink-deep));
+
+  /* Foreground — light on dark */
+  --color-foreground-default:     var(--color-neutral-50);
+  --color-foreground-secondary:   var(--color-neutral-300);
+  --color-foreground-muted:       var(--color-neutral-400);
+  --color-foreground-placeholder: var(--color-neutral-600);
+  --color-foreground-accent:      var(--color-brand-accent-400);   /* Sky lightens on dark for contrast (light used accent-700) */
+  --color-foreground-highlight:   var(--color-brand-accent-300);   /* links on dark */
+  --color-foreground-brand:       var(--color-brand-secondary-200);/* Navy is invisible on dark → light royal */
+  --color-foreground-disabled:    var(--color-neutral-600);
+  /* --color-foreground-on-solid stays neutral-0 (white text on Royal/accent fills) */
+
+  /* Borders — white-alpha hairlines */
+  --color-border-subtle:  color-mix(in srgb, var(--color-pure-white) 8%,  transparent);
+  --color-border-default: color-mix(in srgb, var(--color-pure-white) 12%, transparent);
+  --color-border-strong:  color-mix(in srgb, var(--color-pure-white) 20%, transparent);
+  /* focus / accent borders stay Sky-500 — reads well on dark */
+
+  /* Feedback pairs flip: light foreground + dark-tinted background */
+  --color-feedback-success-foreground: var(--color-success-300);
+  --color-feedback-success-background: color-mix(in srgb, var(--color-success-500) 18%, var(--color-ink-base));
+  --color-feedback-success-border:     color-mix(in srgb, var(--color-success-500) 34%, transparent);
+  --color-feedback-warning-foreground: var(--color-warning-300);
+  --color-feedback-warning-background: color-mix(in srgb, var(--color-warning-500) 18%, var(--color-ink-base));
+  --color-feedback-warning-border:     color-mix(in srgb, var(--color-warning-500) 34%, transparent);
+  --color-feedback-danger-foreground:  var(--color-danger-300);
+  --color-feedback-danger-background:  color-mix(in srgb, var(--color-danger-500) 18%, var(--color-ink-base));
+  --color-feedback-danger-border:      color-mix(in srgb, var(--color-danger-500) 34%, transparent);
+  --color-feedback-info-foreground:    var(--color-info-300);
+  --color-feedback-info-background:    color-mix(in srgb, var(--color-info-500) 18%, var(--color-ink-base));
+  --color-feedback-info-border:        color-mix(in srgb, var(--color-info-500) 34%, transparent);
+
+  /* Surface-top sheen reads wrong on dark → neutralize */
+  --grad-surface-top: linear-gradient(180deg, color-mix(in srgb, var(--color-pure-white) 6%, transparent) 0%, transparent 100%);
+
+  /* Data-viz categorical — lift the dark hues so every series reads on dark ink.
+     Ramps (seq/div) + structure follow the semantic tokens already remapped above. */
+  --dataviz-cat-1: #6B95FB;  /* Royal 300 — 500 is invisible on dark */
+  --dataviz-cat-2: #7AB8FF;  /* Sky, lightened */
+  --dataviz-cat-3: #2BC2B1;  /* Teal, lightened */
+  --dataviz-cat-4: #E0AC45;  /* Gold, lightened */
+  --dataviz-cat-5: #9385F2;  /* Violet, lightened */
+  --dataviz-cat-6: #E87BA1;  /* Rose, lightened */
+  --dataviz-cat-7: #3FC4DC;  /* Cyan, lightened */
+  --dataviz-cat-8: #A6B0C4;  /* Slate, lightened */
 }
 
-/* ============================================================
-   ATTRUS / Cabiros — DARK THEME
-   [data-theme="dark"] remaps the AMBIENT semantic tokens to a dark
-   ink ramp. Components consume semantic tokens, so they flip
-   automatically — no per-component dark CSS needed.
-   Philosophy: the INVERSE layer stays a deliberate, brand-tinted
-   dark even here (see note in color-semantic.css), distinct from the
-   ambient surface. Raw palette + brand/accent scales are theme-agnostic.
-   Toggle via JS: set data-theme on <html>, persist to localStorage,
-   seed from prefers-color-scheme.
-   ============================================================ */
-
-[data-theme="dark"] {
-  color-scheme: dark;
-
-  /* Ambient surfaces — dark ink ramp (canvas deepest → surface raised) */
-  --color-background-canvas:   var(--color-ink-deep);     /* #0A1128 — app background */
-  --color-background-surface:  var(--color-ink-raised);   /* #111A3D — cards sit above canvas */
-  --color-background-subtle:   var(--color-ink-base);     /* #0B1230 — nested rows / wells-lite */
-  --color-background-raised:   var(--color-ink-raised);
-  --color-background-sunken:   color-mix(in srgb, var(--color-pure-black) 28%, var(--color-ink-deep)); /* inputs / wells — deeper */
-  --color-background-hover:    color-mix(in srgb, var(--color-pure-white) 6%,  var(--color-ink-raised));
-  --color-background-press:    color-mix(in srgb, var(--color-pure-white) 10%, var(--color-ink-raised));
-  --color-background-selected: var(--color-background-inverse-selected);
-
-  /* Inverse layer — stays distinct: a brand-tinted dark, lifted off the ambient ink */
-  --color-background-inverse:         color-mix(in srgb, var(--color-brand-primary-500) 24%, var(--color-ink-base));
-  --color-background-inverse-surface: color-mix(in srgb, var(--color-brand-primary-500) 30%, var(--color-ink-raised));
-  --color-background-inverse-subtle:  color-mix(in srgb, var(--color-brand-primary-500) 18%, var(--color-ink-deep));
-
-  /* Foreground — light on dark */
-  --color-foreground-default:     var(--color-neutral-50);
-  --color-foreground-secondary:   var(--color-neutral-300);
-  --color-foreground-muted:       var(--color-neutral-400);
-  --color-foreground-placeholder: var(--color-neutral-600);
-  --color-foreground-accent:      var(--color-brand-accent-400);   /* Sky lightens on dark for contrast (light used accent-700) */
-  --color-foreground-highlight:   var(--color-brand-accent-300);   /* links on dark */
-  --color-foreground-brand:       var(--color-brand-secondary-200);/* Navy is invisible on dark → light royal */
-  --color-foreground-disabled:    var(--color-neutral-600);
-  /* --color-foreground-on-solid stays neutral-0 (white text on Royal/accent fills) */
-
-  /* Borders — white-alpha hairlines */
-  --color-border-subtle:  color-mix(in srgb, var(--color-pure-white) 8%,  transparent);
-  --color-border-default: color-mix(in srgb, var(--color-pure-white) 12%, transparent);
-  --color-border-strong:  color-mix(in srgb, var(--color-pure-white) 20%, transparent);
-  /* focus / accent borders stay Sky-500 — reads well on dark */
-
-  /* Feedback pairs flip: light foreground + dark-tinted background */
-  --color-feedback-success-foreground: var(--color-success-300);
-  --color-feedback-success-background: color-mix(in srgb, var(--color-success-500) 18%, var(--color-ink-base));
-  --color-feedback-success-border:     color-mix(in srgb, var(--color-success-500) 34%, transparent);
-  --color-feedback-warning-foreground: var(--color-warning-300);
-  --color-feedback-warning-background: color-mix(in srgb, var(--color-warning-500) 18%, var(--color-ink-base));
-  --color-feedback-warning-border:     color-mix(in srgb, var(--color-warning-500) 34%, transparent);
-  --color-feedback-danger-foreground:  var(--color-danger-300);
-  --color-feedback-danger-background:  color-mix(in srgb, var(--color-danger-500) 18%, var(--color-ink-base));
-  --color-feedback-danger-border:      color-mix(in srgb, var(--color-danger-500) 34%, transparent);
-  --color-feedback-info-foreground:    var(--color-info-300);
-  --color-feedback-info-background:    color-mix(in srgb, var(--color-info-500) 18%, var(--color-ink-base));
-  --color-feedback-info-border:        color-mix(in srgb, var(--color-info-500) 34%, transparent);
-
-  /* Surface-top sheen reads wrong on dark → neutralize */
-  --grad-surface-top: linear-gradient(180deg, color-mix(in srgb, var(--color-pure-white) 6%, transparent) 0%, transparent 100%);
-
-  /* Data-viz categorical — lift the dark hues so every series reads on dark ink.
-     Ramps (seq/div) + structure follow the semantic tokens already remapped above. */
-  --dataviz-cat-1: #6B95FB;  /* Royal 300 — 500 is invisible on dark */
-  --dataviz-cat-2: #7AB8FF;  /* Sky, lightened */
-  --dataviz-cat-3: #2BC2B1;  /* Teal, lightened */
-  --dataviz-cat-4: #E0AC45;  /* Gold, lightened */
-  --dataviz-cat-5: #9385F2;  /* Violet, lightened */
-  --dataviz-cat-6: #E87BA1;  /* Rose, lightened */
-  --dataviz-cat-7: #3FC4DC;  /* Cyan, lightened */
-  --dataviz-cat-8: #A6B0C4;  /* Slate, lightened */
+/* ============================================================
+   ATTRUS / Cabiros — SEMANTIC TYPE CLASSES (ready-to-use)
+   Base document styles + the display/heading/body/utility classes.
+   Consumes typography + color tokens (see ../tokens).
+   ============================================================ */
+
+html, body {
+  font-family: var(--font-sans);
+  font-size: var(--fs-base);
+  line-height: var(--lh-normal);
+  color: var(--color-foreground-default);
+  background: var(--color-background-canvas);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-/* ============================================================
-   ATTRUS / Cabiros — SEMANTIC TYPE CLASSES (ready-to-use)
-   Base document styles + the display/heading/body/utility classes.
-   Consumes typography + color tokens (see ../tokens).
-   ============================================================ */
-
-html, body {
-  font-family: var(--font-sans);
-  font-size: var(--fs-base);
-  line-height: var(--lh-normal);
-  color: var(--color-foreground-default);
-  background: var(--color-background-canvas);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.display-xl { font-family: var(--font-display); font-weight: var(--w-black);    font-size: var(--fs-8xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
-.display-lg { font-family: var(--font-display); font-weight: var(--w-extrabold);font-size: var(--fs-7xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
-.display    { font-family: var(--font-display); font-weight: var(--w-bold);     font-size: var(--fs-6xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
-
-h1, .h1 { font-weight: var(--w-bold);     font-size: var(--fs-5xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
-h2, .h2 { font-weight: var(--w-bold);     font-size: var(--fs-4xl); line-height: var(--lh-snug);  letter-spacing: var(--ls-title); }
-h3, .h3 { font-weight: var(--w-bold);     font-size: var(--fs-3xl); line-height: var(--lh-snug);  letter-spacing: var(--ls-title); }
-h4, .h4 { font-weight: var(--w-semibold); font-size: var(--fs-2xl); line-height: var(--lh-snug);  letter-spacing: var(--ls-title); }
-h5, .h5 { font-weight: var(--w-semibold); font-size: var(--fs-xl);  line-height: var(--lh-snug);  letter-spacing: var(--ls-title); }
-h6, .h6 { font-weight: var(--w-semibold); font-size: var(--fs-lg);  line-height: var(--lh-snug);  letter-spacing: var(--ls-body);  }
-
-.body-lg  { font-size: var(--fs-lg);  line-height: var(--lh-relaxed); }
-.body     { font-size: var(--fs-base);line-height: var(--lh-normal);  }
-.body-sm  { font-size: var(--fs-md);  line-height: var(--lh-normal);  }
-.caption  { font-size: var(--fs-sm);  line-height: var(--lh-normal); color: var(--color-foreground-muted); }
-.overline { font-size: var(--fs-xs);  line-height: var(--lh-normal); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-foreground-muted); font-weight: var(--w-semibold); }
-.label    { font-size: var(--fs-sm);  font-weight: var(--w-semibold); letter-spacing: var(--ls-label); }
-
-.mono, code, pre, kbd { font-family: var(--font-mono); font-size: .92em; }
-
-/* Numbers that must line up in tables */
-.tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' on, 'lnum' on; }
-
-/* Utility text colors */
-.fg-default     { color: var(--color-foreground-default); }
-.fg-secondary   { color: var(--color-foreground-secondary); }
-.color-foreground-muted       { color: var(--color-foreground-muted); }
-.fg-accent      { color: var(--color-foreground-accent); }
-.fg-highlight   { color: var(--color-foreground-highlight); }
-.fg-placeholder { color: var(--color-foreground-placeholder); }
-
-/* Inverse layer helper — apply to any container to flip to dark */
-.inverse {
-  background: var(--color-background-inverse);
-  color: var(--color-foreground-inverse-default);
-}
-.inverse .fg-secondary { color: var(--color-foreground-inverse-secondary); }
-.inverse .color-foreground-muted     { color: var(--color-foreground-inverse-muted); }
+.display-xl { font-family: var(--font-display); font-weight: var(--w-black);    font-size: var(--fs-8xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
+.display-lg { font-family: var(--font-display); font-weight: var(--w-extrabold);font-size: var(--fs-7xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
+.display    { font-family: var(--font-display); font-weight: var(--w-bold);     font-size: var(--fs-6xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
+
+h1, .h1 { font-weight: var(--w-bold);     font-size: var(--fs-5xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
+h2, .h2 { font-weight: var(--w-bold);     font-size: var(--fs-4xl); line-height: var(--lh-snug);  letter-spacing: var(--ls-title); }
+h3, .h3 { font-weight: var(--w-bold);     font-size: var(--fs-3xl); line-height: var(--lh-snug);  letter-spacing: var(--ls-title); }
+h4, .h4 { font-weight: var(--w-semibold); font-size: var(--fs-2xl); line-height: var(--lh-snug);  letter-spacing: var(--ls-title); }
+h5, .h5 { font-weight: var(--w-semibold); font-size: var(--fs-xl);  line-height: var(--lh-snug);  letter-spacing: var(--ls-title); }
+h6, .h6 { font-weight: var(--w-semibold); font-size: var(--fs-lg);  line-height: var(--lh-snug);  letter-spacing: var(--ls-body);  }
+
+.body-lg  { font-size: var(--fs-lg);  line-height: var(--lh-relaxed); }
+.body     { font-size: var(--fs-base);line-height: var(--lh-normal);  }
+.body-sm  { font-size: var(--fs-md);  line-height: var(--lh-normal);  }
+.caption  { font-size: var(--fs-sm);  line-height: var(--lh-normal); color: var(--color-foreground-muted); }
+.overline { font-size: var(--fs-xs);  line-height: var(--lh-normal); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-foreground-muted); font-weight: var(--w-semibold); }
+.label    { font-size: var(--fs-sm);  font-weight: var(--w-semibold); letter-spacing: var(--ls-label); }
+
+.mono, code, pre, kbd { font-family: var(--font-mono); font-size: .92em; }
+
+/* Numbers that must line up in tables */
+.tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' on, 'lnum' on; }
+
+/* Utility text colors */
+.fg-default     { color: var(--color-foreground-default); }
+.fg-secondary   { color: var(--color-foreground-secondary); }
+.color-foreground-muted       { color: var(--color-foreground-muted); }
+.fg-accent      { color: var(--color-foreground-accent); }
+.fg-highlight   { color: var(--color-foreground-highlight); }
+.fg-placeholder { color: var(--color-foreground-placeholder); }
+
+/* Inverse layer helper — apply to any container to flip to dark */
+.inverse {
+  background: var(--color-background-inverse);
+  color: var(--color-foreground-inverse-default);
+}
+.inverse .fg-secondary { color: var(--color-foreground-inverse-secondary); }
+.inverse .color-foreground-muted     { color: var(--color-foreground-inverse-muted); }
 .inverse .fg-accent    { color: var(--color-foreground-inverse-accent); }