tyrell-components 1.0.0-RC10 → 1.0.0-RC12

package/css/tyrell-brand.css

@@ -12,79 +12,132 @@
  *     --ty-brand-chroma: 0.13;
  *   }
  *
- * Primary, secondary, neutral, surfaces, inputs, solid buttons all retint.
- * Success / danger / warning stay semantic (green / red / amber) — override
- * their *-hue/*-chroma seeds if you want them to follow the brand too.
+ * =====================================================================
+ * THE FORMULA
+ * =====================================================================
+ *
+ * Every color in the library is one formula on five axes:
+ *
+ *     oklch(
+ *       L = L-curve[shade] × flavor-l-factor            ← Tier 3 × Tier 5
+ *       C = flavor-chroma  × saturation-curve[shade]    ← Tier 2 × Tier 4
+ *       H = flavor-hue                                  ← Tier 2
+ *     )
+ *
+ * Pick a flavor (primary / secondary / success / warning / danger /
+ * neutral). Pick a shade (strong / bold / base / soft / faint). That's
+ * the cell; the formula gives you its color.
+ *
+ *     FLAVOR axis  — which semantic role (carries its own hue, chroma,
+ *                    l-factor seeds)
+ *     SHADE axis   — 5 emphasis stops shared across flavors
+ *                    (strong / bold / base / soft / faint)
+ *     HUE axis     — what color family (0°–360°)
+ *     CHROMA axis  — how saturated (0 = grey, ~0.4 = max vivid)
+ *     L axis       — how dark or light (0 = black, 1 = white)
+ *                    Light mode: low L = more emphasis.
+ *                    Dark  mode: high L = more emphasis (curve flips).
+ *
+ * Worked example — `--ty-color-warning-bold` in LIGHT mode:
+ *
+ *     L = 0.46 × 1     = 0.46     ← l-bold × warning-l-factor
+ *     C = 0.26 × 1.00  = 0.26     ← warning-chroma × c-bold-mult
+ *     H = 75°                     ← warning-hue
+ *     → oklch(0.46 0.26 75)       (a punchy amber for +1 emphasis text)
+ *
+ * Want warning a notch darker without touching anything else? Set
+ * `--ty-warning-l-factor: 0.85` and the new L becomes 0.46 × 0.85 =
+ * 0.39. Every warning shade shifts in step; primary / success / danger
+ * are untouched.
+ *
+ * =====================================================================
+ * FILE LAYOUT
+ * =====================================================================
  *
- * Three layers of knobs you can override at :root (or html.dark for
- * per-mode tuning):
+ *   SECTION 1 — KNOBS
+ *     The variables you might want to override. Six tiers from drop-in
+ *     rebrand (Tier 1) to surgical per-flavor tweak (Tier 5) plus solid
+ *     buttons (Tier 6).
  *
- *   1. SEEDS — per-flavor hue + chroma.
- *      --ty-brand-hue, --ty-brand-chroma
- *      --ty-secondary-hue, --ty-secondary-chroma     (default: brand + 60°)
- *      --ty-success-hue, --ty-success-chroma         (default: 145°)
- *      --ty-danger-hue,  --ty-danger-chroma          (default:  25°)
- *      --ty-warning-hue, --ty-warning-chroma         (default:  75°)
- *      --ty-neutral-hue, --ty-neutral-chroma         (default: brand-hue, 0.005)
+ *   SECTION 2 — IMPLEMENTATION
+ *     The oklch() expressions that wire the knobs through to the actual
+ *     color tokens. Rarely needs editing — Section 1 is the contract.
  *
- *   2. L-CURVE — lightness stops shared by every flavor.
- *      --ty-l-strong, --ty-l-bold, --ty-l-base, --ty-l-soft, --ty-l-faint
- *      --ty-l-bg-base, --ty-l-bg-bold, --ty-l-bg-soft
- *      Defaults in `:root` are tuned for light mode (lower L = more
- *      emphasis). The `html.dark` block redefines them with inverted
- *      values. Override either block to compress / expand the ladder.
+ * Browser support: oklch() is in every evergreen browser since mid-2023.
+ * Tier 6 (solid) additionally uses OKLCH relative color — oklch(from …) —
+ * which lands later: Chrome 119, Safari 16.4, Firefox 128 (mid-2024).
+ * Solid fills have no fallback below those versions.
  *
- *   3. SATURATION CURVE — chroma multipliers per shade.
- *      --ty-c-strong-mult, --ty-c-bold-mult, --ty-c-base-mult,
- *      --ty-c-soft-mult, --ty-c-faint-mult
- *      --ty-c-bg-base-mult, --ty-c-bg-bold-mult, --ty-c-bg-soft-mult
- *      Multiplied against the flavor chroma seed. Bump --ty-c-bold-mult
- *      to 1.2 to make `+`-emphasis text more saturated; drop
- *      --ty-c-faint-mult to 0.2 for whisper-quiet placeholders.
+ * ===================================================================== */
+
+/* =====================================================================
+ * SECTION 1 — KNOBS
+ * =====================================================================
  *
- * Browser support: OKLCH is in every evergreen browser since mid-2023.
+ * Five tiers, ordered by how often you'd touch them. Override any of
+ * these in your own `:root` (or `html.dark` for per-mode tuning) —
+ * your declaration wins by source order.
  *
+ *   Tier 1 — SEEDS                 brand-hue + chroma. Rebrand in 2 lines.
+ *   Tier 2 — PER-FLAVOR ANCHORS    each flavor's hue + chroma.
+ *   Tier 3 — L-CURVE               5 lightness stops for the emphasis ramp.
+ *   Tier 4 — SATURATION CURVE      per-shade chroma multipliers.
+ *   Tier 5 — PER-FLAVOR L-FACTOR   per-flavor lightness multiplier — push
+ *                                  one flavor up or down without touching
+ *                                  the others. Default 1.
+ *   Tier 6 — SOLID FILLS           solid-button system: hover/active/tone
+ *                                  L offsets + per-theme dim/desaturate.
  * ===================================================================== */
 
 :root {
   /* ----------------------------------------------------------------
-   * SEEDS
+   * Tier 1 — SEEDS
+   * Brand-hue + chroma drive primary, neutral, surfaces, inputs,
+   * solid buttons. One slider rebrands the page.
    * --------------------------------------------------------------*/
 
   --ty-brand-hue: 230;
-  --ty-brand-chroma: 0.13;
+  --ty-brand-chroma: 0.12; /* restrained EU default; the loud 0.2 read as "bollywood" */
 
-  /* Every flavor's chroma tracks --ty-brand-chroma by default, at a
-   * proportion that preserves the relative saturation hierarchy (danger
-   * punchier than primary, neutral near-grey). Drag --ty-brand-chroma to
-   * 0 → everything goes greyscale; push to 0.30 → everything goes vibrant.
-   *
-   * Pin any flavor independently by setting --ty-{flavor}-chroma to a
-   * literal number (e.g. --ty-success-chroma: 0.14;). The multiplier
-   * relationship breaks for that one flavor only. */
+  /* Surface tint. 0 = monochrome surfaces (default, no brand leak).
+   * Bump to ~0.005 (light) / ~0.012 (dark) to warm surfaces toward brand. */
+  --ty-surface-chroma: 0;
 
-  /* Secondary rotates from brand by an exposed offset. Defaults to +60°
+  /* Secondary rotates from brand by an exposed offset. Default +60°
    * (sibling accent). Try 30° for a close sibling, 120° for triadic,
-   * 180° for complement. Set --ty-secondary-hue to a literal number to
-   * detach completely. */
+   * 180° for complement. Set --ty-secondary-hue to a literal number
+   * to detach completely. */
   --ty-secondary-offset: 60;
+
+  /* ----------------------------------------------------------------
+   * Tier 2 — PER-FLAVOR ANCHORS
+   * Semantic colors (success/warning/danger/neutral) have their own
+   * hue + chroma seeds so they keep meaning across brand changes.
+   * Override any individually:
+   *   --ty-success-hue: 160;     (more teal)
+   *   --ty-warning-chroma: 0.2;  (more vivid)
+   * --------------------------------------------------------------*/
+
   --ty-secondary-hue: calc(var(--ty-brand-hue) + var(--ty-secondary-offset));
   --ty-secondary-chroma: var(--ty-brand-chroma);
 
   --ty-success-hue: 145;
   --ty-success-chroma: calc(var(--ty-brand-chroma) * 1.08);
 
+  --ty-warning-hue: 75;
+  --ty-warning-chroma: calc(var(--ty-brand-chroma) * 2);
+
   --ty-danger-hue: 25;
   --ty-danger-chroma: calc(var(--ty-brand-chroma) * 1.31);
 
-  --ty-warning-hue: 75;
-  --ty-warning-chroma: calc(var(--ty-brand-chroma) * 1.15);
-
   --ty-neutral-hue: var(--ty-brand-hue);
   --ty-neutral-chroma: calc(var(--ty-brand-chroma) * 0.04);
 
   /* ----------------------------------------------------------------
-   * L-CURVE — light mode. Lower L = more emphasis.
+   * Tier 3 — L-CURVE (light mode)
+   * 5 lightness stops per flavor for the emphasis ramp.
+   * Lower L = darker = more emphasis in light mode.
+   * Plus 3 bg L stops for the soft-tint backgrounds.
    * --------------------------------------------------------------*/
 
   --ty-l-strong: 0.38; /* ++ max emphasis */
@@ -98,8 +151,10 @@
   --ty-l-bg-soft: 0.98;
 
   /* ----------------------------------------------------------------
-   * SATURATION CURVE — per-shade chroma multipliers.
-   * Each shade's chroma = flavor-chroma × multiplier.
+   * Tier 4 — SATURATION CURVE
+   * Per-shade chroma multipliers. Each shade's chroma =
+   * flavor-chroma × multiplier. Drops near the extremes so
+   * near-white and near-black can hold their tint.
    * --------------------------------------------------------------*/
 
   --ty-c-strong-mult: 0.77;
@@ -112,80 +167,203 @@
   --ty-c-bg-bold-mult: 0.38;
   --ty-c-bg-soft-mult: 0.08;
 
-  /* ================================================================
-   * LIGHT MODE — derived tokens. The math is the same for every
-   * flavor; only the seed (hue + chroma) differs.
-   * ================================================================ */
+  /* ----------------------------------------------------------------
+   * Tier 5 — PER-FLAVOR L-FACTOR
+   * Multiplies the L-curve values for that flavor only. Default 1 =
+   * no change. Useful when one flavor's brand-default sits too close
+   * to brand-hue on the wheel and the buttons blend.
+   *
+   * Example: brand-hue: 47° (gold). Warning sits at 75° (amber).
+   * Both render as similar warm browns at brand-chroma. Drop warning
+   * a notch and it darkens enough to stand apart:
+   *   --ty-warning-l-factor: 0.85;
+   *
+   * NOTE: the L-curve flips between light and dark mode, so a factor
+   * < 1 darkens in light mode but DIMS in dark mode. If you want
+   * symmetric "more emphatic" in both modes, set the factor here for
+   * light AND set its inverse (1 / factor, roughly) in `html.dark`.
+   * --------------------------------------------------------------*/
+
+  --ty-primary-l-factor: 1;
+  --ty-secondary-l-factor: 1;
+  --ty-success-l-factor: 1;
+  --ty-warning-l-factor: 1.15;
+  --ty-danger-l-factor: 1;
+  --ty-neutral-l-factor: 1;
+
+  /* ----------------------------------------------------------------
+   * Tier 6 — SOLID FILLS
+   * Solid buttons are their OWN system, not the emphasis ramp. Each
+   * flavor's fill defaults to --ty-color-{flavor}; the knobs below
+   * derive its hover / active / tone+ / tone- and per-theme adjust.
+   * Math lives in SECTION 2 (search "Tier 6 — SOLID"); these are the
+   * dials.
+   *
+   * Axis A — interaction & tone, OKLCH L offsets on the fill.
+   * Axis B — per-theme adjust applied to the base fill (dim/desaturate).
+   *
+   * NOTE: like Tier 5, the emphasis curve flips for dark, so these L
+   * offsets are sign-flipped in `html.dark` below (darken in light =
+   * lighten in dark). Keep the two blocks in sync.
+   * --------------------------------------------------------------*/
+
+  /* Axis A — interaction (light: darken on press, so offsets are negative) */
+  --ty-solid-hover-l: -0.04; /* :hover */
+  --ty-solid-active-l: -0.08; /* :active */
+  --ty-solid-strong-l: -0.06; /* tone+ */
+  --ty-solid-soft-l: 0.1; /* tone- */
+
+  /* Axis B — per-theme adjust (light reads fine → identity) */
+  --ty-solid-l: 0; /* lightness offset — negative dims */
+  --ty-solid-c: 1; /* chroma multiplier — <1 desaturates */
+  --ty-solid-h: 0; /* hue offset (deg) */
+}
+
+/* Dark mode overrides for the L-curve and saturation curve. Tier 1 + 2
+ * seeds and Tier 5 L-factors carry through unchanged from :root. */
+html.dark,
+html[data-theme="dark"] {
+  /* Tier 3 dark — inverted curve. Higher L = lighter text = more
+   * emphasis on a dark background. */
+  --ty-l-strong: 0.72;
+  --ty-l-bold: 0.66;
+  --ty-l-base: 0.62;
+  --ty-l-soft: 0.46;
+  --ty-l-faint: 0.3;
+
+  --ty-l-bg-base: 0.22;
+  --ty-l-bg-bold: 0.26;
+  --ty-l-bg-soft: 0.19;
+
+  /* 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;
+  --ty-c-bold-mult: 1;
+  --ty-c-base-mult: 0.92;
+  --ty-c-soft-mult: 0.77;
+  --ty-c-faint-mult: 0.5;
+
+  --ty-c-bg-base-mult: 0.38;
+  --ty-c-bg-bold-mult: 0.54;
+  --ty-c-bg-soft-mult: 0.23;
+
+  /* Tier 6 dark — interaction offsets flip sign (press LIGHTENS on dark),
+   * and the per-theme adjust dims + desaturates the fills against the
+   * dark canvas. (Computed solid tokens live in SECTION 2 DARK.) */
+  --ty-solid-hover-l: 0.04; /* :hover */
+  --ty-solid-active-l: 0.08; /* :active */
+  --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-h: 0; /* hue offset */
+}
+
+/* =====================================================================
+ * SECTION 2 — IMPLEMENTATION
+ * =====================================================================
+ *
+ * The oklch() expressions that turn Section 1's knobs into the actual
+ * --ty-color-*, --ty-bg-*, --ty-border-*, --ty-surface-*, --ty-input-*,
+ * and --ty-solid-* tokens that components read.
+ *
+ * Pattern for each flavor's 5-shade fg ramp + 3-shade bg ramp:
+ *
+ *   --ty-color-{flavor}-{shade}: oklch(
+ *     calc(var(--ty-l-{shade}) * var(--ty-{flavor}-l-factor))    ← L
+ *       calc(var(--ty-{flavor}-chroma) * var(--ty-c-{shade}-mult))   ← C
+ *       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.
+ * ===================================================================== */
+
+:root {
+  /* ----------------------------------------------------------------
+   * Flavor color ramps (fg + bg + border)
+   * --------------------------------------------------------------*/
 
   /* Primary */
   --ty-color-primary-strong: oklch(
-    var(--ty-l-strong) calc(var(--ty-brand-chroma) * var(--ty-c-strong-mult))
-      var(--ty-brand-hue)
+    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(
-    var(--ty-l-bold) calc(var(--ty-brand-chroma) * var(--ty-c-bold-mult))
-      var(--ty-brand-hue)
+    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(
-    var(--ty-l-base) calc(var(--ty-brand-chroma) * var(--ty-c-base-mult))
-      var(--ty-brand-hue)
+    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(
-    var(--ty-l-soft) calc(var(--ty-brand-chroma) * var(--ty-c-soft-mult))
-      var(--ty-brand-hue)
+    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(
-    var(--ty-l-faint) calc(var(--ty-brand-chroma) * var(--ty-c-faint-mult))
-      var(--ty-brand-hue)
+    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(
-    var(--ty-l-bg-base) calc(var(--ty-brand-chroma) * var(--ty-c-bg-base-mult))
+    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(
-    var(--ty-l-bg-bold) calc(var(--ty-brand-chroma) * var(--ty-c-bg-bold-mult))
+    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(
-    var(--ty-l-bg-soft) calc(var(--ty-brand-chroma) * var(--ty-c-bg-soft-mult))
+    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(
-    var(--ty-l-strong)
+    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(
-    var(--ty-l-bold) calc(var(--ty-secondary-chroma) * var(--ty-c-bold-mult))
+    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(
-    var(--ty-l-base) calc(var(--ty-secondary-chroma) * var(--ty-c-base-mult))
+    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(
-    var(--ty-l-soft) calc(var(--ty-secondary-chroma) * var(--ty-c-soft-mult))
+    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(
-    var(--ty-l-faint) calc(var(--ty-secondary-chroma) * var(--ty-c-faint-mult))
+    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(
-    var(--ty-l-bg-base)
+    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(
-    var(--ty-l-bg-bold)
+    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(
-    var(--ty-l-bg-soft)
+    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)
   );
@@ -193,37 +371,42 @@
 
   /* Success */
   --ty-color-success-strong: oklch(
-    var(--ty-l-strong) calc(var(--ty-success-chroma) * var(--ty-c-strong-mult))
+    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(
-    var(--ty-l-bold) calc(var(--ty-success-chroma) * var(--ty-c-bold-mult))
+    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(
-    var(--ty-l-base) calc(var(--ty-success-chroma) * var(--ty-c-base-mult))
+    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(
-    var(--ty-l-soft) calc(var(--ty-success-chroma) * var(--ty-c-soft-mult))
+    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(
-    var(--ty-l-faint) calc(var(--ty-success-chroma) * var(--ty-c-faint-mult))
+    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(
-    var(--ty-l-bg-base)
+    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(
-    var(--ty-l-bg-bold)
+    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(
-    var(--ty-l-bg-soft)
+    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)
   );
@@ -231,72 +414,82 @@
 
   /* Danger */
   --ty-color-danger-strong: oklch(
-    var(--ty-l-strong) calc(var(--ty-danger-chroma) * var(--ty-c-strong-mult))
+    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(
-    var(--ty-l-bold) calc(var(--ty-danger-chroma) * var(--ty-c-bold-mult))
-      var(--ty-danger-hue)
+    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(
-    var(--ty-l-base) calc(var(--ty-danger-chroma) * var(--ty-c-base-mult))
-      var(--ty-danger-hue)
+    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(
-    var(--ty-l-soft) calc(var(--ty-danger-chroma) * var(--ty-c-soft-mult))
-      var(--ty-danger-hue)
+    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(
-    var(--ty-l-faint) calc(var(--ty-danger-chroma) * var(--ty-c-faint-mult))
+    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(
-    var(--ty-l-bg-base) calc(var(--ty-danger-chroma) * var(--ty-c-bg-base-mult))
+    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)
   );
   --ty-bg-danger-bold: oklch(
-    var(--ty-l-bg-bold) calc(var(--ty-danger-chroma) * var(--ty-c-bg-bold-mult))
+    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-bg-danger-soft: oklch(
-    var(--ty-l-bg-soft) calc(var(--ty-danger-chroma) * var(--ty-c-bg-soft-mult))
+    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-border-danger: var(--ty-color-danger-soft);
 
   /* Warning */
   --ty-color-warning-strong: oklch(
-    var(--ty-l-strong) calc(var(--ty-warning-chroma) * var(--ty-c-strong-mult))
+    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(
-    var(--ty-l-bold) calc(var(--ty-warning-chroma) * var(--ty-c-bold-mult))
+    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(
-    var(--ty-l-base) calc(var(--ty-warning-chroma) * var(--ty-c-base-mult))
+    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(
-    var(--ty-l-soft) calc(var(--ty-warning-chroma) * var(--ty-c-soft-mult))
+    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(
-    var(--ty-l-faint) calc(var(--ty-warning-chroma) * var(--ty-c-faint-mult))
+    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(
-    var(--ty-l-bg-base)
+    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(
-    var(--ty-l-bg-bold)
+    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(
-    var(--ty-l-bg-soft)
+    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)
   );
@@ -304,37 +497,42 @@
 
   /* Neutral — same L curve, near-zero chroma so the grey scale stays grey. */
   --ty-color-neutral-strong: oklch(
-    var(--ty-l-strong) calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
+    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(
-    var(--ty-l-bold) calc(var(--ty-neutral-chroma) * var(--ty-c-bold-mult))
+    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(
-    var(--ty-l-base) calc(var(--ty-neutral-chroma) * var(--ty-c-base-mult))
+    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(
-    var(--ty-l-soft) calc(var(--ty-neutral-chroma) * var(--ty-c-soft-mult))
+    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(
-    var(--ty-l-faint) calc(var(--ty-neutral-chroma) * var(--ty-c-faint-mult))
+    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(
-    var(--ty-l-bg-base)
+    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(
-    var(--ty-l-bg-bold)
+    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(
-    var(--ty-l-bg-soft)
+    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)
   );
@@ -345,25 +543,31 @@
     0.99 calc(var(--ty-neutral-chroma) * 0.4) var(--ty-neutral-hue)
   );
 
-  /* Global neutral borders — read off the neutral color ramp. */
+  /* ----------------------------------------------------------------
+   * Global neutral borders — read off the neutral color ramp.
+   * --------------------------------------------------------------*/
   --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 — canvas tinted slightly toward brand for warmth. */
-  --ty-surface-canvas: oklch(0.985 0.005 var(--ty-brand-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-content: oklch(1 0 0);
   --ty-surface-elevated: oklch(1 0 0);
   --ty-surface-floating: oklch(1 0 0);
   --ty-surface-input: oklch(1 0 0);
 
-  /* Inputs — tied to neutral ramp so form controls retint with brand. */
+  /* ----------------------------------------------------------------
+   * Inputs — tied to neutral ramp so form controls retint with brand.
+   * --------------------------------------------------------------*/
   --ty-input-bg: var(--ty-surface-input);
   --ty-input-color: var(--ty-color-neutral-strong);
-  --ty-input-border: var(--ty-color-neutral-soft);
-  --ty-input-border-hover: var(--ty-color-neutral-bold);
+  --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);
@@ -374,161 +578,225 @@
     var(--ty-color-primary) 5%,
     transparent
   );
+}
+
+/* ----------------------------------------------------------------
+ * Tier 6 — SOLID (implementation)
+ * Solid is its OWN system, NOT the text/emphasis ramp. The dials
+ * (--ty-solid-hover-l / -active-l / -strong-l / -soft-l and
+ * --ty-solid-l / -c / -h) live in SECTION 1, Tier 6. Below is the
+ * derivation only: base fill bakes in the per-theme adjust (Axis B);
+ * hover/active/strong/soft offset the base by Axis A. Override any
+ * single --ty-solid-{flavor}-{state} to recolor just that segment.
+ *
+ * Declared at `html:root` (specificity 0,1,1) — NOT plain `:root` (0,1,0) —
+ * on purpose: it must out-rank tyrell.css's hardcoded dark solids at
+ * `html.dark` (0,1,1). It wins light by specificity over base's `html{}`,
+ * and wins dark by source order over base's `html.dark` (brand loads after).
+ * That's what lets dark solids re-tint with --ty-brand-hue. Declared ONCE —
+ * the oklch(from var(--ty-color-*)) formulas resolve per-mode automatically,
+ * so no dark duplicate is needed.
+ * --------------------------------------------------------------*/
+html:root {
+  /* base fill per flavor (= flavor color, theme-adjusted by Axis B) */
+  --ty-solid-primary: oklch(
+    from var(--ty-color-primary) calc(l + var(--ty-solid-l))
+      calc(c * var(--ty-solid-c)) calc(h + var(--ty-solid-h))
+  );
+  --ty-solid-secondary: oklch(
+    from var(--ty-color-secondary) calc(l + var(--ty-solid-l))
+      calc(c * var(--ty-solid-c)) calc(h + var(--ty-solid-h))
+  );
+  --ty-solid-success: oklch(
+    from var(--ty-color-success) calc(l + var(--ty-solid-l))
+      calc(c * var(--ty-solid-c)) calc(h + var(--ty-solid-h))
+  );
+  --ty-solid-danger: oklch(
+    from var(--ty-color-danger) calc(l + var(--ty-solid-l))
+      calc(c * var(--ty-solid-c)) calc(h + var(--ty-solid-h))
+  );
+  --ty-solid-warning: oklch(
+    from var(--ty-color-warning) calc(l + var(--ty-solid-l))
+      calc(c * var(--ty-solid-c)) calc(h + var(--ty-solid-h))
+  );
+  /* neutral is a deliberate dark grey fill, not the neutral text color */
+  --ty-solid-neutral: oklch(
+    0.4 calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
+      var(--ty-neutral-hue)
+  );
 
-  /* Solid buttons — re-route through --ty-color-*. */
-  --ty-solid-primary: var(--ty-color-primary);
-  --ty-solid-primary-strong: var(--ty-color-primary-bold);
-  --ty-solid-primary-soft: var(--ty-color-primary-soft);
   --ty-solid-primary-fg: white;
-
-  --ty-solid-secondary: var(--ty-color-secondary);
-  --ty-solid-secondary-strong: var(--ty-color-secondary-bold);
-  --ty-solid-secondary-soft: var(--ty-color-secondary-soft);
   --ty-solid-secondary-fg: white;
-
-  --ty-solid-success: var(--ty-color-success);
-  --ty-solid-success-strong: var(--ty-color-success-bold);
-  --ty-solid-success-soft: var(--ty-color-success-soft);
   --ty-solid-success-fg: white;
-
-  --ty-solid-danger: var(--ty-color-danger);
-  --ty-solid-danger-strong: var(--ty-color-danger-bold);
-  --ty-solid-danger-soft: var(--ty-color-danger-soft);
   --ty-solid-danger-fg: white;
-
-  --ty-solid-warning: var(--ty-color-warning);
-  --ty-solid-warning-strong: var(--ty-color-warning-bold);
-  --ty-solid-warning-soft: var(--ty-color-warning-soft);
   --ty-solid-warning-fg: white;
+  --ty-solid-neutral-fg: white;
 
-  /* Solid neutral routes to neutral-strong rather than neutral-base.
-   * Neutral-base (L_base) reads as a washy mid-grey on white surfaces;
-   * neutral-strong gives the dark-grey "default action" weight that
-   * design systems typically use for neutral buttons. The "strong"
-   * solid variant clamps higher emphasis (same shade, kept for the
-   * solid-* API shape); "soft" softens to neutral-bold for inactive
-   * states. */
+  /* derived states — axis 2 offsets on each base fill */
+  --ty-solid-primary-hover: oklch(
+    from var(--ty-solid-primary) calc(l + var(--ty-solid-hover-l)) c h
+  );
+  --ty-solid-primary-active: oklch(
+    from var(--ty-solid-primary) calc(l + var(--ty-solid-active-l)) c h
+  );
+  --ty-solid-primary-strong: oklch(
+    from var(--ty-solid-primary) calc(l + var(--ty-solid-strong-l)) c h
+  );
+  --ty-solid-primary-soft: oklch(
+    from var(--ty-solid-primary) calc(l + var(--ty-solid-soft-l)) c h
+  );
 
-  --ty-solid-neutral-soft: oklch(
-    0.6 calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
-      var(--ty-neutral-hue)
+  --ty-solid-secondary-hover: oklch(
+    from var(--ty-solid-secondary) calc(l + var(--ty-solid-hover-l)) c h
   );
-  --ty-solid-neutral: oklch(
-    0.4 calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
-      var(--ty-neutral-hue)
+  --ty-solid-secondary-active: oklch(
+    from var(--ty-solid-secondary) calc(l + var(--ty-solid-active-l)) c h
+  );
+  --ty-solid-secondary-strong: oklch(
+    from var(--ty-solid-secondary) calc(l + var(--ty-solid-strong-l)) c h
+  );
+  --ty-solid-secondary-soft: oklch(
+    from var(--ty-solid-secondary) calc(l + var(--ty-solid-soft-l)) c h
   );
 
+  --ty-solid-success-hover: oklch(
+    from var(--ty-solid-success) calc(l + var(--ty-solid-hover-l)) c h
+  );
+  --ty-solid-success-active: oklch(
+    from var(--ty-solid-success) calc(l + var(--ty-solid-active-l)) c h
+  );
+  --ty-solid-success-strong: oklch(
+    from var(--ty-solid-success) calc(l + var(--ty-solid-strong-l)) c h
+  );
+  --ty-solid-success-soft: oklch(
+    from var(--ty-solid-success) calc(l + var(--ty-solid-soft-l)) c h
+  );
+
+  --ty-solid-danger-hover: oklch(
+    from var(--ty-solid-danger) calc(l + var(--ty-solid-hover-l)) c h
+  );
+  --ty-solid-danger-active: oklch(
+    from var(--ty-solid-danger) calc(l + var(--ty-solid-active-l)) c h
+  );
+  --ty-solid-danger-strong: oklch(
+    from var(--ty-solid-danger) calc(l + var(--ty-solid-strong-l)) c h
+  );
+  --ty-solid-danger-soft: oklch(
+    from var(--ty-solid-danger) calc(l + var(--ty-solid-soft-l)) c h
+  );
+
+  --ty-solid-warning-hover: oklch(
+    from var(--ty-solid-warning) calc(l + var(--ty-solid-hover-l)) c h
+  );
+  --ty-solid-warning-active: oklch(
+    from var(--ty-solid-warning) calc(l + var(--ty-solid-active-l)) c h
+  );
+  --ty-solid-warning-strong: oklch(
+    from var(--ty-solid-warning) calc(l + var(--ty-solid-strong-l)) c h
+  );
+  --ty-solid-warning-soft: oklch(
+    from var(--ty-solid-warning) calc(l + var(--ty-solid-soft-l)) c h
+  );
+
+  --ty-solid-neutral-hover: oklch(
+    from var(--ty-solid-neutral) calc(l + var(--ty-solid-hover-l)) c h
+  );
+  --ty-solid-neutral-active: oklch(
+    from var(--ty-solid-neutral) calc(l + var(--ty-solid-active-l)) c h
+  );
   --ty-solid-neutral-strong: oklch(
-    0.2 calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
-      var(--ty-neutral-hue)
+    from var(--ty-solid-neutral) calc(l + var(--ty-solid-strong-l)) c h
+  );
+  --ty-solid-neutral-soft: oklch(
+    from var(--ty-solid-neutral) calc(l + var(--ty-solid-soft-l)) c h
   );
 }
 
 /* =====================================================================
- * DARK MODE — L-curve and saturation-curve overridden. Same flavor
- * seeds drive both modes; only the L and chroma multipliers change.
+ * 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).
  * ===================================================================== */
 
 html.dark,
 html[data-theme="dark"] {
-  --ty-l-strong: 0.86; /* ++ max emphasis in dark = brightest */
-  --ty-l-bold: 0.74;
-  --ty-l-base: 0.62;
-  --ty-l-soft: 0.46;
-  --ty-l-faint: 0.3; /* -- min emphasis = darkest */
-
-  --ty-l-bg-base: 0.22;
-  --ty-l-bg-bold: 0.26;
-  --ty-l-bg-soft: 0.19;
-
-  /* Saturation curve — dark pushes faint chroma up so dim shades don't
-   * collapse into grey, and trims strong so bright tones don't over-pop. */
-  --ty-c-strong-mult: 0.77;
-  --ty-c-bold-mult: 1;
-  --ty-c-base-mult: 0.92;
-  --ty-c-soft-mult: 0.77;
-  --ty-c-faint-mult: 0.5;
-
-  --ty-c-bg-base-mult: 0.38;
-  --ty-c-bg-bold-mult: 0.54;
-  --ty-c-bg-soft-mult: 0.23;
-
-  /* Color tokens re-declared here so we match tyrell.css's `html.dark` block
-   * at the same selector specificity (0,1,1). Without these, tyrell.css's
-   * hardcoded dark-mode hexes out-rank the brand-layer ':root' definitions
-   * and the brand-hue slider does nothing in dark mode. The math is the
-   * same as the light block — just uses the dark L-curve / chroma curve
-   * defined above. */
-
   /* Primary */
   --ty-color-primary-strong: oklch(
-    var(--ty-l-strong) calc(var(--ty-brand-chroma) * var(--ty-c-strong-mult))
-      var(--ty-brand-hue)
+    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(
-    var(--ty-l-bold) calc(var(--ty-brand-chroma) * var(--ty-c-bold-mult))
-      var(--ty-brand-hue)
+    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(
-    var(--ty-l-base) calc(var(--ty-brand-chroma) * var(--ty-c-base-mult))
-      var(--ty-brand-hue)
+    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(
-    var(--ty-l-soft) calc(var(--ty-brand-chroma) * var(--ty-c-soft-mult))
-      var(--ty-brand-hue)
+    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(
-    var(--ty-l-faint) calc(var(--ty-brand-chroma) * var(--ty-c-faint-mult))
-      var(--ty-brand-hue)
+    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(
-    var(--ty-l-bg-base) calc(var(--ty-brand-chroma) * var(--ty-c-bg-base-mult))
+    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(
-    var(--ty-l-bg-bold) calc(var(--ty-brand-chroma) * var(--ty-c-bg-bold-mult))
+    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(
-    var(--ty-l-bg-soft) calc(var(--ty-brand-chroma) * var(--ty-c-bg-soft-mult))
+    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(
-    var(--ty-l-strong)
+    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(
-    var(--ty-l-bold) calc(var(--ty-secondary-chroma) * var(--ty-c-bold-mult))
+    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(
-    var(--ty-l-base) calc(var(--ty-secondary-chroma) * var(--ty-c-base-mult))
+    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(
-    var(--ty-l-soft) calc(var(--ty-secondary-chroma) * var(--ty-c-soft-mult))
+    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(
-    var(--ty-l-faint) calc(var(--ty-secondary-chroma) * var(--ty-c-faint-mult))
+    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(
-    var(--ty-l-bg-base)
+    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(
-    var(--ty-l-bg-bold)
+    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(
-    var(--ty-l-bg-soft)
+    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)
   );
@@ -536,37 +804,42 @@ html[data-theme="dark"] {
 
   /* Success */
   --ty-color-success-strong: oklch(
-    var(--ty-l-strong) calc(var(--ty-success-chroma) * var(--ty-c-strong-mult))
+    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(
-    var(--ty-l-bold) calc(var(--ty-success-chroma) * var(--ty-c-bold-mult))
+    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(
-    var(--ty-l-base) calc(var(--ty-success-chroma) * var(--ty-c-base-mult))
+    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(
-    var(--ty-l-soft) calc(var(--ty-success-chroma) * var(--ty-c-soft-mult))
+    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(
-    var(--ty-l-faint) calc(var(--ty-success-chroma) * var(--ty-c-faint-mult))
+    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(
-    var(--ty-l-bg-base)
+    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(
-    var(--ty-l-bg-bold)
+    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(
-    var(--ty-l-bg-soft)
+    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)
   );
@@ -574,72 +847,82 @@ html[data-theme="dark"] {
 
   /* Danger */
   --ty-color-danger-strong: oklch(
-    var(--ty-l-strong) calc(var(--ty-danger-chroma) * var(--ty-c-strong-mult))
+    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(
-    var(--ty-l-bold) calc(var(--ty-danger-chroma) * var(--ty-c-bold-mult))
-      var(--ty-danger-hue)
+    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(
-    var(--ty-l-base) calc(var(--ty-danger-chroma) * var(--ty-c-base-mult))
-      var(--ty-danger-hue)
+    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(
-    var(--ty-l-soft) calc(var(--ty-danger-chroma) * var(--ty-c-soft-mult))
-      var(--ty-danger-hue)
+    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(
-    var(--ty-l-faint) calc(var(--ty-danger-chroma) * var(--ty-c-faint-mult))
+    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(
-    var(--ty-l-bg-base) calc(var(--ty-danger-chroma) * var(--ty-c-bg-base-mult))
+    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)
   );
   --ty-bg-danger-bold: oklch(
-    var(--ty-l-bg-bold) calc(var(--ty-danger-chroma) * var(--ty-c-bg-bold-mult))
+    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-bg-danger-soft: oklch(
-    var(--ty-l-bg-soft) calc(var(--ty-danger-chroma) * var(--ty-c-bg-soft-mult))
+    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-border-danger: var(--ty-color-danger-soft);
 
   /* Warning */
   --ty-color-warning-strong: oklch(
-    var(--ty-l-strong) calc(var(--ty-warning-chroma) * var(--ty-c-strong-mult))
+    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(
-    var(--ty-l-bold) calc(var(--ty-warning-chroma) * var(--ty-c-bold-mult))
+    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(
-    var(--ty-l-base) calc(var(--ty-warning-chroma) * var(--ty-c-base-mult))
+    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(
-    var(--ty-l-soft) calc(var(--ty-warning-chroma) * var(--ty-c-soft-mult))
+    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(
-    var(--ty-l-faint) calc(var(--ty-warning-chroma) * var(--ty-c-faint-mult))
+    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(
-    var(--ty-l-bg-base)
+    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(
-    var(--ty-l-bg-bold)
+    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(
-    var(--ty-l-bg-soft)
+    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)
   );
@@ -647,37 +930,42 @@ html[data-theme="dark"] {
 
   /* Neutral */
   --ty-color-neutral-strong: oklch(
-    var(--ty-l-strong) calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
+    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(
-    var(--ty-l-bold) calc(var(--ty-neutral-chroma) * var(--ty-c-bold-mult))
+    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(
-    var(--ty-l-base) calc(var(--ty-neutral-chroma) * var(--ty-c-base-mult))
+    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(
-    var(--ty-l-soft) calc(var(--ty-neutral-chroma) * var(--ty-c-soft-mult))
+    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(
-    var(--ty-l-faint) calc(var(--ty-neutral-chroma) * var(--ty-c-faint-mult))
+    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(
-    var(--ty-l-bg-base)
+    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(
-    var(--ty-l-bg-bold)
+    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(
-    var(--ty-l-bg-soft)
+    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)
   );
@@ -695,20 +983,18 @@ html[data-theme="dark"] {
   --ty-border-soft: var(--ty-color-neutral-faint);
   --ty-border-faint: var(--ty-color-neutral-faint);
 
-  /* Surfaces — flip dark with a hint of brand chroma. */
-  --ty-surface-canvas: oklch(0.12 0.012 var(--ty-brand-hue));
-  --ty-surface-content: oklch(0.16 0.012 var(--ty-brand-hue));
-  --ty-surface-elevated: oklch(0.19 0.013 var(--ty-brand-hue));
-  --ty-surface-floating: oklch(0.22 0.015 var(--ty-brand-hue));
-  --ty-surface-input: oklch(0.18 0.012 var(--ty-brand-hue));
+  /* 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 so tyrell.css's hardcoded dark values don't
-   * out-rank our brand-derived ones (same selector specificity, source
-   * order wins). */
+  /* 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-bold);
+  --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);
@@ -720,48 +1006,10 @@ html[data-theme="dark"] {
     transparent
   );
 
-  /* Solid buttons — same reason. */
-  --ty-solid-primary: var(--ty-color-primary);
-  --ty-solid-primary-strong: var(--ty-color-primary-bold);
-  --ty-solid-primary-soft: var(--ty-color-primary-soft);
-  --ty-solid-primary-fg: white;
-
-  --ty-solid-secondary: var(--ty-color-secondary);
-  --ty-solid-secondary-strong: var(--ty-color-secondary-bold);
-  --ty-solid-secondary-soft: var(--ty-color-secondary-soft);
-  --ty-solid-secondary-fg: white;
-
-  --ty-solid-success: var(--ty-color-success);
-  --ty-solid-success-strong: var(--ty-color-success-bold);
-  --ty-solid-success-soft: var(--ty-color-success-soft);
-  --ty-solid-success-fg: white;
-
-  --ty-solid-danger: var(--ty-color-danger);
-  --ty-solid-danger-strong: var(--ty-color-danger-bold);
-  --ty-solid-danger-soft: var(--ty-color-danger-soft);
-  --ty-solid-danger-fg: white;
-
-  --ty-solid-warning: var(--ty-color-warning);
-  --ty-solid-warning-strong: var(--ty-color-warning-bold);
-  --ty-solid-warning-soft: var(--ty-color-warning-soft);
-  --ty-solid-warning-fg: white;
-
-  /* Solid neutral — see comment in the :root block. In dark mode the
-   * "dark grey" position lives at the OTHER end of the ramp (faint),
-   * because the L-curve inverts. Both modes get "a darker shade than
-   * the page surface" for a punchy default action. */
-  --ty-solid-neutral-soft: oklch(
-    0.2 calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
-      var(--ty-neutral-hue)
-  );
+  /* 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. */
   --ty-solid-neutral: oklch(
     0.3 calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
       var(--ty-neutral-hue)
   );
-
-  --ty-solid-neutral-strong: oklch(
-    0.4 calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
-      var(--ty-neutral-hue)
-  );
-  --ty-solid-neutral-fg: white;
 }