tyrell-components 1.0.0-TC34 → 1.0.0-TC36

package/css/tyrell-brand.css

@@ -130,8 +130,13 @@
   --ty-danger-hue: 25;
   --ty-danger-chroma: calc(var(--ty-brand-chroma) * 1.31);
 
-  --ty-neutral-hue: var(--ty-brand-hue);
-  --ty-neutral-chroma: calc(var(--ty-brand-chroma) * 0.04);
+  /* Neutral is ACHROMATIC by default — greys do not follow the brand.
+   * Most of an interface is monochrome; a rebrand should not drift it.
+   * To warm greys toward the brand (the pre-2026-08 behavior), opt in:
+   *   --ty-neutral-hue: var(--ty-brand-hue);
+   *   --ty-neutral-chroma: calc(var(--ty-brand-chroma) * 0.04); */
+  --ty-neutral-hue: 0;
+  --ty-neutral-chroma: 0;
 
   /* ----------------------------------------------------------------
    * Tier 3 — L-CURVE (light mode)
@@ -150,6 +155,33 @@
   --ty-l-bg-bold: 0.92;
   --ty-l-bg-soft: 0.98;
 
+  /* Text ladder (--ty-text-*) and surface borders — historically
+   * hardcoded hexes in tyrell.css that a rebrand never touched; now
+   * engine-wired at the SAME lightness the hexes had (measured via
+   * oklch(from #hex l c h)), tinted by the neutral seeds. At the
+   * default --ty-neutral-chroma (≈0.005) the tint is imperceptible. */
+  --ty-l-text-strong: 0; /* was #000 */
+  --ty-l-text-bold: 0; /* was #000 */
+  --ty-l-text-base: 0.21; /* was #111827 */
+  --ty-l-text-soft: 0.37; /* was #374151 */
+  --ty-l-text-faint: 0.71; /* was #9ca3af */
+
+  --ty-l-border-content: 0.93; /* was #e5e7eb */
+  --ty-l-border-elevated: 0.93;
+  --ty-l-border-floating: 0.93;
+
+  /* Generic border ladder — borders are their OWN family, not ink.
+   * Historically --ty-border-* aliased the neutral text ramp; that tied
+   * app chrome to the text emphasis curve (and to --ty-neutral-l-factor),
+   * so tuning text moved every border. Defaults preserve the exact L the
+   * aliases produced. Borders sit relative to the surfaces they separate;
+   * tune them here without touching text. */
+  --ty-l-border-strong: 0.46; /* was color-neutral-bold */
+  --ty-l-border-bold: 0.64;
+  --ty-l-border: 0.76; /* was color-neutral-soft */
+  --ty-l-border-soft: 0.88; /* was color-neutral-faint */
+  --ty-l-border-faint: 0.92;
+
   /* ----------------------------------------------------------------
    * Tier 4 — SATURATION CURVE
    * Per-shade chroma multipliers. Each shade's chroma =
@@ -235,6 +267,25 @@ html[data-theme="dark"] {
   --ty-l-bg-bold: 0.26;
   --ty-l-bg-soft: 0.19;
 
+  /* Text ladder + surface borders dark — L matched to the hexes
+   * tyrell.css used to hardcode (#fff/#f9fafb/#d6d6d6/#7f8590/#555a63,
+   * borders #030712/#414141/#494949). */
+  --ty-l-text-strong: 1;
+  --ty-l-text-bold: 0.985;
+  --ty-l-text-base: 0.88;
+  --ty-l-text-soft: 0.62;
+  --ty-l-text-faint: 0.47;
+
+  --ty-l-border-content: 0.13;
+  --ty-l-border-elevated: 0.375;
+  --ty-l-border-floating: 0.41;
+
+  --ty-l-border-strong: 0.66;
+  --ty-l-border-bold: 0.46;
+  --ty-l-border: 0.38;
+  --ty-l-border-soft: 0.3;
+  --ty-l-border-faint: 0.3;
+
   /* Tier 4 dark — dim shades hold more chroma so they don't grey out;
    * strong shades trim chroma so bright tones don't over-pop. */
   --ty-c-strong-mult: 0.77;
@@ -255,8 +306,8 @@ html[data-theme="dark"] {
   --ty-solid-strong-l: 0.06; /* tone+ */
   --ty-solid-soft-l: -0.1; /* tone- */
 
-  --ty-solid-l: -0.25; /* dim against dark canvas */
-  --ty-solid-c: 0.65; /* desaturate against dark canvas */
+  --ty-solid-l: -0.2; /* dim against dark canvas */
+  --ty-solid-c: 0.7; /* desaturate against dark canvas */
   --ty-solid-h: 0; /* hue offset */
 }
 
@@ -276,14 +327,18 @@ html[data-theme="dark"] {
  *       var(--ty-{flavor}-hue)                                       ← H
  *   );
  *
- * Computed tokens are declared in BOTH `:root` and `html.dark` blocks
- * because tyrell.css ships hardcoded dark-mode hexes at html.dark
- * specificity (0,1,1); our brand-layer `:root` (0,1,0) would lose
- * source-order otherwise. Same math both blocks — just different L/C
- * inputs from Tier 3/4.
+ * Formulas are declared ONCE, at `html:root` (specificity 0,1,1 — NOT
+ * plain `:root` (0,1,0)): they out-rank tyrell.css's hardcoded light
+ * tokens by specificity and its hardcoded `html.dark` hexes (0,1,1) by
+ * source order, since the brand layer loads after. Dark mode needs no
+ * formula duplicates — the dials they read (Tier 3/4, SECTION 1) are
+ * what flip per mode. The `html.dark` block at the END of this file
+ * holds only genuine per-mode DATA (surface ladder, hand-pinned
+ * absolutes) — never formulas. If you add a token here, do NOT mirror
+ * it there unless its VALUE is mode-specific.
  * ===================================================================== */
 
-:root {
+html:root {
   /* ----------------------------------------------------------------
    * Flavor color ramps (fg + bg + border)
    * --------------------------------------------------------------*/
@@ -544,18 +599,66 @@ html[data-theme="dark"] {
   );
 
   /* ----------------------------------------------------------------
-   * Global neutral borders — read off the neutral color ramp.
+   * Global neutral borders — own family, own L ladder (Tier 3).
+   * Tinted by the neutral seeds like everything grey, but NOT tied to
+   * the text emphasis curve or --ty-neutral-l-factor. Per-flavor
+   * accent borders (--ty-border-{flavor}) stay ink aliases — a colored
+   * border SHOULD track its flavor's ink.
    * --------------------------------------------------------------*/
-  --ty-border-strong: var(--ty-color-neutral-bold);
-  --ty-border: var(--ty-color-neutral-soft);
-  --ty-border-bold: var(--ty-color-neutral-soft);
-  --ty-border-soft: var(--ty-color-neutral-faint);
-  --ty-border-faint: var(--ty-color-neutral-faint);
+  --ty-border-strong: oklch(
+    var(--ty-l-border-strong) var(--ty-neutral-chroma) var(--ty-neutral-hue)
+  );
+  --ty-border: oklch(
+    var(--ty-l-border) var(--ty-neutral-chroma) var(--ty-neutral-hue)
+  );
+  --ty-border-bold: oklch(
+    var(--ty-l-border-bold) var(--ty-neutral-chroma) var(--ty-neutral-hue)
+  );
+  --ty-border-soft: oklch(
+    var(--ty-l-border-soft) var(--ty-neutral-chroma) var(--ty-neutral-hue)
+  );
+  --ty-border-faint: oklch(
+    var(--ty-l-border-faint) var(--ty-neutral-chroma) var(--ty-neutral-hue)
+  );
+
+  /* ----------------------------------------------------------------
+   * Text ladder + surface borders — engine-wired versions of tokens
+   * tyrell.css hardcodes as hexes. Own L dials (Tier 3), neutral
+   * hue/chroma tint. These out-rank the base hexes the same way every
+   * other token here does; a rebrand now reaches body text too.
+   * --------------------------------------------------------------*/
+  --ty-text-strong: oklch(
+    var(--ty-l-text-strong) var(--ty-neutral-chroma) var(--ty-neutral-hue)
+  );
+  --ty-text-bold: oklch(
+    var(--ty-l-text-bold) var(--ty-neutral-chroma) var(--ty-neutral-hue)
+  );
+  --ty-text: oklch(
+    var(--ty-l-text-base) var(--ty-neutral-chroma) var(--ty-neutral-hue)
+  );
+  --ty-text-soft: oklch(
+    var(--ty-l-text-soft) var(--ty-neutral-chroma) var(--ty-neutral-hue)
+  );
+  --ty-text-faint: oklch(
+    var(--ty-l-text-faint) var(--ty-neutral-chroma) var(--ty-neutral-hue)
+  );
+
+  --ty-content-border: oklch(
+    var(--ty-l-border-content) var(--ty-neutral-chroma) var(--ty-neutral-hue)
+  );
+  --ty-elevated-border: oklch(
+    var(--ty-l-border-elevated) var(--ty-neutral-chroma) var(--ty-neutral-hue)
+  );
+  --ty-floating-border: oklch(
+    var(--ty-l-border-floating) var(--ty-neutral-chroma) var(--ty-neutral-hue)
+  );
 
   /* ----------------------------------------------------------------
    * Surfaces — monochrome by default; --ty-surface-chroma warms them.
    * --------------------------------------------------------------*/
-  --ty-surface-canvas: oklch(0.985 var(--ty-surface-chroma) var(--ty-brand-hue));
+  --ty-surface-canvas: oklch(
+    0.985 var(--ty-surface-chroma) var(--ty-brand-hue)
+  );
   --ty-surface-content: oklch(1 0 0);
   --ty-surface-elevated: oklch(1 0 0);
   --ty-surface-floating: oklch(1 0 0);
@@ -625,12 +728,107 @@ html:root {
       var(--ty-neutral-hue)
   );
 
-  --ty-solid-primary-fg: white;
-  --ty-solid-secondary-fg: white;
-  --ty-solid-success-fg: white;
-  --ty-solid-danger-fg: white;
-  --ty-solid-warning-fg: white;
-  --ty-solid-neutral-fg: white;
+  /* ----------------------------------------------------------------
+   * SOLID FOREGROUNDS — auto-contrast.
+   *
+   * Each fill gets a foreground picked from its OWN lightness, so a
+   * rebrand (--ty-brand-hue / --ty-brand-chroma / any L-curve override)
+   * can't strand white text on a pale fill. Branchless, no JS:
+   *
+   *   clamp(0, (threshold - l) * 1000, 1)  ->  1 (white) when the fill
+   *   is darker than the threshold, 0 (black) when it's lighter.
+   *
+   * One token per FILL, not per flavor — base / -soft (tone-) / -strong
+   * (tone+) each carry a different L, so each needs its own decision.
+   * Declared once: the oklch(from ...) formulas re-resolve per mode,
+   * because html.dark redefines the fills these read.
+   *
+   * TO REVERT to the old fixed-white behaviour, override in your app:
+   *   :root { --ty-solid-primary-fg: white; ... }
+   * or set --ty-solid-fg-threshold: 1 to force white everywhere.
+   * --------------------------------------------------------------*/
+
+  /* Crossover point. Fills lighter than this get black text. ~0.58-0.62
+     is the sRGB break-even; higher = prefers white, lower = prefers black. */
+  --ty-solid-fg-threshold: 0.62;
+
+  --ty-solid-primary-fg: oklch(
+    from var(--ty-solid-primary)
+      clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
+  );
+  --ty-solid-primary-soft-fg: oklch(
+    from var(--ty-solid-primary-soft)
+      clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
+  );
+  --ty-solid-primary-strong-fg: oklch(
+    from var(--ty-solid-primary-strong)
+      clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
+  );
+
+  --ty-solid-secondary-fg: oklch(
+    from var(--ty-solid-secondary)
+      clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
+  );
+  --ty-solid-secondary-soft-fg: oklch(
+    from var(--ty-solid-secondary-soft)
+      clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
+  );
+  --ty-solid-secondary-strong-fg: oklch(
+    from var(--ty-solid-secondary-strong)
+      clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
+  );
+
+  --ty-solid-success-fg: oklch(
+    from var(--ty-solid-success)
+      clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
+  );
+  --ty-solid-success-soft-fg: oklch(
+    from var(--ty-solid-success-soft)
+      clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
+  );
+  --ty-solid-success-strong-fg: oklch(
+    from var(--ty-solid-success-strong)
+      clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
+  );
+
+  --ty-solid-danger-fg: oklch(
+    from var(--ty-solid-danger)
+      clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
+  );
+  --ty-solid-danger-soft-fg: oklch(
+    from var(--ty-solid-danger-soft)
+      clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
+  );
+  --ty-solid-danger-strong-fg: oklch(
+    from var(--ty-solid-danger-strong)
+      clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
+  );
+
+  --ty-solid-warning-fg: oklch(
+    from var(--ty-solid-warning)
+      clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
+  );
+  --ty-solid-warning-soft-fg: oklch(
+    from var(--ty-solid-warning-soft)
+      clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
+  );
+  --ty-solid-warning-strong-fg: oklch(
+    from var(--ty-solid-warning-strong)
+      clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
+  );
+
+  --ty-solid-neutral-fg: oklch(
+    from var(--ty-solid-neutral)
+      clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
+  );
+  --ty-solid-neutral-soft-fg: oklch(
+    from var(--ty-solid-neutral-soft)
+      clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
+  );
+  --ty-solid-neutral-strong-fg: oklch(
+    from var(--ty-solid-neutral-strong)
+      clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
+  );
 
   /* derived states — axis 2 offsets on each base fill */
   --ty-solid-primary-hover: oklch(
@@ -713,262 +911,39 @@ html:root {
 }
 
 /* =====================================================================
- * SECTION 2 DARK — same computations re-declared so html.dark (0,1,1)
- * matches tyrell.css's hardcoded dark-mode hexes at source-order
- * specificity. The math is identical to the :root block above; only
- * the L/C inputs differ (from html.dark's Tier 3/4 overrides).
+ * SECTION 2 DARK — PER-MODE DATA ONLY
+ * =====================================================================
+ * No formulas here. Every computed token is declared once at html:root
+ * above and resolves per-mode through its dial inputs (SECTION 1 flips
+ * those at html.dark). This block holds only values that ARE the dark
+ * design data — hand-tuned absolutes with no light-mode derivation.
  * ===================================================================== */
 
 html.dark,
 html[data-theme="dark"] {
-  /* Primary */
-  --ty-color-primary-strong: oklch(
-    calc(var(--ty-l-strong) * var(--ty-primary-l-factor))
-      calc(var(--ty-brand-chroma) * var(--ty-c-strong-mult)) var(--ty-brand-hue)
-  );
-  --ty-color-primary-bold: oklch(
-    calc(var(--ty-l-bold) * var(--ty-primary-l-factor))
-      calc(var(--ty-brand-chroma) * var(--ty-c-bold-mult)) var(--ty-brand-hue)
-  );
-  --ty-color-primary: oklch(
-    calc(var(--ty-l-base) * var(--ty-primary-l-factor))
-      calc(var(--ty-brand-chroma) * var(--ty-c-base-mult)) var(--ty-brand-hue)
-  );
-  --ty-color-primary-soft: oklch(
-    calc(var(--ty-l-soft) * var(--ty-primary-l-factor))
-      calc(var(--ty-brand-chroma) * var(--ty-c-soft-mult)) var(--ty-brand-hue)
-  );
-  --ty-color-primary-faint: oklch(
-    calc(var(--ty-l-faint) * var(--ty-primary-l-factor))
-      calc(var(--ty-brand-chroma) * var(--ty-c-faint-mult)) var(--ty-brand-hue)
-  );
-  --ty-bg-primary: oklch(
-    calc(var(--ty-l-bg-base) * var(--ty-primary-l-factor))
-      calc(var(--ty-brand-chroma) * var(--ty-c-bg-base-mult))
-      var(--ty-brand-hue)
-  );
-  --ty-bg-primary-bold: oklch(
-    calc(var(--ty-l-bg-bold) * var(--ty-primary-l-factor))
-      calc(var(--ty-brand-chroma) * var(--ty-c-bg-bold-mult))
-      var(--ty-brand-hue)
-  );
-  --ty-bg-primary-soft: oklch(
-    calc(var(--ty-l-bg-soft) * var(--ty-primary-l-factor))
-      calc(var(--ty-brand-chroma) * var(--ty-c-bg-soft-mult))
-      var(--ty-brand-hue)
-  );
-  --ty-border-primary: var(--ty-color-primary-soft);
-
-  /* Secondary */
-  --ty-color-secondary-strong: oklch(
-    calc(var(--ty-l-strong) * var(--ty-secondary-l-factor))
-      calc(var(--ty-secondary-chroma) * var(--ty-c-strong-mult))
-      var(--ty-secondary-hue)
-  );
-  --ty-color-secondary-bold: oklch(
-    calc(var(--ty-l-bold) * var(--ty-secondary-l-factor))
-      calc(var(--ty-secondary-chroma) * var(--ty-c-bold-mult))
-      var(--ty-secondary-hue)
-  );
-  --ty-color-secondary: oklch(
-    calc(var(--ty-l-base) * var(--ty-secondary-l-factor))
-      calc(var(--ty-secondary-chroma) * var(--ty-c-base-mult))
-      var(--ty-secondary-hue)
-  );
-  --ty-color-secondary-soft: oklch(
-    calc(var(--ty-l-soft) * var(--ty-secondary-l-factor))
-      calc(var(--ty-secondary-chroma) * var(--ty-c-soft-mult))
-      var(--ty-secondary-hue)
-  );
-  --ty-color-secondary-faint: oklch(
-    calc(var(--ty-l-faint) * var(--ty-secondary-l-factor))
-      calc(var(--ty-secondary-chroma) * var(--ty-c-faint-mult))
-      var(--ty-secondary-hue)
-  );
-  --ty-bg-secondary: oklch(
-    calc(var(--ty-l-bg-base) * var(--ty-secondary-l-factor))
-      calc(var(--ty-secondary-chroma) * var(--ty-c-bg-base-mult))
-      var(--ty-secondary-hue)
-  );
-  --ty-bg-secondary-bold: oklch(
-    calc(var(--ty-l-bg-bold) * var(--ty-secondary-l-factor))
-      calc(var(--ty-secondary-chroma) * var(--ty-c-bg-bold-mult))
-      var(--ty-secondary-hue)
-  );
-  --ty-bg-secondary-soft: oklch(
-    calc(var(--ty-l-bg-soft) * var(--ty-secondary-l-factor))
-      calc(var(--ty-secondary-chroma) * var(--ty-c-bg-soft-mult))
-      var(--ty-secondary-hue)
-  );
-  --ty-border-secondary: var(--ty-color-secondary-soft);
-
-  /* Success */
-  --ty-color-success-strong: oklch(
-    calc(var(--ty-l-strong) * var(--ty-success-l-factor))
-      calc(var(--ty-success-chroma) * var(--ty-c-strong-mult))
-      var(--ty-success-hue)
-  );
-  --ty-color-success-bold: oklch(
-    calc(var(--ty-l-bold) * var(--ty-success-l-factor))
-      calc(var(--ty-success-chroma) * var(--ty-c-bold-mult))
-      var(--ty-success-hue)
-  );
-  --ty-color-success: oklch(
-    calc(var(--ty-l-base) * var(--ty-success-l-factor))
-      calc(var(--ty-success-chroma) * var(--ty-c-base-mult))
-      var(--ty-success-hue)
-  );
-  --ty-color-success-soft: oklch(
-    calc(var(--ty-l-soft) * var(--ty-success-l-factor))
-      calc(var(--ty-success-chroma) * var(--ty-c-soft-mult))
-      var(--ty-success-hue)
-  );
-  --ty-color-success-faint: oklch(
-    calc(var(--ty-l-faint) * var(--ty-success-l-factor))
-      calc(var(--ty-success-chroma) * var(--ty-c-faint-mult))
-      var(--ty-success-hue)
-  );
-  --ty-bg-success: oklch(
-    calc(var(--ty-l-bg-base) * var(--ty-success-l-factor))
-      calc(var(--ty-success-chroma) * var(--ty-c-bg-base-mult))
-      var(--ty-success-hue)
-  );
-  --ty-bg-success-bold: oklch(
-    calc(var(--ty-l-bg-bold) * var(--ty-success-l-factor))
-      calc(var(--ty-success-chroma) * var(--ty-c-bg-bold-mult))
-      var(--ty-success-hue)
-  );
-  --ty-bg-success-soft: oklch(
-    calc(var(--ty-l-bg-soft) * var(--ty-success-l-factor))
-      calc(var(--ty-success-chroma) * var(--ty-c-bg-soft-mult))
-      var(--ty-success-hue)
-  );
-  --ty-border-success: var(--ty-color-success-soft);
-
-  /* Danger */
-  --ty-color-danger-strong: oklch(
-    calc(var(--ty-l-strong) * var(--ty-danger-l-factor))
-      calc(var(--ty-danger-chroma) * var(--ty-c-strong-mult))
-      var(--ty-danger-hue)
-  );
-  --ty-color-danger-bold: oklch(
-    calc(var(--ty-l-bold) * var(--ty-danger-l-factor))
-      calc(var(--ty-danger-chroma) * var(--ty-c-bold-mult)) var(--ty-danger-hue)
-  );
-  --ty-color-danger: oklch(
-    calc(var(--ty-l-base) * var(--ty-danger-l-factor))
-      calc(var(--ty-danger-chroma) * var(--ty-c-base-mult)) var(--ty-danger-hue)
-  );
-  --ty-color-danger-soft: oklch(
-    calc(var(--ty-l-soft) * var(--ty-danger-l-factor))
-      calc(var(--ty-danger-chroma) * var(--ty-c-soft-mult)) var(--ty-danger-hue)
-  );
-  --ty-color-danger-faint: oklch(
-    calc(var(--ty-l-faint) * var(--ty-danger-l-factor))
-      calc(var(--ty-danger-chroma) * var(--ty-c-faint-mult))
-      var(--ty-danger-hue)
-  );
-  --ty-bg-danger: oklch(
-    calc(var(--ty-l-bg-base) * var(--ty-danger-l-factor))
-      calc(var(--ty-danger-chroma) * var(--ty-c-bg-base-mult))
-      var(--ty-danger-hue)
+  /* Surface ladder — hand-tuned; nothing to derive from light (which
+   * is 0.985 canvas + pure white everywhere else). */
+  --ty-surface-canvas: oklch(0.12 var(--ty-surface-chroma) var(--ty-brand-hue));
+  --ty-surface-content: oklch(
+    0.16 var(--ty-surface-chroma) var(--ty-brand-hue)
   );
-  --ty-bg-danger-bold: oklch(
-    calc(var(--ty-l-bg-bold) * var(--ty-danger-l-factor))
-      calc(var(--ty-danger-chroma) * var(--ty-c-bg-bold-mult))
-      var(--ty-danger-hue)
+  --ty-surface-elevated: oklch(
+    0.19 var(--ty-surface-chroma) var(--ty-brand-hue)
   );
-  --ty-bg-danger-soft: oklch(
-    calc(var(--ty-l-bg-soft) * var(--ty-danger-l-factor))
-      calc(var(--ty-danger-chroma) * var(--ty-c-bg-soft-mult))
-      var(--ty-danger-hue)
+  --ty-surface-floating: oklch(
+    0.22 var(--ty-surface-chroma) var(--ty-brand-hue)
   );
-  --ty-border-danger: var(--ty-color-danger-soft);
+  --ty-surface-input: oklch(0.18 var(--ty-surface-chroma) var(--ty-brand-hue));
 
-  /* Warning */
-  --ty-color-warning-strong: oklch(
-    calc(var(--ty-l-strong) * var(--ty-warning-l-factor))
-      calc(var(--ty-warning-chroma) * var(--ty-c-strong-mult))
-      var(--ty-warning-hue)
-  );
-  --ty-color-warning-bold: oklch(
-    calc(var(--ty-l-bold) * var(--ty-warning-l-factor))
-      calc(var(--ty-warning-chroma) * var(--ty-c-bold-mult))
-      var(--ty-warning-hue)
-  );
-  --ty-color-warning: oklch(
-    calc(var(--ty-l-base) * var(--ty-warning-l-factor))
-      calc(var(--ty-warning-chroma) * var(--ty-c-base-mult))
-      var(--ty-warning-hue)
-  );
-  --ty-color-warning-soft: oklch(
-    calc(var(--ty-l-soft) * var(--ty-warning-l-factor))
-      calc(var(--ty-warning-chroma) * var(--ty-c-soft-mult))
-      var(--ty-warning-hue)
-  );
-  --ty-color-warning-faint: oklch(
-    calc(var(--ty-l-faint) * var(--ty-warning-l-factor))
-      calc(var(--ty-warning-chroma) * var(--ty-c-faint-mult))
-      var(--ty-warning-hue)
-  );
-  --ty-bg-warning: oklch(
-    calc(var(--ty-l-bg-base) * var(--ty-warning-l-factor))
-      calc(var(--ty-warning-chroma) * var(--ty-c-bg-base-mult))
-      var(--ty-warning-hue)
-  );
-  --ty-bg-warning-bold: oklch(
-    calc(var(--ty-l-bg-bold) * var(--ty-warning-l-factor))
-      calc(var(--ty-warning-chroma) * var(--ty-c-bg-bold-mult))
-      var(--ty-warning-hue)
-  );
-  --ty-bg-warning-soft: oklch(
-    calc(var(--ty-l-bg-soft) * var(--ty-warning-l-factor))
-      calc(var(--ty-warning-chroma) * var(--ty-c-bg-soft-mult))
-      var(--ty-warning-hue)
+  /* Focus ring needs more alpha against dark surfaces (light: 5%). */
+  --ty-input-shadow-focus: color-mix(
+    in oklab,
+    var(--ty-color-primary) 20%,
+    transparent
   );
-  --ty-border-warning: var(--ty-color-warning-soft);
 
-  /* Neutral */
-  --ty-color-neutral-strong: oklch(
-    calc(var(--ty-l-strong) * var(--ty-neutral-l-factor))
-      calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
-      var(--ty-neutral-hue)
-  );
-  --ty-color-neutral-bold: oklch(
-    calc(var(--ty-l-bold) * var(--ty-neutral-l-factor))
-      calc(var(--ty-neutral-chroma) * var(--ty-c-bold-mult))
-      var(--ty-neutral-hue)
-  );
-  --ty-color-neutral: oklch(
-    calc(var(--ty-l-base) * var(--ty-neutral-l-factor))
-      calc(var(--ty-neutral-chroma) * var(--ty-c-base-mult))
-      var(--ty-neutral-hue)
-  );
-  --ty-color-neutral-soft: oklch(
-    calc(var(--ty-l-soft) * var(--ty-neutral-l-factor))
-      calc(var(--ty-neutral-chroma) * var(--ty-c-soft-mult))
-      var(--ty-neutral-hue)
-  );
-  --ty-color-neutral-faint: oklch(
-    calc(var(--ty-l-faint) * var(--ty-neutral-l-factor))
-      calc(var(--ty-neutral-chroma) * var(--ty-c-faint-mult))
-      var(--ty-neutral-hue)
-  );
-  --ty-bg-neutral: oklch(
-    calc(var(--ty-l-bg-base) * var(--ty-neutral-l-factor))
-      calc(var(--ty-neutral-chroma) * var(--ty-c-bg-base-mult))
-      var(--ty-neutral-hue)
-  );
-  --ty-bg-neutral-bold: oklch(
-    calc(var(--ty-l-bg-bold) * var(--ty-neutral-l-factor))
-      calc(var(--ty-neutral-chroma) * var(--ty-c-bg-bold-mult))
-      var(--ty-neutral-hue)
-  );
-  --ty-bg-neutral-soft: oklch(
-    calc(var(--ty-l-bg-soft) * var(--ty-neutral-l-factor))
-      calc(var(--ty-neutral-chroma) * var(--ty-c-bg-soft-mult))
-      var(--ty-neutral-hue)
-  );
+  /* Hand-pinned bg extremes — these OPPOSE the mode (strong bg is dark
+   * in light mode, light in dark mode) so they can't ride the bg ramp. */
   --ty-bg-neutral-strong: oklch(
     0.95 calc(var(--ty-neutral-chroma) * 2) var(--ty-neutral-hue)
   );
@@ -976,40 +951,12 @@ html[data-theme="dark"] {
     0.15 calc(var(--ty-neutral-chroma) * 2) var(--ty-neutral-hue)
   );
 
-  /* Global neutral borders */
-  --ty-border-strong: var(--ty-color-neutral-bold);
-  --ty-border: var(--ty-color-neutral-soft);
-  --ty-border-bold: var(--ty-color-neutral-soft);
-  --ty-border-soft: var(--ty-color-neutral-faint);
-  --ty-border-faint: var(--ty-color-neutral-faint);
-
-  /* Surfaces — monochrome by default; --ty-surface-chroma warms them. */
-  --ty-surface-canvas: oklch(0.12 var(--ty-surface-chroma) var(--ty-brand-hue));
-  --ty-surface-content: oklch(0.16 var(--ty-surface-chroma) var(--ty-brand-hue));
-  --ty-surface-elevated: oklch(0.19 var(--ty-surface-chroma) var(--ty-brand-hue));
-  --ty-surface-floating: oklch(0.22 var(--ty-surface-chroma) var(--ty-brand-hue));
-  --ty-surface-input: oklch(0.18 var(--ty-surface-chroma) var(--ty-brand-hue));
-
-  /* Inputs — re-declared at html.dark specificity. */
-  --ty-input-bg: var(--ty-surface-input);
-  --ty-input-color: var(--ty-color-neutral-strong);
-  --ty-input-border: var(--ty-color-neutral-faint);
-  --ty-input-border-hover: var(--ty-color-neutral-soft);
-  --ty-input-border-focus: var(--ty-color-primary);
-  --ty-input-placeholder: var(--ty-color-neutral-soft);
-  --ty-input-disabled-bg: var(--ty-color-neutral-faint);
-  --ty-input-disabled-border: var(--ty-color-neutral-faint);
-  --ty-input-disabled-color: var(--ty-color-neutral-bold);
-  --ty-input-shadow-focus: color-mix(
-    in oklab,
-    var(--ty-color-primary) 20%,
-    transparent
-  );
-
-  /* Tier 6 dark — solid dials live in SECTION 1's html.dark block.
-   * neutral is hand-pinned (it ignores Axis B); dim it per theme here. */
+  /* Neutral solid fill is an "ink" — dark grey in BOTH modes (0.4 light),
+   * dimmed a notch here. It ignores the emphasis curve and Axis B. */
   --ty-solid-neutral: oklch(
-    0.3 calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
+    0.23 calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
       var(--ty-neutral-hue)
   );
+
+  --ty-neutral-l-factor: 0.8;
 }