@bsuite/theme 0.4.2 → 0.6.0

package/README.md

@@ -126,6 +126,18 @@ Braden keeps separate corporate identity tokens in `@bsuite/theme/braden-css`: B
 
 WCAG AA compliance: use semantic text tokens (`text-foreground`, `text-muted-foreground`, `text-text-on-primary`, `text-text-on-accent`) rather than raw `text-white`/`text-black`. Dark-surface text is capped at L=0.94 for extended-session comfort.
 
+## Text-role contract (v0.6.0)
+
+Six measured tiers — `--role-text-heading`, `--role-text-body`, `--role-text-secondary`, `--role-text-muted`, `--role-text-subtle`, `--role-text-disabled` — each with documented WCAG contrast in both modes. Full numbers + methodology: `docs/TOKEN-MAPPING.md` §8.1.
+
+## Canonical gradient (v0.6.0)
+
+Exactly one decorative accent gradient exists suite-wide — `--gradient-accent` / `.bsuite-accent-gradient` (`--role-primary` → `--role-accent`). Marketing heroes only, never functional text. `docs/TOKEN-MAPPING.md` §8.2.
+
+## Grid/dot doctrine (v0.6.0)
+
+`<HeroGrid>` (public/pre-auth hero bands) and `<DotPattern>` (authenticated shells, `@bsuite/ui`) are mutually exclusive per context and enforced by `@bsuite/dry-lint`'s `no-grid-dot-doctrine-violation` rule. `docs/TOKEN-MAPPING.md` §8.3.
+
 ## License
 
 UNLICENSED — internal BSuite use only.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsuite/theme",
-  "version": "0.4.2",
+  "version": "0.6.0",
   "type": "module",
   "license": "UNLICENSED",
   "publishConfig": {

package/src/css/braden.css

@@ -164,6 +164,11 @@
   --shadow-sm:  0 1px 2px oklch(0 0 0 / 0.08);
   --shadow-md:  0 4px 6px oklch(0 0 0 / 0.10), 0 2px 4px oklch(0 0 0 / 0.06);
   --shadow-lg:  0 10px 15px oklch(0 0 0 / 0.10), 0 4px 6px oklch(0 0 0 / 0.05);
+
+  /* Card glow is a dark-mode-only device (see .dark below); light mode
+     stays border-only, consistent with the corporate "no neon glow" rule. */
+  --glow-card:       none;
+  --glow-card-hover: none;
 }
 
 /* ============================================================
@@ -206,4 +211,20 @@
   --muted-foreground:var(--braden-dark-text-muted);
   --border:          oklch(0.30 0.020 250);
   --input:           oklch(0.30 0.020 250);
+
+  /*
+   * Card glow — Braden dark mode gets a restrained gold separation glow,
+   * NOT the D2C neon treatment (no cyan, lower alpha, same two-layer
+   * ring+halo shape for consumer-code parity with @bsuite/theme's D2C
+   * --glow-card). Source is --app-accent (Braden Gold), which is
+   * inherited from :root since this file does not rebind it per-mode.
+   * Deliberately more subdued than D2C to honour the "corporate
+   * subtle, no neon glow" shadow philosophy above, adapted for dark UI
+   * where SOME separation glow is still needed for surface legibility.
+   */
+  --card-glow-source: var(--app-accent, var(--braden-gold-500));
+  --glow-card:       0 0 0 1px color-mix(in oklch, var(--card-glow-source) 18%, transparent),
+                      0 0 10px -4px color-mix(in oklch, var(--card-glow-source) 20%, transparent);
+  --glow-card-hover: 0 0 0 1px color-mix(in oklch, var(--card-glow-source) 26%, transparent),
+                      0 0 14px -4px color-mix(in oklch, var(--card-glow-source) 28%, transparent);
 }

package/src/css/index.css

@@ -1,6 +1,6 @@
 /*
  * @bsuite/theme — root CSS entry point (D2C Neon Electric brand)
- * Version 0.3.0
+ * Version 0.6.0
  *
  * DUAL-BRAND ENTRY POINTS:
  *

package/src/css/utilities.css

@@ -47,6 +47,47 @@
     box-shadow 300ms ease;
 }
 
+/* ============================================================
+   CANONICAL ACCENT GRADIENT — W3 §3.1
+   Exactly ONE gradient exists suite-wide: --role-primary -> --role-accent
+   (Electric Blue -> Cyan by default; follows tenant BrandingProvider
+   overrides automatically via the var() chain). Marketing/pre-auth hero
+   surfaces ONLY — never functional text, labels, or body copy. Apply to
+   a decorative element (underline, badge, background swatch) or to text
+   via `background-clip: text` at the call site — this utility only
+   supplies the gradient itself.
+   ============================================================ */
+.bsuite-accent-gradient {
+  background-image: var(--gradient-accent);
+}
+
+/* ============================================================
+   HERO GRID — W3 §3.3 grid/dot doctrine
+   Public/pre-auth marketing hero bands ONLY. Localised to the hero
+   wrapper (which must be `position: relative`); never full-viewport,
+   never behind authenticated content. Mutually exclusive with the DOT
+   pattern (packages/ui DotPattern), which is authenticated-shell-only.
+   Consumed via the <HeroGrid> component in @bsuite/ui (packages/ui/src/
+   hero-grid.tsx) — do not hand-roll this pattern; the grid/dot lint rule
+   (@bsuite/dry-lint no-grid-dot-doctrine-violation) flags duplicates.
+   Lifted verbatim from braden's `.platform-hero-grid`
+   (braden/src/index.css) so the corporate and D2C marketing surfaces
+   share one visual language for this specific device.
+   ============================================================ */
+.bsuite-hero-grid {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(oklch(0 0 0 / 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, oklch(0 0 0 / 0.03) 1px, transparent 1px);
+  background-size: 32px 32px;
+}
+.dark .bsuite-hero-grid {
+  background-image:
+    linear-gradient(oklch(1 0 0 / 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, oklch(1 0 0 / 0.03) 1px, transparent 1px);
+}
+
 /* ===== prefers-reduced-motion — cap animation duration ===== */
 @media (prefers-reduced-motion: reduce) {
   *,

package/src/css/vars.css

@@ -1,6 +1,6 @@
 /*
  * @bsuite/theme — CSS custom properties (:root + .dark)
- * Version 0.3.0
+ * Version 0.6.0
  *
  * Architecture — 5 layers (inner → outer):
  *   1. Palette  — frozen oklch primitives (--neon-electric-*, --braden-*)
@@ -52,12 +52,17 @@
   --light-bg-accent:    oklch(1     0     0.5);
 
   /* D2C light text scale — hue 260 (cool blue-grey), capped L=0.22.
-     Verified WCAG AA/AAA on --light-bg-primary oklch(0.961 0 0.5). */
-  --light-text-primary:   oklch(0.22 0.015 260);  /* 13.2:1 ✓ AAA */
-  --light-text-secondary: oklch(0.38 0.018 260);  /*  8.1:1 ✓ AAA */
-  --light-text-muted:     oklch(0.52 0.018 260);  /*  4.9:1 ✓ AA  */
-  --light-text-subtle:    oklch(0.60 0.012 260);  /*  3.8:1 ✓ AA large */
-  --light-text-disabled:  oklch(0.72 0.010 260);  /* pair with icon cue */
+     Measured WCAG contrast vs --light-bg-primary oklch(0.961 0 0.5), OKLCH ->
+     linear-sRGB -> WCAG relative-luminance pipeline, round-trip-verified
+     against 6 known hex references (packages/theme/docs/TOKEN-MAPPING.md §8).
+     Ratios re-measured 2026-07-17 (W3 §3.1) — supersede prior approximate
+     inline values; vs --light-bg-accent (bg-panel, pure white) is always
+     HIGHER, so bg-body is the conservative floor for every tier below. */
+  --light-text-primary:   oklch(0.22 0.015 260);  /* 15.46:1 ✓ AAA (large+normal) */
+  --light-text-secondary: oklch(0.38 0.018 260);  /*  8.94:1 ✓ AAA (large+normal) */
+  --light-text-muted:     oklch(0.52 0.018 260);  /*  4.92:1 ✓ AA  (normal, 4.5:1 floor) */
+  --light-text-subtle:    oklch(0.60 0.012 260);  /*  3.52:1 ✓ AA large only (3:1) — ✗ AA normal */
+  --light-text-disabled:  oklch(0.72 0.010 260);  /*  2.21:1 ✗ fails AA at any size — MUST pair with icon cue */
   /* Legacy aliases (kept for consumers that haven't migrated) */
   --light-text-tertiary:   var(--light-text-muted);
   --light-text-quaternary: var(--light-text-subtle);
@@ -91,13 +96,15 @@
   --role-success:     var(--neon-electric-green);   /* oklch(0.723 0.192 149.6) */
   --role-info:        var(--neon-electric-cyan);    /* oklch(0.769 0.132 191.7) */
 
-  /* Text roles */
-  --role-text-body:        var(--light-text-primary);
-  --role-text-secondary:   var(--light-text-secondary);
-  --role-text-muted:       var(--light-text-muted);
-  --role-text-subtle:      var(--light-text-subtle);
-  --role-text-disabled:    var(--light-text-disabled);
-  --role-text-heading:     oklch(0.20 0.018 263);   /* slightly darker + bluer — 14.5:1 ✓ AAA */
+  /* Text roles — six-tier scale (W3 §3.1 contract). Every tier below is
+     measured against --role-bg-body (the conservative floor); all tiers
+     score HIGHER against --role-bg-panel/--role-bg-surface. */
+  --role-text-heading:     oklch(0.20 0.018 263);   /* 16.17:1 ✓ AAA (slightly darker + bluer than body) */
+  --role-text-body:        var(--light-text-primary);   /* 15.46:1 ✓ AAA */
+  --role-text-secondary:   var(--light-text-secondary); /*  8.94:1 ✓ AAA */
+  --role-text-muted:       var(--light-text-muted);     /*  4.92:1 ✓ AA normal */
+  --role-text-subtle:      var(--light-text-subtle);    /*  3.52:1 ✓ AA large only */
+  --role-text-disabled:    var(--light-text-disabled);  /*  2.21:1 ✗ icon cue required */
 
   /* Surface roles */
   --role-bg-body:    var(--light-bg-primary);
@@ -154,6 +161,17 @@
   --color-accent-text:  oklch(0.486 0.084 191.5);  /* Dark cyan — AA on light bg */
   --color-primary-text: oklch(0.485 0.243 263.6);  /* Saturated blue — AA on light bg */
 
+  /* ============================================================
+     CANONICAL ACCENT GRADIENT (W3 §3.1) — exactly ONE gradient
+     exists suite-wide. Marketing/pre-auth heroes ONLY — never on
+     functional text (labels, body copy, buttons). Consumed via the
+     `.bsuite-accent-gradient` utility (utilities.css). App-local
+     decorative gradients (e.g. crm7's `.crm7-gradient`) are
+     quarantined and must not be used for new work — see
+     docs/TOKEN-MAPPING.md §8.
+     ============================================================ */
+  --gradient-accent: linear-gradient(135deg, var(--role-primary), var(--role-accent));
+
   /* ============================================================
      GLOW + SHADOW MULTIPLIERS
      ============================================================ */
@@ -161,24 +179,52 @@
   --shadow-strength: 1;
 
   /* ============================================================
-     SRGB FALLBACKS (for browsers without oklch support)
-     Tested against Chrome 105-. Values are closest sRGB equivalents.
+     CARD SURFACE GLOW — subtle neon separation, dark mode only.
+     Light mode keeps the existing border-only treatment (--role-border);
+     these resolve to `none` here so any consumer applying the utility
+     unconditionally (i.e. without a `dark:` guard) degrades safely.
      ============================================================ */
-  @supports not (color: oklch(0 0 0)) {
-    --neon-electric-blue:     #3b82f6;
-    --neon-electric-cyan:     #06b6d4;
-    --neon-electric-indigo:   #6366f1;
-    --neon-electric-purple:   #a855f7;
-    --neon-electric-magenta:  #f472b6;
+  --card-glow-source: var(--app-accent, var(--role-accent));
+  --glow-card:         none;
+  --glow-card-hover:   none;
+}
+
+/* ============================================================
+   SRGB FALLBACKS (for browsers without oklch support) — W3 §3.4
+   True-source hexes, each re-derived directly from its oklch token
+   (OKLCH -> OKLab -> linear-sRGB -> gamma-encoded sRGB) rather than
+   eyeballed against a Tailwind palette. Round-trip-verified: every
+   value below computes ΔE(OKLab) < 0.01 against its oklch token —
+   at least twice inside the < 0.02 acceptance bar (most values are
+   one to two orders of magnitude inside it; see docs/TOKEN-MAPPING.md
+   §8 for the full per-token ΔE table). The prior Tailwind-palette-
+   derived hexes were ΔE 0.03-0.10 off.
+
+   Deliberately declared at the TOP LEVEL, not nested inside another
+   `:root { }` block: engines that lack `oklch()` support predate CSS
+   nesting too, so a `@supports` block nested inside `:root` would be
+   silently dropped by exactly the browsers it's meant to serve when
+   this file is consumed raw (unbundled). It works when bundled
+   through the Tailwind v4 / LightningCSS pipeline only because that
+   pipeline hoists nested at-rules — this top-level form is correct
+   for both the raw and the bundled case.
+   ============================================================ */
+@supports not (color: oklch(0 0 0)) {
+  :root {
+    --neon-electric-blue:     #2563eb;
+    --neon-electric-cyan:     #00cec9;
+    --neon-electric-indigo:   #4f46e5;
+    --neon-electric-purple:   #6c5ce7;
+    --neon-electric-magenta:  #fd79a8;
     --neon-electric-pink:     #ec4899;
-    --neon-electric-coral:    #f87171;
-    --neon-electric-orange:   #f97316;
-    --neon-electric-yellow:   #fbbf24;
+    --neon-electric-coral:    #ff4757;
+    --neon-electric-orange:   #ff7675;
+    --neon-electric-yellow:   #fdcb6e;
     --neon-electric-green:    #22c55e;
-    --neon-electric-lavender: #c084fc;
-    --role-error:             #a855f7;
-    --role-destructive:       #a855f7;
-    --light-text-primary:     #1e1f2e;
+    --neon-electric-lavender: #a29bfe;
+    --role-error:             #6c5ce7;
+    --role-destructive:       #6c5ce7;
+    --light-text-primary:     #171b22;
     --dark-text-primary:      #e8eaf6;
   }
 }
@@ -197,12 +243,16 @@
   /* D2C dark text scale — hue 260, capped L=0.94.
      Pure white (L=1.0) is BANNED as a text token.
      Eye-strain: 16:1 → ~14:1; perceived glare drops significantly.
-     Verified WCAG AA on --dark-bg-primary oklch(0.166 0.026 269.4). */
-  --dark-text-primary:   oklch(0.94 0.012 260);  /* body     — ~13.9:1 ✓ AAA */
-  --dark-text-secondary: oklch(0.82 0.015 260);  /* labels   —  ~9.8:1 ✓ AAA */
-  --dark-text-muted:     oklch(0.68 0.018 260);  /* metadata —  ~5.6:1 ✓ AA  */
-  --dark-text-subtle:    oklch(0.56 0.015 260);  /* placeholders — ~3.6:1 ✓ AA large */
-  --dark-text-disabled:  oklch(0.44 0.010 260);  /* disabled — pair with icon cue */
+     Measured WCAG contrast vs --dark-bg-primary oklch(0.166 0.026 269.4)
+     via the same OKLCH -> linear-sRGB -> WCAG pipeline as the light scale
+     above (re-measured 2026-07-17, W3 §3.1 — supersedes prior approximate
+     inline values). vs --role-bg-surface/--role-bg-panel is always HIGHER,
+     so bg-body is the conservative floor. */
+  --dark-text-primary:   oklch(0.94 0.012 260);  /* body     — 16.16:1 ✓ AAA */
+  --dark-text-secondary: oklch(0.82 0.015 260);  /* labels   — 11.04:1 ✓ AAA */
+  --dark-text-muted:     oklch(0.68 0.018 260);  /* metadata —  6.69:1 ✓ AA (normal) */
+  --dark-text-subtle:    oklch(0.56 0.015 260);  /* placeholders —  4.14:1 ✓ AA large only — ✗ AA normal */
+  --dark-text-disabled:  oklch(0.44 0.010 260);  /* disabled —  2.48:1 ✗ fails AA at any size — MUST pair with icon cue */
   /* Legacy aliases */
   --dark-text-tertiary:   var(--dark-text-muted);
   --dark-text-quaternary: var(--dark-text-disabled);
@@ -210,13 +260,13 @@
   --dark-border: oklch(0.428 0.015 248.2);
   --dark-hover:  oklch(0.39  0.035 265);
 
-  /* Rebind roles to dark-mode surface values */
-  --role-text-body:      var(--dark-text-primary);
-  --role-text-secondary: var(--dark-text-secondary);
-  --role-text-muted:     var(--dark-text-muted);
-  --role-text-subtle:    var(--dark-text-subtle);
-  --role-text-disabled:  var(--dark-text-disabled);
-  --role-text-heading:   oklch(0.92 0.014 260);  /* ~12.8:1 ✓ AAA */
+  /* Rebind roles to dark-mode surface values — six-tier scale (W3 §3.1). */
+  --role-text-heading:   oklch(0.92 0.014 260);  /* 15.21:1 ✓ AAA */
+  --role-text-body:      var(--dark-text-primary);   /* 16.16:1 ✓ AAA */
+  --role-text-secondary: var(--dark-text-secondary); /* 11.04:1 ✓ AAA */
+  --role-text-muted:     var(--dark-text-muted);     /*  6.69:1 ✓ AA normal */
+  --role-text-subtle:    var(--dark-text-subtle);    /*  4.14:1 ✓ AA large only */
+  --role-text-disabled:  var(--dark-text-disabled);  /*  2.48:1 ✗ icon cue required */
 
   --role-bg-body:    var(--dark-bg-primary);
   --role-bg-surface: var(--dark-bg-secondary);
@@ -233,5 +283,22 @@
   --glow-strength:   0.6;
   --shadow-strength: 0.8;
 
+  /*
+   * Card glow — subtle neon separation for card surfaces, dark mode only.
+   * Derived from the app's accent colour (--app-accent, falling back to
+   * the shared --role-accent default) via color-mix() so per-tenant
+   * BrandingProvider overrides and per-app brand accents (Conduit green,
+   * R80.3 amber, etc.) automatically re-colour the glow. Two layers:
+   * a 1px accent ring (edge definition, replaces a hard border) plus a
+   * soft negative-spread halo (ambient separation). Kept subtle by
+   * design — this is surface separation, not a decorative outline.
+   */
+  --glow-card:
+    0 0 0 1px color-mix(in oklch, var(--card-glow-source) 30%, transparent),
+    0 0 14px -4px color-mix(in oklch, var(--card-glow-source) 35%, transparent);
+  --glow-card-hover:
+    0 0 0 1px color-mix(in oklch, var(--card-glow-source) 42%, transparent),
+    0 0 20px -4px color-mix(in oklch, var(--card-glow-source) 48%, transparent);
+
   /* Shadcn bridge picks up rebindings automatically via var() chain */
 }

package/src/css/runtime-branding.css

@@ -1,22 +0,0 @@
-/*
- * runtime-branding.css — populated at runtime by <BrandingProvider>
- *
- * DO NOT add static values here. BrandingProvider reads the tenant's
- * branding JSON from Supabase and calls
- *   document.documentElement.style.setProperty('--primary', value)
- * for each key. This file is a documentation placeholder only.
- *
- * Keys populated at runtime (if tenant has branding configured):
- *   --primary         (oklch string)
- *   --accent          (oklch string)
- *   --accent-primary  (oklch string)
- *   --app-primary     (oklch string)
- *   --app-accent      (oklch string)
- * Logo URLs are injected via JS into CSS vars:
- *   --logo-url        (url() string)
- *   --mark-url        (url() string)
- */
-
-:root[data-branding-loaded="true"] {
-  /* intentionally empty — BrandingProvider injects vars directly via JS */
-}

package/src/css/tokens-brand-corporate-braden.css

@@ -1,43 +0,0 @@
-/*
- * @bsuite/theme — tokens-brand-corporate-braden.css
- *
- * Braden corporate brand deviation.
- * Applied via .theme-braden or data-brand="braden" — NEVER auto-applied.
- *
- * ⚠️  This file is EXEMPT from the D2C oklch-only rule (BRADEN-EXEMPT).
- *     Do NOT import this file from index.css or any D2C app entry point.
- *     Braden's own stylesheet opts in explicitly.
- *
- * Source of truth: TOKEN-MAPPING.md §4 + §6
- */
-
-.theme-braden,
-[data-brand="braden"] {
-
-  /* ===== Braden brand primitives ===== */
-  --app-primary:      oklch(0.488 0.170 17.6);    /* Braden Red */
-  --app-accent:       oklch(0.769 0.096 90.9);    /* Braden Gold */
-  --app-primary-dark: oklch(0.400 0.137 16.8);    /* Braden Red — pressed/hover state */
-
-  /* ===== Background ===== */
-  --bg-body:    oklch(1 0 0);
-  --bg-panel:   oklch(1 0 0);
-  --bg-surface: oklch(0.975 0 0);
-
-  /* ===== Text ===== */
-  --text-primary: oklch(0.156 0 0);
-
-  /* ===== Border ===== */
-  --border-color: oklch(0.916 0 0);
-
-  /* ===== Accent / brand ===== */
-  --accent-primary:   oklch(0.488 0.170 17.6);   /* Braden Red */
-  --accent-secondary: oklch(0.769 0.096 90.9);   /* Braden Gold */
-
-  /* ===== shadcn/ui bridge tokens ===== */
-  --primary:            oklch(0.488 0.170 17.6);  /* Braden Red */
-  --primary-foreground: oklch(1 0 0);
-  --accent:             oklch(0.769 0.096 90.9);  /* Braden Gold */
-  --accent-foreground:  oklch(0.156 0 0);
-  --ring:               oklch(0.488 0.170 17.6);  /* Braden Red ring */
-}

package/src/css/tokens-dark.css

@@ -1,86 +0,0 @@
-/*
- * @bsuite/theme — tokens-dark.css
- *
- * Full semantic token set for the dark theme.
- * Applied to .dark.
- *
- * All values are in OKLCH — no hex, no hsl() wrappers.
- * Source of truth: TOKEN-MAPPING.md v0.2.0 + vars.css
- */
-
-.dark {
-
-  /* ===== Text ===== */
-  --text-primary:        oklch(0.94 0.012 260);
-  --text-secondary:      oklch(0.82 0.015 260);
-  --text-muted:          oklch(0.68 0.018 260);
-  --text-subtle:         oklch(0.56 0.015 260);
-  --text-disabled:       oklch(0.44 0.010 260);
-  --text-on-primary:     oklch(0.99 0 0);
-  --text-on-surface:     oklch(0.94 0.012 260);
-  --color-primary-text:  oklch(0.623 0.188 259.8);   /* WCAG AA blue text on dark bg */
-  --color-accent-text:   oklch(0.769 0.132 191.7);   /* WCAG AA cyan text on dark bg */
-
-  /* ===== Background ===== */
-  --bg-body:      oklch(0.166 0.026 269.4);           /* deep navy */
-  --bg-surface:   oklch(0.19 0.02 260);
-  --bg-panel:     oklch(0.242 0.03 269.9);
-  --bg-tertiary:  oklch(0.326 0.036 266.7);
-  --bg-elevated:  oklch(0.292 0.034 270);
-  --bg-input:     oklch(0.242 0.03 269.9 / 0.6);
-  --bg-hover:     oklch(0.39 0.035 265);
-  --bg-selected:  oklch(0.546 0.215 262.9 / 0.15);
-
-  /* ===== Border ===== */
-  --border-color:        oklch(0.769 0.132 191.7 / 0.15);
-  --border-color-strong: oklch(0.769 0.132 191.7 / 0.3);
-  --border-shell:        oklch(0.769 0.132 191.7 / 0.18);
-
-  /* ===== Accent / brand ===== */
-  --accent-primary:   oklch(0.546 0.215 262.9);   /* Electric Blue */
-  --accent-secondary: oklch(0.769 0.132 191.7);   /* Electric Cyan */
-
-  /* ===== Status (same values in both themes) ===== */
-  --color-success: oklch(0.697 0.135 172.1);
-  --color-warning: oklch(0.868 0.125 81.4);
-  --color-error:   oklch(0.568 0.202 283.1);
-  --color-info:    oklch(0.769 0.132 191.7);
-
-  /* ===== shadcn/ui bridge tokens ===== */
-  --background:             oklch(0.166 0.026 269.4);
-  --foreground:             var(--text-primary);
-  --card:                   oklch(0.242 0.03 269.9);
-  --card-foreground:        var(--text-primary);
-  --popover:                oklch(0.292 0.034 270);
-  --popover-foreground:     var(--text-primary);
-  --primary:                oklch(0.769 0.132 191.7);  /* Cyan as primary in dark */
-  --primary-foreground:     oklch(0.166 0.026 269.4);
-  --secondary:              oklch(0.242 0.03 269.9);
-  --secondary-foreground:   var(--text-primary);
-  --muted:                  oklch(0.242 0.03 269.9);
-  --muted-foreground:       var(--text-muted);
-  --accent:                 oklch(0.546 0.215 262.9);  /* Blue as accent in dark */
-  --accent-foreground:      var(--text-primary);
-  --destructive:            var(--color-error);
-  --destructive-foreground: oklch(0.99 0 0);
-  --border:                 oklch(0.769 0.132 191.7 / 0.15);
-  --input:                  oklch(0.769 0.132 191.7 / 0.15);
-  --ring:                   oklch(0.769 0.132 191.7);  /* Cyan ring in dark */
-
-  /* ===== Box shadows — deep blacks + neon cyan glow ===== */
-  --shadow-elev-0: none;
-  --shadow-elev-1: 0 1px 3px oklch(0 0 0 / 0.3);
-  --shadow-elev-2: 0 4px 8px oklch(0 0 0 / 0.4), 0 1px 3px oklch(0 0 0 / 0.3);
-  --shadow-elev-3: 0 8px 16px oklch(0 0 0 / 0.5), 0 4px 8px oklch(0 0 0 / 0.3);
-  --shadow-elev-4: 0 16px 32px oklch(0 0 0 / 0.6), 0 8px 16px oklch(0 0 0 / 0.4);
-
-  /* ===== Neon glow helpers ===== */
-  --glow-button:       0 0 20px oklch(0.769 0.132 191.7 / 0.3);
-  --glow-button-hover: 0 0 30px oklch(0.769 0.132 191.7 / 0.5);
-  --glow-card:         0 0 15px oklch(0.769 0.132 191.7 / 0.08);
-  --glow-card-hover:   0 0 25px oklch(0.769 0.132 191.7 / 0.15);
-
-  /* ===== Button shadow ===== */
-  --button-shadow:       0 0 20px oklch(0.769 0.132 191.7 / 0.3);
-  --button-hover-shadow: 0 0 30px oklch(0.769 0.132 191.7 / 0.5);
-}

package/src/css/tokens-high-contrast.css

@@ -1,34 +0,0 @@
-/*
- * @bsuite/theme — tokens-high-contrast.css
- *
- * AAA accessibility overrides for users who have opted into
- * "More Contrast" in their OS/browser settings.
- *
- * Kept intentionally minimal — only tokens that fail AAA at default
- * values are overridden. All other tokens inherit from tokens-light.css
- * or tokens-dark.css.
- *
- * Source of truth: TOKEN-MAPPING.md v0.2.0
- */
-
-@media (prefers-contrast: more) {
-
-  /* ----- Light mode overrides (default / :root) ----- */
-  :root,
-  .light {
-    --text-primary:        oklch(0 0 0);   /* pure black */
-    --text-secondary:      oklch(0.1 0 0);
-    --text-muted:          oklch(0.2 0 0);
-    --border-color:        oklch(0 0 0);
-    --border-color-strong: oklch(0 0 0);
-  }
-
-  /* ----- Dark mode overrides ----- */
-  .dark {
-    --text-primary:        oklch(1 0 0);   /* pure white */
-    --text-secondary:      oklch(0.9 0 0);
-    --text-muted:          oklch(0.8 0 0);
-    --border-color:        oklch(1 0 0);
-    --border-color-strong: oklch(1 0 0);
-  }
-}

package/src/css/tokens-light.css

@@ -1,89 +0,0 @@
-/*
- * @bsuite/theme — tokens-light.css
- *
- * Full semantic token set for the light theme.
- * Applied to :root and .light.
- *
- * All values are in OKLCH — no hex, no hsl() wrappers.
- * Source of truth: TOKEN-MAPPING.md v0.2.0
- */
-
-:root,
-.light {
-
-  /* ===== Text ===== */
-  --text-primary:        oklch(0.22 0.015 260);
-  --text-secondary:      oklch(0.38 0.018 260);
-  --text-muted:          oklch(0.52 0.018 260);
-  --text-subtle:         oklch(0.60 0.012 260);
-  --text-disabled:       oklch(0.72 0.010 260);
-  --text-on-primary:     oklch(0.99 0 0);
-  --text-on-surface:     oklch(0.22 0.015 260);
-  --color-primary-text:  oklch(0.485 0.243 263.6);   /* WCAG AA blue text on light bg */
-  --color-accent-text:   oklch(0.486 0.084 191.5);   /* WCAG AA cyan text on light bg */
-
-  /* ===== Background ===== */
-  --bg-body:      oklch(0.961 0 0.5);
-  --bg-surface:   oklch(0.982 0.002 248);
-  --bg-panel:     oklch(1 0 0);
-  --bg-tertiary:  oklch(0.963 0.003 228.9);
-  --bg-elevated:  oklch(1 0 0);
-  --bg-input:     oklch(0.982 0.002 248);
-  --bg-hover:     oklch(0.963 0.003 228.9);
-  --bg-selected:  oklch(0.546 0.215 262.9 / 0.08);
-
-  /* ===== Border ===== */
-  --border-color:        oklch(0.916 0.006 248);
-  --border-color-strong: oklch(0.741 0.022 250 / 0.5);
-  --border-shell:        oklch(0.741 0.022 250 / 0.2);
-
-  /* ===== Accent / brand ===== */
-  --accent-primary:   oklch(0.546 0.215 262.9);   /* Electric Blue */
-  --accent-secondary: oklch(0.769 0.132 191.7);   /* Electric Cyan */
-
-  /* ===== Status ===== */
-  --color-success: oklch(0.697 0.135 172.1);
-  --color-warning: oklch(0.868 0.125 81.4);
-  --color-error:   oklch(0.568 0.202 283.1);
-  --color-info:    oklch(0.769 0.132 191.7);
-
-  /* ===== shadcn/ui bridge tokens ===== */
-  --background:             oklch(0.961 0 0.5);
-  --foreground:             var(--text-primary);
-  --card:                   oklch(1 0 0);
-  --card-foreground:        var(--text-primary);
-  --popover:                oklch(1 0 0);
-  --popover-foreground:     var(--text-primary);
-  --primary:                oklch(0.546 0.215 262.9);  /* Electric Blue */
-  --primary-foreground:     var(--text-on-primary);
-  --secondary:              oklch(0.961 0 0.5);
-  --secondary-foreground:   var(--text-primary);
-  --muted:                  oklch(0.961 0 0.5);
-  --muted-foreground:       var(--text-muted);
-  --accent:                 oklch(0.769 0.132 191.7);  /* Electric Cyan */
-  --accent-foreground:      oklch(0.17 0.02 260);
-  --destructive:            var(--color-error);
-  --destructive-foreground: oklch(0.99 0 0);
-  --border:                 oklch(0.916 0.006 248);    /* from hsl(214.3 31.8% 91.4%) */
-  --input:                  oklch(0.916 0.006 248);
-  --ring:                   oklch(0.546 0.215 262.9);  /* Electric Blue */
-
-  /* ===== Border-radius ===== */
-  --radius: 0.5rem;
-
-  /* ===== Box shadows — soft neutral, no neon glow in light mode ===== */
-  --shadow-elev-0: none;
-  --shadow-elev-1: 0 1px 2px oklch(0 0 0 / 0.05);
-  --shadow-elev-2: 0 4px 6px oklch(0 0 0 / 0.07), 0 2px 4px oklch(0 0 0 / 0.06);
-  --shadow-elev-3: 0 10px 15px oklch(0 0 0 / 0.1), 0 4px 6px oklch(0 0 0 / 0.05);
-  --shadow-elev-4: 0 20px 25px oklch(0 0 0 / 0.1), 0 10px 10px oklch(0 0 0 / 0.04);
-
-  /* ===== Glow helpers — disabled in light mode ===== */
-  --glow-button:       none;
-  --glow-button-hover: none;
-  --glow-card:         none;
-  --glow-card-hover:   none;
-
-  /* ===== Button shadow — transparent/none in light mode ===== */
-  --button-shadow: none;
-}