cursedbelt 0.0.0 → 2.3.0

package/src/theme.css

@@ -14,10 +14,15 @@
  * importing this file (ca = emerald — this file's default; ru = violet).
  *
  * Dark mode: add the `.dark` class to a root element (the theme toggle controls it).
- * The consuming app declares the variant once with
- *   @custom-variant dark (&:where(.dark, .dark *));
- * so `dark:` utilities key off the class, not the OS media query.
+ * This file declares the variant below so every consumer's `dark:` utilities key
+ * off that class, never the OS `prefers-color-scheme` media query — a consumer
+ * that skips the declaration gets Tailwind's media-query default instead, which
+ * silently desyncs `dark:*` utility colors from the `.dark`-class-scoped tokens
+ * above/below (e.g. `dark:text-gray-50` firing on OS dark preference while
+ * `--background` stays light because no `.dark` class was ever added — a ~1:1
+ * contrast pairing). Declaring it once here, centrally, means no app can forget it.
  */
+@custom-variant dark (&:where(.dark, .dark *));
 
 :root {
   /* ---- Keyboard inset default (useKeyboardInset writes the live value) ----- */
@@ -26,34 +31,170 @@
   --keyboard-inset: 0px;
 
   /* ---- Accent (ca default: emerald; apps override these four only) -------- */
-  --accent: #059669;
-  --accent-hover: #047857;
-  --accent-solid: #059669;
-  --accent-solid-hover: #10b981;
+  /* Deepened one step off the raw Tailwind emerald-500/600 ramp — the same hue,
+     less neon/saturated, so the brand accent reads as "professional software",
+     not a highlighter. */
+  --accent: #047857; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --accent-hover: #065f46; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --accent-solid: #047857; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --accent-solid-hover: #059669; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* Text color ON TOP of an --accent-solid fill (active gallery order/filter chips,
+     etc). --accent-solid is tuned so white always clears 4.5:1 on it in both modes
+     (see the comment at the top of this file) — same convention as
+     --destructive-foreground below. Was referenced by denseGallery.css before this
+     token existed (cbux-96), silently falling back to inherited text color. */
+  --accent-solid-foreground: #ffffff; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* Text-on-tint step (cbux-101): `text-accent` on a `bg-accent/15` (or deeper)
+     tint — the standard "soft active" chip/badge treatment — only clears
+     4.43:1 in light mode (measured, axe-audited), under the 4.5:1 AA floor.
+     Derives from --accent-hover (one of the four tokens a rebranding app
+     already overrides) instead of a new hardcoded hue, so it stays correct
+     for ANY accent color, not just the emerald default; dark mode's plain
+     --accent already clears 7:1+ on its own tints, so it needs no boost. */
+  --accent-strong: var(--accent-hover);
 
   /* ---- Semantic surface palette ------------------------------------------ */
-  --background: #ffffff;
-  --foreground: #111827;
-  --surface: #ffffff;
-  --card: #ffffff;
-  --card-foreground: #111827;
+  --background: #ffffff; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --foreground: #111827; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --surface: #ffffff; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --card: #ffffff; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --card-foreground: #111827; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
   /* Elevated card backgrounds for Surface raised/overlay. In light mode every
      surface is white and elevation reads through shadow, so these match --card;
      dark mode lifts them (below) so depth reads through a lighter bg, not a shadow. */
-  --card-raised: #ffffff;
-  --card-overlay: #ffffff;
-  --popover: #ffffff;
-  --popover-foreground: #111827;
-  --muted: #f3f4f6;
-  --muted-foreground: #6b7280;
-  --border: #e5e7eb;
-  --border-strong: #d1d5db;
+  --card-raised: #ffffff; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --card-overlay: #ffffff; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --popover: #ffffff; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --popover-foreground: #111827; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --muted: #f3f4f6; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* Secondary/metadata text. WCAG-audited (design manual, color-contrast/): 7.56:1
+     on white and 6.87:1 on --muted — comfortably past the 4.5:1 AA floor even at
+     12px mono metadata sizes. The old #6b7280 scored 4.83:1 (technically AA) but
+     read as washed-out paths under real lighting — the "criminal path legibility"
+     teardown class. Never fade this further with opacity (banned; shift tokens). */
+  --muted-foreground: #4b5563; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* Hairline dividers (rows, section rules). #e5e7eb at 1.24:1 was invisible under
+     office lighting (adversarial teardown 2026-07-15); #d1d5db keeps hairlines quiet
+     but traceable. Non-text 3:1 applies to INTERACTIVE edges → --border-strong. */
+  --border: #d1d5db; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* Interactive/structural edges (buttons, fields, focusable cards): 3.09:1 on
+     white — clears the WCAG 3:1 non-text minimum, so a bordered control never
+     reads as disabled or blends into the page. */
+  --border-strong: #8b93a3; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* INTERNAL rules — the divider between two rows of the same table, as opposed
+     to `--border`, which is the edge that ENCLOSES a card. They are not the same
+     line and a dense grid is where the difference shows: repeat an enclosure
+     hairline forty times and the table reads as forty boxes rather than as one
+     surface with structure. Derived from --border rather than a fifth literal,
+     so it stays correct for every theme scope that re-binds it.
+     🔴 Derived-token trap: `var(--border)` substitutes on the element this is
+     DECLARED on, so every scope that re-binds --border re-declares this too
+     (same reason `--field-bg` is repeated — see the note in `.cb-aurora`). */
+  --rule: color-mix(in srgb, var(--border) 55%, transparent);
+  /* Recessed/inset surface — one step "in" from --background, for read-only mono
+     code blocks (.cb-code) and other content that should read as sunken rather
+     than raised. Distinct token from --muted so a future restyle of "muted UI
+     chrome" doesn't accidentally also restyle "sunken code surfaces". */
+  --surface-sunken: #f1f3f5; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+
+  /* ---- 🔴 COMPATIBILITY ALIASES (2026-08-13) ------------------------------
+     Names apps' own stylesheets already spell, mapped onto the canonical token
+     beside them. Every one of these was in production, in a `var()`, resolving
+     to NOTHING.
+
+     This is not a style preference and it was not cosmetic. A `var(--surface-2)`
+     that names no token contributes NO declaration at all, so the rule silently
+     does not apply — and the failure is invisible in code review, invisible to
+     `tsc`, invisible to biome and invisible to every unit test, because nothing
+     anywhere is wrong. The owner's report is what found it:
+
+       *"fix collections ux to be as good as the music app and other quality apps
+       we have. The sidebar looks especially poor as it's hard to tell what is
+       hovered and clickable as I move over it."*
+
+     `.sidebar__album:hover { background: var(--surface-2) }` and
+     `.is-selected { background: var(--surface-3, var(--surface-2)) }` were BOTH
+     nothing, so hover and selected and neither were three identical states. The
+     sidebar did not look poor — it had no hover styling at all. Measured across
+     the fleet the same day: collections referenced 8 undefined tokens, music 9,
+     and `--primary`/`--primary-foreground` were referenced by seven apps.
+
+     This file has been bitten by the same class before — see
+     `--accent-solid-foreground`'s own comment ("Was referenced by
+     denseGallery.css before this token existed, silently falling back to
+     inherited text color").
+
+     🔴 **Aliases, not a second vocabulary.** New code uses the canonical name;
+     these exist so ~60 already-shipped call sites resolve to the thing their
+     author meant. The gate that stops the next one is
+     `src/theme.tokens.test.ts`, which fails when any app or package stylesheet
+     reads a custom property nothing defines. */
+  --surface-0: var(--background);
+  --surface-1: var(--card);
+  --surface-2: var(--card-raised);
+  --surface-3: var(--card-overlay);
+  --surface-raised: var(--card-raised);
+  --text-1: var(--foreground);
+  --text: var(--foreground);
+  --text-muted: var(--muted-foreground);
+  /* Fainter than muted, for a third rank of text (timestamps under a subtitle).
+     Derived rather than a new literal so it tracks a rebrand. */
+  --text-faint: color-mix(in oklab, var(--muted-foreground) 70%, var(--background));
+  --border-subtle: color-mix(in oklab, var(--border) 60%, transparent);
+  --danger: var(--destructive);
+  --danger-text: var(--destructive-foreground);
+  --accent-9: var(--accent);
+  /* music's name for "text on top of an accent fill". Its own call site carries the
+     comment "fallback only; the token wins wherever cursedbelt defines it" — which was
+     aspirational: nothing defined it, so the `#fff` fallback won everywhere and a rebrand
+     could never reach it. Now the sentence is true. */
+  --on-accent: var(--accent-solid-foreground);
+  /* shadcn's names for the solid accent pair. Seven apps spell it this way. */
+  --primary: var(--accent-solid);
+  --primary-foreground: var(--accent-solid-foreground);
+  /* A determinate progress fill. Distinct from --accent-solid only so a future
+     restyle of "progress" does not have to restyle every primary button. */
+  --progress: var(--accent-solid);
 
   /* ---- Semantic status --------------------------------------------------- */
-  --destructive: #dc2626;
-  --destructive-foreground: #ffffff;
-  --success: #16a34a;
-  --warning: #d97706;
+  /* One step deeper than raw Tailwind red-600 — still unambiguously "destructive"
+     on hover/focus, without the alarm-red brightness of the stock swatch. */
+  --destructive: #b91c1c; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --destructive-foreground: #ffffff; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* Solid-fill destructive (mirrors the --accent/--accent-solid split): --destructive
+     itself is tuned as TEXT/border/icon color (6.47:1 on white here), which is a
+     different contrast direction than a solid red badge/button carrying WHITE text
+     on top. Light's --destructive already clears 4.5:1 with white text so this just
+     aliases it; dark needs its own darker step (see below) — cbux-104. */
+  --destructive-solid: var(--destructive); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --destructive-solid-hover: #991b1b; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --success: #16a34a; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --warning: #d97706; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* The gold a filled star is painted in (StarRating). Light needs a DARKER gold
+     than dark mode does, and this is measured, not taste: the neon below scores
+     1.63:1 on a light card, so a filled star and an empty one are the same shape at
+     the same weight — WCAG 1.4.11's floor for a graphical object is 3:1. Deep gold
+     here clears it at 4.92:1 on the card and 4.54:1 on the canvas. (Measured in
+     apps/hobbies, which carried both values locally until StarRating moved here.) */
+  --star: #a16207; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* 🔴 The UNRATED half of the pair, and it is its own token rather than an opacity
+     on --muted because that is exactly what made it invisible. An empty star painted
+     `--muted` at 0.35 alpha scored ~1.1:1 against the surface in dark (--muted is
+     #1f2937 there, three shades off the card it sits on) — the owner, 2026-08-25:
+     *"the music app dark mode stars for unrated songs are too hard to see."*
+     WCAG 1.4.11 puts the floor for a graphical object at 3:1, and these two values
+     are MEASURED against the surfaces the stars are actually drawn on rather than
+     aliased to --border-strong, which came in at 2.85:1 on the light aurora canvas.
+     Light: 3.46:1 on #f2f6fd, 3.75:1 on white. Still quieter than the gold beside it,
+     which is the other half of the job — filled and empty must differ by WEIGHT as
+     well as hue. */
+  --star-empty: #7c8496; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* Status TEXT on the tinted 15% badge fills. The base status hues score only
+     ~2.6–2.8:1 as text on their own tints (the v4 judge's blocker); these deeper
+     steps clear 6:1+ while the dot/border keep the base hue. WCAG-audited. */
+  --success-strong: #166534; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --warning-strong: #92400e; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --destructive-strong: #991b1b; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
   --ring: var(--accent);
 
   /* ---- Form field-style tokens (one indirection layer) ------------------- */
@@ -70,9 +211,63 @@
   --field-ring: var(--ring);
   --field-radius: var(--radius-md);
   --field-fg: var(--foreground);
+  /* 🔴 The OPAQUE twin of --field-bg, and it exists for exactly one reason: a
+     native <select>'s dropdown list is painted by the BROWSER, outside the page,
+     where a translucent color has nothing behind it to be translucent against.
+     Chrome on Windows composites it over its own white popup base and takes the
+     option text color from the <select>, so a themed dark field (--field-bg is
+     `rgb(148 163 184 / 0.08)` in the aurora scope) renders as near-white paper
+     with near-white text — the choices are THERE and unreadable. Reported by a
+     relative using the family tree on Windows/Chrome 2026-08-12; invisible on
+     macOS, where Chrome draws a native menu and ignores the CSS entirely, which
+     is why it survived so long. See the `option, optgroup` rule near the bottom
+     of this file. Defaults to --field-bg because at :root that is already
+     opaque; a scope whose field is glass MUST re-point this at a real surface. */
+  --field-bg-solid: var(--field-bg);
+  /* Placeholder ghost text re-binds to --muted-foreground (cbux-101) — the
+     former one-step-lighter literal (#6b7280) scored only 4.34:1 against
+     --surface-sunken (the recessed/read-only field variant, e.g. Prompt
+     Builder's compiled-prompt preview), under the 4.5:1 AA floor; a plain
+     field on --background still cleared it (4.83:1), so the failure only
+     showed up on the sunken surface. --muted-foreground clears both
+     (7.56:1 / 6.79:1) and matches dark mode's existing binding below. */
   --field-placeholder: var(--muted-foreground);
   --field-error: var(--destructive);
 
+  /* ---- Control height scale (task cbux-41) -------------------------------- */
+  /* ONE size scale for every interactive control — Button, IconButton, Input,
+     FieldInput, SelectField, ComboboxField, Autocomplete, TagsInput,
+     DatePicker/DateTimeField, SecretInput, SegmentedControl, chat composer send,
+     and any other control-class primitive. Height is LOCKED to these tokens;
+     components add horizontal padding only (never vertical py-*) so adjacent
+     controls always share the exact same baseline — the "vertical height
+     mismatching" class of bug this task exists to kill. Not theme-dependent
+     (same in light/dark), so declared once here rather than duplicated in
+     `.dark`. `size` defaults to `md` everywhere it's exposed. */
+  --control-h-sm: 32px;
+  --control-h-md: 36px;
+  --control-h-lg: 40px;
+
+  /* ---- Panel/card body default padding (task cbux-41) --------------------- */
+  /* The default inner padding for a card/panel BODY (Surface's `md` pad, a
+     Modal's content area, a Field group). Not theme-dependent. */
+  /* Reading width — DESIGN.md §1's 750–850px band for prose (chat threads, docs,
+     QA content), taken at its middle. `PageContainer`'s max-w-5xl (1024px) is the
+     DASHBOARD width and is deliberately different; `ReadableColumn` reads this. */
+  --reading-width: 800px;
+  --panel-pad: 16px;
+
+  /* ---- Row rhythm: the high-density workspace grid ------------------------ */
+  /* Wide horizontally, tight vertically. That asymmetry is the whole trick of a
+     scannable data grid: generous column gutters carry the eye ACROSS one
+     person's line, while a small vertical step keeps forty of those lines on
+     one screen. A uniform `p-4` does the opposite of both. Not theme-dependent,
+     so declared once here beside the control scale it is the table analog of.
+     `.cb-dense` (below) is what compresses them for a workspace canvas. */
+  --row-pad-y: 0.5rem; /* 8px  — a comfortable-but-tight data row */
+  --row-pad-x: 1rem; /* 16px — the wide gutter that guides the eye across */
+  --row-h: 2.25rem; /* the minimum row box, so an empty cell never collapses */
+
   /* ---- Chart series palette (8 categorical hues) -------------------------- */
   /* chart-1 tracks the accent so single-series charts re-color with the brand
      (ca emerald / ru violet) for free — apps still override only the four accent
@@ -80,69 +275,531 @@
      Read by useChartTokens (cursedbelt/react/charts) off the chart's own element,
      so dark + accent scopes cascade correctly. */
   --chart-1: var(--accent);
-  --chart-2: #0ea5e9; /* sky */
-  --chart-3: #f59e0b; /* amber */
-  --chart-4: #8b5cf6; /* violet */
-  --chart-5: #ec4899; /* pink */
-  --chart-6: #14b8a6; /* teal */
-  --chart-7: #ef4444; /* red */
-  --chart-8: #6366f1; /* indigo */
+  --chart-2: #0ea5e9; /* sky */ /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --chart-3: #f59e0b; /* amber */ /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --chart-4: #8b5cf6; /* violet */ /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --chart-5: #ec4899; /* pink */ /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --chart-6: #14b8a6; /* teal */ /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --chart-7: #ef4444; /* red */ /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --chart-8: #6366f1; /* indigo */ /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+
+  /* ---- Categorical tone palette (identity color-coding) -------------------
+     DESIGN.md §3: "status tags MUST be enclosed within filled capsule pill
+     shapes … never thin low-visibility unstyled outlines". Badge's CATEGORICAL
+     tones (a user-chosen category color, where the hue carries identity rather
+     than status) used to be spelled as raw Tailwind palette classes — 28 of them
+     in Badge.tsx and 22 in FileTypeIcon.tsx — which means they did not move when
+     the theme moved and their dark-mode contrast was never derived from anything.
+     They live here now, as three roles per hue:
+       --tone-<hue>-bg   the FILLED pill background
+       --tone-<hue>-fg   the pill's text, ≥4.5:1 on that background in both themes
+       --tone-<hue>-ink  the same hue as a standalone icon/text tint on the PAGE
+                         background (FileTypeIcon), which needs a darker step than
+                         -fg because it sits on --background, not on -bg.
+     Values reproduce the previous Tailwind steps exactly, so nothing re-paints;
+     what changes is that one edit here now re-themes every consumer. */
+  --tone-emerald-bg: #d1fae5; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-emerald-fg: #047857; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-emerald-ink: #059669; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-sky-bg: #e0f2fe; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-sky-fg: #0369a1; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-sky-ink: #0284c7; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-cyan-bg: #cffafe; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-cyan-fg: #0e7490; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-cyan-ink: #0891b2; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-amber-bg: #fef3c7; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-amber-fg: #92400e; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-amber-ink: #b45309; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-purple-bg: #f3e8ff; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-purple-fg: #7e22ce; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-purple-ink: #9333ea; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-rose-bg: #ffe4e6; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-rose-fg: #be123c; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-rose-ink: #e11d48; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-orange-bg: #ffedd5; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-orange-fg: #9a3412; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-orange-ink: #ea580c; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-slate-bg: #e2e8f0; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-slate-fg: #1e293b; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-slate-ink: #475569; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+
+  /* 🔴 Four more hues, 2026-08-20 (unit 15). Eight was enough while a tone meant a
+     BADGE; it is not enough when the hue is a game's identity channel — `apps/arcade`'s
+     Crowns paints ten regions that must be told apart at a glance, and there is no
+     eighth-and-a-half. Same three roles, same derivation (the 100/700/600 Tailwind
+     steps in light, 900@40% / 300 / 400 in dark), so a twelfth consumer inherits the
+     contrast work rather than re-deriving it. */
+  --tone-lime-bg: #ecfccb; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-lime-fg: #4d7c0f; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-lime-ink: #65a30d; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-teal-bg: #ccfbf1; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-teal-fg: #0f766e; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-teal-ink: #0d9488; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-violet-bg: #ede9fe; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-violet-fg: #6d28d9; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-violet-ink: #7c3aed; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-fuchsia-bg: #fae8ff; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-fuchsia-fg: #a21caf; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-fuchsia-ink: #c026d3; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
 
   /* ---- Elevation shadows (light leans on shadow) ------------------------- */
-  --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.06);
-  --shadow-overlay: 0 10px 30px -5px rgb(0 0 0 / 0.18);
-  --shadow-popover: 0 16px 40px -8px rgb(0 0 0 / 0.25);
+  --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.06); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --shadow-overlay: 0 10px 30px -5px rgb(0 0 0 / 0.18); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --shadow-popover: 0 16px 40px -8px rgb(0 0 0 / 0.25); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+
+  /* ---- Focus glow -------------------------------------------------------- */
+  /* The focused control's halo, as ONE token, for the same reason elevation is:
+     a focus ring is a semantic state, and every surface that wants the premium
+     treatment was otherwise hand-rolling `shadow-[0_0_15px_rgba(...)]` with a
+     literal brand color baked in. Two layers on purpose — a tight ring that
+     carries the WCAG focus-visibility burden, plus a wide colored bloom that is
+     pure atmosphere. An app that dislikes the bloom drops the second layer;
+     nobody has to reinvent the first. Reached through `.cb-focus-glow`. */
+  --glow-focus:
+    0 0 0 3px color-mix(in srgb, var(--ring) 20%, transparent),
+    0 0 18px -2px color-mix(in srgb, var(--ambient-3) 34%, transparent);
+
+  /* ---- Aurora front-door palette (marketing-site parity) ----------------- */
+  /* The dark-aurora look of cursedalchemy.com's marketing page. It began as the
+     logged-out sign-in surface's palette only (AuthCard `aurora`) so the
+     marketing → product hand-off is visually continuous; since the aurora THEME
+     below it is also the default hue triad any app inherits for its ambient
+     layer. These are deliberately fixed literals (mode-independent): the front
+     door is dark in both color schemes, exactly like the marketing canvas it
+     continues from. Kept in lockstep with site/styles.css `:root`. */
+  --aurora-canvas: #0b0f19; /* guardrails-ignore no-hardcoded-colors: aurora front-door palette — mirrors the marketing site's fixed dark canvas, mode-independent by design */
+  --aurora-cyan: #22d3ee; /* guardrails-ignore no-hardcoded-colors: aurora front-door palette — mirrors the marketing site's fixed dark canvas, mode-independent by design */
+  --aurora-violet: #8b5cf6; /* guardrails-ignore no-hardcoded-colors: aurora front-door palette — mirrors the marketing site's fixed dark canvas, mode-independent by design */
+  --aurora-magenta: #e879f9; /* guardrails-ignore no-hardcoded-colors: aurora front-door palette — mirrors the marketing site's fixed dark canvas, mode-independent by design */
+  --aurora-gradient: linear-gradient(135deg, #22d3ee, #8b5cf6 55%, #e879f9); /* guardrails-ignore no-hardcoded-colors: aurora front-door palette — mirrors the marketing site's fixed dark canvas, mode-independent by design */
+
+  /* ---- Glass + ambient layer (the "depth" half of the design language) ---- */
+  /* Two decorative systems every theme declares, so a component built on them is
+     correct in the DEFAULT theme too rather than only under `.cb-aurora`:
+       glass    a translucent, blurred, hairline-edged fill — `Surface level="glass"`
+                and the `.cb-glass` class. In the default light theme it is a near-
+                opaque frost (glass over white reads as white), so a `glass` Surface
+                is never a legibility regression on a plain app.
+       ambient  the three-hue backdrop `AmbientBackdrop` paints. The hues are TOKENS,
+                not literals, which is what lets an app re-brand its whole atmosphere
+                by overriding three variables — the same bargain the four accent
+                tokens already make for the foreground.
+     `--ambient-strength` scales every blob's alpha at once (the component's
+     `intensity` prop writes it), so "calmer" is one number, not nine gradients. */
+  --glass-bg: rgb(255 255 255 / 0.72); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --glass-bg-strong: rgb(255 255 255 / 0.86); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --glass-edge: rgb(15 23 42 / 0.1); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --glass-blur: 14px;
+  --glass-shadow: 0 10px 30px -12px rgb(15 23 42 / 0.22); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --ambient-1: var(--aurora-cyan);
+  --ambient-2: var(--aurora-violet);
+  --ambient-3: var(--aurora-magenta);
+  --ambient-strength: 0.1;
+  /* The brand gradient as a SEMANTIC name. Components (gradient headlines, the
+     accent hairline over a panel) read this; an app re-points it at its own ramp
+     without knowing the word "aurora". */
+  --accent-gradient: var(--aurora-gradient);
+
+  /* ---- z-index bands (02 §6.2 / 06 §1) ----------------------------------- */
+  /* The CSS mirror of `Z_BANDS` in `core/slots.ts` — the SAME six-band scale the
+     Portal Provider assigns in JS. A raw `z-index:` literal in component CSS is a
+     no-raw-zindex error (a stray high z that buries the `critical` lock screen is
+     a private-mode reveal bypass through CSS, not a style nit); reach for these
+     tokens instead. Keep these values in lockstep with `Z_BANDS`. */
+  --z-content: 0;
+  --z-sticky: 100;
+  --z-overlay: 1000;
+  --z-popover: 1100;
+  --z-toast: 1200;
+  --z-critical: 1300;
 }
 
 .dark {
   /* mode-following accent lightens in dark so it reads as text/line (not a fill) */
-  --accent: #34d399;
-  --accent-hover: #6ee7b7;
-  /* solid accent stays saturated in dark — white text must sit on it */
-  --accent-solid: #059669;
-  --accent-solid-hover: #10b981;
-
-  --background: #030712;
-  --foreground: #f9fafb;
-  --surface: #0b1220;
-  --card: #0b1220;
-  --card-foreground: #f9fafb;
+  --accent: #34d399; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --accent-hover: #6ee7b7; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* Solid accent: white button labels must clear 4.5:1 ON the fill in dark too —
+     the former #059669 scored 3.77:1 (v4 judge blocker). #047857 = 5.48:1, same
+     as light; hover deepens (8.2:1) instead of lightening so the label never
+     loses contrast mid-interaction. */
+  --accent-solid: #047857; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --accent-solid-hover: #065f46; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* Dark's --accent-hover LIGHTENS (mid-interaction never loses contrast), the
+     opposite direction from light's --accent-hover — so --accent-strong can't
+     just inherit :root's `var(--accent-hover)` here. Plain --accent already
+     clears 7:1+ on its own tints in dark, so re-bind to that instead. */
+  --accent-strong: var(--accent);
+
+  --background: #030712; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --foreground: #f9fafb; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --surface: #0b1220; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --card: #0b1220; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --card-foreground: #f9fafb; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
   /* Elevation reads through the bg here: flat (--surface #0b1220) < raised
      (--card-raised) < overlay (--card-overlay), each a step lighter than the last
      above the near-black --background (#030712). Shadows are near-invisible on
      black, so the lighter bg + stronger border carry the depth. */
-  --card-raised: #0f1929;
-  --card-overlay: #16213a;
-  --popover: #111827;
-  --popover-foreground: #f9fafb;
-  --muted: #1f2937;
-  --muted-foreground: #9ca3af;
-  --border: #1f2937;
-  --border-strong: #374151;
-
-  --destructive: #ef4444;
-  --destructive-foreground: #ffffff;
-  --success: #22c55e;
-  --warning: #f59e0b;
+  --card-raised: #0f1929; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --card-overlay: #16213a; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --popover: #111827; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --popover-foreground: #f9fafb; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --muted: #1f2937; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* 7.37:1 on --card (#0b1220) — the audited dark secondary-text token; the field
+     placeholder re-binds to this (no lighter dark step exists worth the risk). */
+  --muted-foreground: #9ca3af; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --field-placeholder: var(--muted-foreground);
+  /* Hairlines: the old #1f2937 vanished against --card (1.28:1) — dark-mode rows
+     read as one unbroken wall. Lifted a step; still quiet. */
+  --border: #2c3850; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* Interactive edges: 3.22:1 vs --card — clears the WCAG 3:1 non-text floor. */
+  --border-strong: #5b6678; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* Re-derived against THIS scope's --border — see the note at :root. */
+  --rule: color-mix(in srgb, var(--border) 55%, transparent);
+  /* dark: sits between --background (#030712) and --card (#0b1220) — recessed
+     relative to the card it's usually nested inside. */
+  --surface-sunken: #070d18; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+
+  --destructive: #ef4444; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --destructive-foreground: #ffffff; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* cbux-104: plain --destructive (#ef4444) is tuned as TEXT on dark surfaces
+     (4.98:1) — as a SOLID FILL under white text it only clears 3.76:1, under the
+     4.5:1 AA floor (caught on the orchestrator unread-count badge, Button's
+     `destructive`/`destructive-solid` variants, SideNav/PlaceBar count pills — every
+     white-on-red solid fill). One step darker clears it without touching the
+     widely-relied-on --destructive text/border/tint contrast. */
+  --destructive-solid: #dc2626; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --destructive-solid-hover: #b91c1c; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --success: #22c55e; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --warning: #f59e0b; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* The neon the star always had — correct against a near-black canvas at 10.76:1,
+     and the half of the pair that never needed changing. See the note at :root. */
+  --star: #f5c518; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* Same rule in dark — see the note at :root. Measured 3.49:1 on --card (#0b1220)
+     and 3.66:1 on the dark aurora canvas. */
+  --star-empty: #5f6b82; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* Dark badge text: the base green/amber already clear 6:1 on the dark tints;
+     red needs the lighter step (#ef4444 was 3.9:1 on its tint). */
+  --success-strong: #22c55e; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --warning-strong: #f59e0b; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --destructive-strong: #f87171; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
   --ring: var(--accent);
 
   /* dark: lift the categorical ramp so each hue stays legible on the near-black
      bg (chart-1 follows --accent, which already lightens in dark above). */
   --chart-1: var(--accent);
-  --chart-2: #38bdf8; /* sky */
-  --chart-3: #fbbf24; /* amber */
-  --chart-4: #a78bfa; /* violet */
-  --chart-5: #f472b6; /* pink */
-  --chart-6: #2dd4bf; /* teal */
-  --chart-7: #f87171; /* red */
-  --chart-8: #818cf8; /* indigo */
+  --chart-2: #38bdf8; /* sky */ /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --chart-3: #fbbf24; /* amber */ /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --chart-4: #a78bfa; /* violet */ /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --chart-5: #f472b6; /* pink */ /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --chart-6: #2dd4bf; /* teal */ /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --chart-7: #f87171; /* red */ /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --chart-8: #818cf8; /* indigo */ /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+
+  /* dark: the same eight hues, lifted. The pill background is the 900 step at 40%
+     over whatever surface it lands on (so it reads on card AND on popover); the
+     text is the 300 step, which clears 4.5:1 against it, and -ink is the 400 step,
+     which clears it against --background. */
+  --tone-emerald-bg: color-mix(in srgb, #064e3b 40%, transparent); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-emerald-fg: #6ee7b7; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-emerald-ink: #34d399; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-sky-bg: color-mix(in srgb, #0c4a6e 40%, transparent); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-sky-fg: #7dd3fc; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-sky-ink: #38bdf8; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-cyan-bg: color-mix(in srgb, #164e63 40%, transparent); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-cyan-fg: #67e8f9; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-cyan-ink: #22d3ee; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-amber-bg: color-mix(in srgb, #78350f 40%, transparent); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-amber-fg: #fcd34d; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-amber-ink: #fbbf24; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-purple-bg: color-mix(in srgb, #581c87 40%, transparent); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-purple-fg: #d8b4fe; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-purple-ink: #c084fc; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-rose-bg: color-mix(in srgb, #881337 40%, transparent); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-rose-fg: #fda4af; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-rose-ink: #fb7185; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-orange-bg: color-mix(in srgb, #7c2d12 40%, transparent); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-orange-fg: #fdba74; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-orange-ink: #fb923c; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-slate-bg: #1e293b; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-slate-fg: #e2e8f0; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-slate-ink: #94a3b8; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+
+  --tone-lime-bg: color-mix(in srgb, #365314 40%, transparent); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-lime-fg: #bef264; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-lime-ink: #a3e635; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-teal-bg: color-mix(in srgb, #134e4a 40%, transparent); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-teal-fg: #5eead4; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-teal-ink: #2dd4bf; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-violet-bg: color-mix(in srgb, #4c1d95 40%, transparent); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-violet-fg: #c4b5fd; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-violet-ink: #a78bfa; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-fuchsia-bg: color-mix(in srgb, #701a75 40%, transparent); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-fuchsia-fg: #f0abfc; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --tone-fuchsia-ink: #e879f9; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
 
   /* dark: shadows are near-invisible on black, so elevation reads through the
      lighter surface/card/popover backgrounds + stronger borders above; the
      shadow itself is darkened only as a faint anchor. */
-  --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.4);
-  --shadow-overlay: 0 10px 30px -5px rgb(0 0 0 / 0.6);
-  --shadow-popover: 0 16px 40px -8px rgb(0 0 0 / 0.7);
+  --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.4); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --shadow-overlay: 0 10px 30px -5px rgb(0 0 0 / 0.6); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --shadow-popover: 0 16px 40px -8px rgb(0 0 0 / 0.7); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* Re-derived here (not inherited) because --ring re-binds above: dark carries a
+     wider, brighter bloom — an emissive glow reads as light ADDED to a dark
+     canvas, where in light mode the same alpha would only muddy the surface. */
+  --glow-focus:
+    0 0 0 3px color-mix(in srgb, var(--ring) 26%, transparent),
+    0 0 26px -2px color-mix(in srgb, var(--ambient-3) 46%, transparent);
+
+  /* dark: glass is a LIGHT film over a dark surface (the reverse of light mode's
+     white frost) — a slate tint at low alpha, lifted by a light hairline. The
+     ambient layer can carry more energy here because it adds light to black
+     instead of washing out white. */
+  --glass-bg: rgb(148 163 184 / 0.07); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --glass-bg-strong: rgb(148 163 184 / 0.12); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --glass-edge: rgb(148 163 184 / 0.16); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --glass-shadow: 0 20px 40px -15px rgb(0 0 0 / 0.5); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --ambient-strength: 0.16;
+}
+
+/*
+ * ─────────────────────────── The AURORA theme ───────────────────────────────
+ *
+ * An opt-in THEME SCOPE, not a second design system: `.cb-aurora` re-binds the
+ * SAME semantic tokens every component already reads, so adding one class to an
+ * app's root node restyles Button, Surface, Badge, Input, Modal, the nav rail and
+ * everything else at once. Nothing downstream needs a variant prop, and an app
+ * that never opts in is byte-identical to before.
+ *
+ * What it changes and what it deliberately does NOT:
+ *
+ *   changes   the SURFACE system — an elevation ladder with a hint of indigo
+ *             instead of neutral gray, translucent-reading hairlines, deeper
+ *             lifted shadows, and the glass/ambient layer turned up. This is the
+ *             "layered depth + ambient light" half of the look.
+ *   leaves    the four ACCENT tokens alone. Brand is the app's decision, not the
+ *             theme's — notes runs cyan here, another app runs emerald, and both
+ *             read as the same product family because the surfaces agree. An app
+ *             that wants a different atmosphere overrides `--ambient-1..3` too.
+ *
+ * It ships BOTH color schemes on purpose. A commercial product cannot hand a
+ * light-preferring user a permanently dark app, and "futuristic" is a surface
+ * language, not a synonym for black: light aurora is the same glass and the same
+ * ambient field over a luminous canvas. `.dark` selects between them, exactly as
+ * it does for the default theme, so the app's existing theme toggle just works.
+ *
+ * Both selectors are written for each mode because the scope lands in two shapes:
+ * on `<html>` beside `.dark` (an app theming itself) and on a nested element that
+ * carries its own `dark` (AuthCard's front door inside an otherwise-light app).
+ */
+.cb-aurora {
+  --background: #f2f6fd; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --foreground: #0f172a; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --surface: #ffffff; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --card: #ffffff; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --card-foreground: #0f172a; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --card-raised: #ffffff; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --card-overlay: #ffffff; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --popover: #ffffff; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --popover-foreground: #0f172a; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --muted: #e9eefa; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --surface-sunken: #eef2fb; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* 1.46:1 on white — matched to the audited default `--border` (1.47:1) rather
+     than eyeballed, so the "hairline invisible under office lighting" teardown
+     does not reopen under a new theme. */
+  --border: #ccd6ea; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --border-strong: #8b93a3; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --rule: color-mix(in srgb, var(--border) 55%, transparent);
+
+  /* ── "Solar Alabaster": light aurora's answer to the dark theme's glow ─────
+     A neon emitter on a bright canvas just looks washed out, so light mode
+     inverts the lighting model: instead of surfaces EMITTING color, they CAST
+     it. Every elevation shadow is a wide, very diffuse, low-alpha wash in the
+     ambient hues, over a near-neutral micro-shadow that still does the honest
+     work of separating the card from the page.
+     The effect is a white card floating over a canvas that is quietly colored
+     underneath it — the same spectral identity as the dark theme, achieved with
+     the one lighting trick that survives a white background.
+     Mixed from `--ambient-1..3` rather than literals, so an app that re-brands
+     its atmosphere re-brands its shadows in the same breath. */
+  --shadow-raised:
+    0 1px 2px rgb(15 23 42 / 0.05),
+    0 2px 8px -4px color-mix(in srgb, var(--ambient-2) 24%, transparent); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --shadow-overlay:
+    0 2px 6px -2px rgb(15 23 42 / 0.06),
+    0 18px 44px -16px color-mix(in srgb, var(--ambient-2) 36%, transparent),
+    0 10px 26px -12px color-mix(in srgb, var(--ambient-1) 24%, transparent); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --shadow-popover:
+    0 4px 10px -3px rgb(15 23 42 / 0.08),
+    0 26px 60px -18px color-mix(in srgb, var(--ambient-2) 42%, transparent),
+    0 12px 30px -14px color-mix(in srgb, var(--ambient-3) 22%, transparent); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --glass-bg: rgb(255 255 255 / 0.74); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --glass-bg-strong: rgb(255 255 255 / 0.88); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --glass-edge: rgb(15 23 42 / 0.09); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --glass-shadow: 0 14px 36px -16px rgb(15 23 42 / 0.28); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --ambient-strength: 0.14;
+
+  /* 🔴 The one-indirection trap. `--field-bg: var(--background)` (and the four
+     beside it) is declared at `:root`, where it ALREADY computed against the
+     default `--background`; a descendant re-binding `--background` does not
+     re-run that computation, so a nested aurora scope would render light fields
+     on a dark canvas. Re-declaring them here re-resolves them in this scope.
+     Harmless when the scope is `<html>` itself (same element, same answer) —
+     which is exactly why it is written unconditionally rather than "when nested". */
+  --field-bg: var(--background);
+  --field-bg-solid: var(--field-bg);
+  --field-border: var(--border);
+  --field-fg: var(--foreground);
+  --field-placeholder: var(--muted-foreground);
+  --field-ring: var(--ring);
+}
+
+.cb-aurora.dark,
+.dark .cb-aurora {
+  /* The elevation ladder the "premium dark SaaS" look runs on: never #000 (it
+     destroys depth), always a hint of indigo, each step lighter than the last —
+     canvas < panel < card < raised < overlay. Contrast against `--card` is
+     measured, not guessed: `--muted-foreground` 6.98:1 (AA at metadata sizes),
+     `--border-strong` 3.29:1 (the WCAG non-text floor for interactive edges),
+     `--border` 1.59:1 (quiet but traceable — the default theme's is 1.60:1). */
+  --background: #080b16; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --foreground: #eef2ff; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --surface: #0e1424; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --card: #111830; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --card-foreground: #eef2ff; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --card-raised: #161e38; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --card-overlay: #1d2647; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --popover: #161e38; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --popover-foreground: #eef2ff; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --muted: #1a2238; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --muted-foreground: #97a3c4; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --surface-sunken: #070b15; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --border: #2f3b5c; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --border-strong: #5f6b82; /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --rule: color-mix(in srgb, var(--border) 55%, transparent);
+  /* The "lift the panel off the page" shadow the dark look needs; a near-black
+     canvas swallows the default 1px anchor entirely. */
+  --shadow-raised: 0 2px 6px -2px rgb(0 0 0 / 0.5); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --shadow-overlay: 0 20px 40px -15px rgb(0 0 0 / 0.62); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --shadow-popover: 0 24px 60px -12px rgb(0 0 0 / 0.72); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --glass-bg: rgb(148 163 184 / 0.07); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --glass-bg-strong: rgb(148 163 184 / 0.12); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --glass-edge: rgb(148 163 184 / 0.16); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --glass-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.6); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* Tuned DOWN from 0.22 against a real screen (2026-08-02). At 0.22 the field stopped
+     being weather and became a gradient the content had to compete with: the sidebar read
+     cyan on one edge and violet on the other, and the spine looked tinted rather than
+     lit. Ambient light is supposed to be noticed only when you look for it. */
+  --ambient-strength: 0.13;
+
+  /* Fields are glass here rather than a flat well — see the indirection note above. */
+  --field-bg: rgb(148 163 184 / 0.08); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  /* 🔴 …and glass is precisely why this scope MUST re-point the opaque twin. 8%
+     slate over nothing is white, which is the Windows dropdown bug in one line.
+     --popover, not --card: a native select's list IS a popover, so it lands on
+     the surface every other floating list in this scope already uses. */
+  --field-bg-solid: var(--popover);
+  --field-border: rgb(148 163 184 / 0.2); /* guardrails-ignore no-hardcoded-colors: this file IS the theme token source of truth — every value here is necessarily a literal color definition */
+  --field-fg: var(--foreground);
+  --field-placeholder: var(--muted-foreground);
+  --field-ring: var(--ring);
+}
+
+/*
+ * ────────────────────────── The DENSE workspace scope ───────────────────────
+ *
+ * `.cb-dense` on a workspace container compresses the control scale and the row
+ * rhythm for everything inside it — Button, Input, Select, Badge, every table
+ * built on `.cb-table`, every `Surface pad="md"`. One class, because these are
+ * TOKENS: no component needs a `density` prop and no call site needs a second
+ * set of class strings.
+ *
+ * ── Why a scope and not a global change ─────────────────────────────────────
+ * Density is a property of the SURFACE, not of the product. A marketing page, a
+ * sign-in card and a settings form want the roomy default; an admin grid showing
+ * fifteen accounts against fifteen apps wants every pixel back. Making it global
+ * would shrink the sign-in button; making it a prop would mean threading it
+ * through every component in the tree. A scope is the only shape that is one
+ * decision at the top and zero decisions everywhere else.
+ *
+ * ── What it is NOT ──────────────────────────────────────────────────────────
+ * It does not touch a single COLOR or FONT SIZE token: contrast is audited and
+ * body text has a legibility floor, so "denser" must never quietly become
+ * "grayer" or "smaller everywhere". It moves boxes closer together; the type
+ * scale below (`--text-data` / `--text-meta`) is chosen per element, on purpose,
+ * so a 13px data cell is a deliberate call rather than a side effect of a scope
+ * three ancestors up.
+ */
+.cb-dense {
+  --control-h-sm: 28px;
+  --control-h-md: 32px;
+  --control-h-lg: 36px;
+  --panel-pad: 12px;
+  --row-pad-y: 0.375rem; /* 6px */
+  --row-pad-x: 0.75rem; /* 12px */
+  --row-h: 2rem;
+}
+
+/*
+ * Every app shell paints its OWN root node with `bg-background` (core-engine's
+ * `shell.tsx`), but that div's box can be shorter than the actual document (a
+ * `100dvh` mismatch, a portal-appended overlay inflating body height, a
+ * full-page capture tool resizing past the viewport) — whatever peeks out
+ * below/beside it renders the raw UA default (white), even with `.dark`
+ * active on `<html>`. Painting `html`/`body` themselves closes that gap so
+ * the page is NEVER white-bottomed in dark mode, regardless of what any
+ * consumer's shell does above. `color-scheme` also fixes native chrome
+ * (scrollbars, form controls) to match, for free.
+ */
+html {
+  background-color: var(--background);
+  color-scheme: light;
+}
+.dark {
+  color-scheme: dark;
+}
+body {
+  background-color: var(--background);
+  color: var(--foreground);
+}
+
+/*
+ * ───────────── The native <select>'s own list, which the PAGE cannot reach ────
+ *
+ * 🔴 An element rule, deliberately global and deliberately not a class. An
+ * `<option>` is rendered by the BROWSER in its own popup window, so it inherits
+ * nothing useful from the page and no component can wrap it: the only way to
+ * reach every one of them — including the 22 hand-rolled `<select>`s across the
+ * fleet's apps, and the ones written next week — is the element selector. There
+ * is nothing to collide with, because nothing else styles an `<option>`.
+ *
+ * WHAT IT FIXES. Chrome on Windows paints the popup from the `<select>`'s own
+ * computed `background-color` and gives every option the `<select>`'s `color`.
+ * `--field-bg` is `rgb(148 163 184 / 0.08)` in the aurora scope — 8% slate, with
+ * nothing behind it out there, so Chrome composites it onto its white popup base
+ * and then writes `#eef2ff` text on it. A relative opened the family tree on
+ * Windows/Chrome (2026-08-12) and reported "white areas instead of the choices".
+ * They were not missing: they were white on white.
+ *
+ * WHY NOBODY HERE SAW IT. On macOS Chrome hands the list to a native menu, which
+ * ignores author CSS entirely and honours `color-scheme` — so the same markup is
+ * correct on the machine every one of these controls was written on. That is the
+ * whole shape of this bug and the reason it needs a token rather than a fix at
+ * one call site.
+ *
+ * `--field-bg-solid` is the opaque twin of `--field-bg` (declared beside it, in
+ * every scope that re-binds it). `color-scheme` is set here as well as inherited,
+ * so the popup's scrollbar and highlight match the list they are drawn on.
+ */
+select {
+  color-scheme: inherit;
+}
+option,
+optgroup {
+  background-color: var(--field-bg-solid);
+  color: var(--field-fg);
+}
+option:disabled {
+  color: var(--field-placeholder);
 }
 
 /*
@@ -168,19 +825,32 @@
   --color-muted-foreground: var(--muted-foreground);
   --color-border: var(--border);
   --color-border-strong: var(--border-strong);
+  /* border-rule / divide-rule — the quiet INTERNAL divider (see --rule above).
+     `divide-rule` is the one most call sites want: `divide-y divide-rule` on a
+     row container is the whole dense-table separator system in two utilities. */
+  --color-rule: var(--rule);
 
   /* Accent (two-token: mode-following text/line + saturated solid fill) */
   --color-accent: var(--accent);
   --color-accent-hover: var(--accent-hover);
   --color-accent-solid: var(--accent-solid);
   --color-accent-solid-hover: var(--accent-solid-hover);
+  --color-accent-solid-foreground: var(--accent-solid-foreground);
+  --color-accent-strong: var(--accent-strong);
 
   /* Semantic status */
   --color-ring: var(--ring);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
+  --color-destructive-solid: var(--destructive-solid);
+  --color-destructive-solid-hover: var(--destructive-solid-hover);
   --color-success: var(--success);
   --color-warning: var(--warning);
+  --color-star: var(--star);
+  /* AA-safe status TEXT over the 15% tinted badge fills */
+  --color-success-strong: var(--success-strong);
+  --color-warning-strong: var(--warning-strong);
+  --color-destructive-strong: var(--destructive-strong);
 
   /* Form field-style → bg-field-bg / border-field-border / ring-field-ring /
      text-field-fg / placeholder:text-field-placeholder / border-field-error /
@@ -189,12 +859,37 @@
      live. text-field-fg is the control TEXT color — distinct from text-field, the
      16px no-zoom font-SIZE utility below. */
   --color-field-bg: var(--field-bg);
+  /* bg-field-bg-solid — the opaque twin, for a control whose own painting leaves
+     the page (a native <select>'s list) or that sits over an image rather than a
+     surface. See the `option, optgroup` rule above for why it has to exist. */
+  --color-field-bg-solid: var(--field-bg-solid);
   --color-field-border: var(--field-border);
   --color-field-ring: var(--field-ring);
   --color-field-fg: var(--field-fg);
   --color-field-placeholder: var(--field-placeholder);
   --color-field-error: var(--field-error);
   --radius-field: var(--field-radius);
+  /* Recessed/inset surface → bg-surface-sunken utility (.cb-code reads the raw
+     var directly since it's a plain CSS class, not a Tailwind utility — this
+     alias just makes the same token available to component classNames too). */
+  --color-surface-sunken: var(--surface-sunken);
+
+  /* Control height scale → h-control-sm / h-control-md / h-control-lg (and,
+     since Tailwind's spacing namespace is shared across utilities, also
+     w-control-* / min-h-control-* etc. if ever needed for a square control).
+     Components mostly reference the raw var via `h-[var(--control-h-md)]` —
+     both stay in lockstep since the utility is `inline` (tracks the live var). */
+  --spacing-control-sm: var(--control-h-sm);
+  --spacing-control-md: var(--control-h-md);
+  --spacing-control-lg: var(--control-h-lg);
+  /* Panel/card body padding → p-panel-pad utility. */
+  --spacing-panel-pad: var(--panel-pad);
+  /* Row rhythm → py-row-y / px-row-x / min-h-row utilities, so a hand-built row
+     (a list item, a virtualised grid line) shares the exact rhythm `.cb-table`
+     uses and follows `.cb-dense` for free. */
+  --spacing-row-y: var(--row-pad-y);
+  --spacing-row-x: var(--row-pad-x);
+  --spacing-row: var(--row-h);
 
   /* Chart series → bg-chart-1 … text-chart-8 utilities (follow light/dark + accent
      live). useChartTokens reads the raw --chart-N vars off the chart element; these
@@ -208,6 +903,45 @@
   --color-chart-7: var(--chart-7);
   --color-chart-8: var(--chart-8);
 
+  /* Categorical tones → bg-tone-<hue>-bg / text-tone-<hue>-fg (the filled pill)
+     and text-tone-<hue>-ink (a standalone icon tint on the page background). */
+  --color-tone-emerald-bg: var(--tone-emerald-bg);
+  --color-tone-emerald-fg: var(--tone-emerald-fg);
+  --color-tone-emerald-ink: var(--tone-emerald-ink);
+  --color-tone-sky-bg: var(--tone-sky-bg);
+  --color-tone-sky-fg: var(--tone-sky-fg);
+  --color-tone-sky-ink: var(--tone-sky-ink);
+  --color-tone-cyan-bg: var(--tone-cyan-bg);
+  --color-tone-cyan-fg: var(--tone-cyan-fg);
+  --color-tone-cyan-ink: var(--tone-cyan-ink);
+  --color-tone-amber-bg: var(--tone-amber-bg);
+  --color-tone-amber-fg: var(--tone-amber-fg);
+  --color-tone-amber-ink: var(--tone-amber-ink);
+  --color-tone-purple-bg: var(--tone-purple-bg);
+  --color-tone-purple-fg: var(--tone-purple-fg);
+  --color-tone-purple-ink: var(--tone-purple-ink);
+  --color-tone-rose-bg: var(--tone-rose-bg);
+  --color-tone-rose-fg: var(--tone-rose-fg);
+  --color-tone-rose-ink: var(--tone-rose-ink);
+  --color-tone-orange-bg: var(--tone-orange-bg);
+  --color-tone-orange-fg: var(--tone-orange-fg);
+  --color-tone-orange-ink: var(--tone-orange-ink);
+  --color-tone-slate-bg: var(--tone-slate-bg);
+  --color-tone-slate-fg: var(--tone-slate-fg);
+  --color-tone-slate-ink: var(--tone-slate-ink);
+  --color-tone-lime-bg: var(--tone-lime-bg);
+  --color-tone-lime-fg: var(--tone-lime-fg);
+  --color-tone-lime-ink: var(--tone-lime-ink);
+  --color-tone-teal-bg: var(--tone-teal-bg);
+  --color-tone-teal-fg: var(--tone-teal-fg);
+  --color-tone-teal-ink: var(--tone-teal-ink);
+  --color-tone-violet-bg: var(--tone-violet-bg);
+  --color-tone-violet-fg: var(--tone-violet-fg);
+  --color-tone-violet-ink: var(--tone-violet-ink);
+  --color-tone-fuchsia-bg: var(--tone-fuchsia-bg);
+  --color-tone-fuchsia-fg: var(--tone-fuchsia-fg);
+  --color-tone-fuchsia-ink: var(--tone-fuchsia-ink);
+
   /* Radius scale (larger surface → larger radius, reinforcing elevation) */
   --radius-sm: 0.375rem; /* chips */
   --radius-md: 0.5rem; /* inputs, buttons */
@@ -236,4 +970,29 @@
   /* Field text: 16px on mobile = no iOS focus-zoom (the no-zoom rule as a token).
      Exposed as the text-field font-size utility. */
   --text-field: 1rem;
+
+  /* ---- The high-density data scale (text-data / text-meta / text-caption) ---
+     Three sizes below `text-sm`, because in a dense workspace hierarchy is
+     carried by WEIGHT and COLOR, not by big jumps in size — a 20px section
+     header over 13px rows reads as structure; 16px over 14px reads as noise.
+     Each is a semantic role, so a future decision to loosen the grid is one
+     value here rather than a sweep of `text-[13px]` literals:
+       text-caption  12px  column headers, chip/label text, dense buttons
+       text-data     13px  the primary value in a table cell or a list row
+       text-meta     12px  the secondary line under it (dates, ids, counts)
+     13px over 14px is worth ~1 extra row per 14 on a laptop screen and costs
+     nothing in legibility at these weights.
+
+     🔴 --text-meta was 11px until 2026-08-19 (unit 11). DESIGN.md §4 states a
+     FLOOR — "secondary metadata variables, text placeholders, and descriptions
+     must maintain a minimum body scale of 12px–13px" — and DESIGN.md wins on
+     every conflict, so an 11px step in the shared scale was the law being broken
+     by the design system itself, in every app, by default. The ROLE survives (it
+     is still where a secondary line goes, and it is still paired with
+     --muted-foreground); only its value moved up to the floor. The
+     `micro-typography-floor` guardrail is what keeps a `text-[11px]` from being
+     written by hand instead. */
+  --text-caption: 0.75rem;
+  --text-data: 0.8125rem;
+  --text-meta: 0.75rem;
 }