@attrus-ds/core 0.1.0

package/dist/css/tokens.css

@@ -0,0 +1,691 @@
+/* ============================================================
+   CABIROS — ATTRUS Design System
+   colors_and_type.css
+   ----
+   Sober, serious, professional. Dashboards for financial
+   operations across LATAM. Cool bluish grays. Deep navy.
+   Primary brand blue. Liquid-glass-friendly translucency.
+   ============================================================ */
+
+/* ---------- Webfont: Lato ---------- */
+
+:root {
+  /* ============================================================
+     1.  BASE PALETTE  —  raw color tokens
+     ============================================================ */
+
+  /* --- 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;
+
+  /* ============================================================
+     2.  SEMANTIC TOKENS — reference the base palette
+     Roles: default | secondary | muted | accent | placeholder
+     Contexts: fg (text/icon), bg (surface), br (border)
+     ============================================================ */
+
+  /* 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));
+
+  /* ============================================================
+     3.  GRADIENTS  —  primary brand + layers
+     ============================================================ */
+  --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%);
+
+  /* ============================================================
+     3b.  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);
+     ramps + structure follow semantic tokens automatically.
+     ============================================================ */
+  /* 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 */
+
+  /* ============================================================
+     4.  LIQUID GLASS  —  transparent / frosted layers
+     Use with backdrop-filter: blur().
+     ============================================================ */
+  --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);
+
+  /* ============================================================
+     5.  RADII  —  mostly softly rounded; buttons fully rounded
+     ============================================================ */
+  --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 */
+
+  /* ============================================================
+     6.  SHADOWS  —  soft, blue-tinted, multi-layer
+     ============================================================ */
+  --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);
+
+  /* ============================================================
+     7.  SPACING  —  4px base; dense, data-heavy layouts
+     ============================================================ */
+  --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;
+
+  /* ============================================================
+     7b. ICONOGRAPHY  —  Lucide; sized to pair with type scale
+     ============================================================ */
+  --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 */
+
+  /* ============================================================
+     7c. MOTION  —  durations + easings for transitions/animations
+     ============================================================ */
+  /* 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);
+
+  /* ============================================================
+     8.  TYPOGRAPHY  —  Lato family per brand manual
+     ============================================================ */
+  --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;
+}
+
+/* ============================================================
+   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 :root), distinct from the ambient
+   surface. Raw palette + brand/accent scales are theme-agnostic.
+   Toggle via JS (theme-toggle.js): sets data-theme on <html>,
+   persists to localStorage, seeds 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 */
+}
+
+/* ============================================================
+   9.  SEMANTIC TYPE CLASSES  —  ready-to-use
+   ============================================================ */
+
+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); }
+.inverse .fg-accent    { color: var(--color-foreground-inverse-accent); }
+
+
+/* ---- doc-back link (fixed top-left on every preview page) ---- */
+.doc-back {
+  position: fixed;
+  top: var(--space-5);
+  left: var(--space-5);
+  z-index: 1000;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-family: var(--font-sans);
+  font-size: var(--fs-xs);
+  font-weight: var(--w-semibold);
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--color-foreground-secondary);
+  text-decoration: none;
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-pill);
+  background: var(--color-background-surface);
+  box-shadow: var(--shadow-sm);
+  transition: var(--transition-fast);
+}
+.doc-back:hover {
+  color: var(--color-foreground-default);
+  border-color: var(--color-border-strong);
+  box-shadow: var(--shadow-md);
+}
+.doc-back svg, .doc-back i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }