tyrell-components 1.0.0-TC35 → 1.0.0-TC37

package/css/tyrell-brand.css

@@ -24,7 +24,7 @@
  *       H = flavor-hue                                  ← Tier 2
  *     )
  *
- * Pick a flavor (primary / secondary / success / warning / danger /
+ * Pick a flavor (primary / success / warning / danger /
  * neutral). Pick a shade (strong / bold / base / soft / faint). That's
  * the cell; the formula gives you its color.
  *
@@ -103,11 +103,6 @@
    * 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. 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. */
-  --ty-secondary-offset: 60;
 
   /* ----------------------------------------------------------------
    * Tier 2 — PER-FLAVOR ANCHORS
@@ -118,8 +113,6 @@
    *   --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);
@@ -130,8 +123,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 +148,51 @@
   --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;
+
+  /* Surface ladder + remaining per-mode absolutes, as L dials. These were
+   * whole oklch() declarations swapped per mode; as numeric dials they are
+   * (a) consistent with every other family and (b) interpolable — which is
+   * what lets theme/mode switches ANIMATE (see THEME TRANSITIONS at the
+   * end of this file). */
+  --ty-l-surface-canvas: 0.985;
+  --ty-l-surface-content: 1;
+  --ty-l-surface-elevated: 1;
+  --ty-l-surface-floating: 1;
+  --ty-l-surface-input: 1;
+
+  --ty-l-solid-neutral: 0.4; /* the neutral "ink" fill — dark in BOTH modes */
+  --ty-l-bg-neutral-strong: 0.25; /* opposes the mode: dark bg on light page */
+  --ty-l-bg-neutral-faint: 0.99; /* follows the mode */
+  --ty-c-bg-neutral-faint-mult: 0.4;
+
+  --ty-focus-ring-alpha: 5%; /* focus ring mix strength (dark needs more) */
+
   /* ----------------------------------------------------------------
    * Tier 4 — SATURATION CURVE
    * Per-shade chroma multipliers. Each shade's chroma =
@@ -185,7 +228,6 @@
    * --------------------------------------------------------------*/
 
   --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;
@@ -222,7 +264,9 @@
 /* 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"] {
+html[data-theme="dark"],
+[data-ty-theme].dark,
+[data-ty-theme][data-theme="dark"] {
   /* Tier 3 dark — inverted curve. Higher L = lighter text = more
    * emphasis on a dark background. */
   --ty-l-strong: 0.72;
@@ -235,6 +279,42 @@ 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;
+
+  /* Surface ladder + absolutes dark — hand-tuned values, now as dials. */
+  --ty-l-surface-canvas: 0.12;
+  --ty-l-surface-content: 0.16;
+  --ty-l-surface-elevated: 0.19;
+  --ty-l-surface-floating: 0.22;
+  --ty-l-surface-input: 0.18;
+
+  --ty-l-solid-neutral: 0.23;
+  --ty-l-bg-neutral-strong: 0.95;
+  --ty-l-bg-neutral-faint: 0.15;
+  --ty-c-bg-neutral-faint-mult: 2;
+
+  /* Tier 5 dark — neutral inks pulled down a notch against dark surfaces. */
+  --ty-neutral-l-factor: 0.8;
+
+  --ty-focus-ring-alpha: 20%;
+
   /* 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;
@@ -249,14 +329,14 @@ html[data-theme="dark"] {
 
   /* 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.) */
+   * dark canvas. (Computed solid tokens are declared once at html:root.) */
   --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-l: -0.2; /* dim against dark canvas */
+  --ty-solid-c: 0.7; /* desaturate against dark canvas */
   --ty-solid-h: 0; /* hue offset */
 }
 
@@ -276,290 +356,360 @@ 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,
+[data-ty-theme] {
   /* ----------------------------------------------------------------
    * Flavor color ramps (fg + bg + border)
+   *
+   * SEED INGESTION — every flavor resolves ONE seed color, and every
+   * ramp formula reads that seed's c + h channels via relative color
+   * syntax; L always comes from the mode-flipped curve. Two ways in:
+   *
+   *   numbers (default) — the Tier 1/2 hue+chroma dials construct the
+   *   seed:      --ty-brand-hue: 200; --ty-brand-chroma: 0.13;
+   *
+   *   a color   — set the seed directly and the dials are bypassed:
+   *              --ty-primary-seed: #76467c;
+   *              --ty-danger-seed: crimson;
+   *
+   * The seed's LIGHTNESS is discarded by design: a color's identity
+   * here is hue + chroma; where each shade sits per mode is the
+   * L-curve's job. That is what makes dark mode, tones and contrast
+   * correct for ANY seed — light or dark. (Your exact pixel may
+   * appear nowhere; pin --ty-solid-X etc. if you need it literally.)
    * --------------------------------------------------------------*/
+  --ty-primary-seed-resolved: var(
+    --ty-primary-seed,
+    oklch(0.5 var(--ty-brand-chroma) var(--ty-brand-hue))
+  );
+  --ty-success-seed-resolved: var(
+    --ty-success-seed,
+    oklch(0.5 var(--ty-success-chroma) var(--ty-success-hue))
+  );
+  --ty-warning-seed-resolved: var(
+    --ty-warning-seed,
+    oklch(0.5 var(--ty-warning-chroma) var(--ty-warning-hue))
+  );
+  --ty-danger-seed-resolved: var(
+    --ty-danger-seed,
+    oklch(0.5 var(--ty-danger-chroma) var(--ty-danger-hue))
+  );
+  --ty-neutral-seed-resolved: var(
+    --ty-neutral-seed,
+    oklch(0.5 var(--ty-neutral-chroma) var(--ty-neutral-hue))
+  );
 
   /* 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)
+    from var(--ty-primary-seed-resolved)
+      calc(var(--ty-l-strong) * var(--ty-primary-l-factor))
+      calc(c * var(--ty-c-strong-mult)) h
   );
   --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)
+    from var(--ty-primary-seed-resolved)
+      calc(var(--ty-l-bold) * var(--ty-primary-l-factor))
+      calc(c * var(--ty-c-bold-mult)) h
   );
   --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)
+    from var(--ty-primary-seed-resolved)
+      calc(var(--ty-l-base) * var(--ty-primary-l-factor))
+      calc(c * var(--ty-c-base-mult)) h
   );
   --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)
+    from var(--ty-primary-seed-resolved)
+      calc(var(--ty-l-soft) * var(--ty-primary-l-factor))
+      calc(c * var(--ty-c-soft-mult)) h
   );
   --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)
+    from var(--ty-primary-seed-resolved)
+      calc(var(--ty-l-faint) * var(--ty-primary-l-factor))
+      calc(c * var(--ty-c-faint-mult)) h
   );
   --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)
+    from var(--ty-primary-seed-resolved)
+      calc(var(--ty-l-bg-base) * var(--ty-primary-l-factor))
+      calc(c * var(--ty-c-bg-base-mult)) h
   );
   --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)
+    from var(--ty-primary-seed-resolved)
+      calc(var(--ty-l-bg-bold) * var(--ty-primary-l-factor))
+      calc(c * var(--ty-c-bg-bold-mult)) h
   );
   --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)
+    from var(--ty-primary-seed-resolved)
+      calc(var(--ty-l-bg-soft) * var(--ty-primary-l-factor))
+      calc(c * var(--ty-c-bg-soft-mult)) h
   );
   --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)
+    from var(--ty-success-seed-resolved)
+      calc(var(--ty-l-strong) * var(--ty-success-l-factor))
+      calc(c * var(--ty-c-strong-mult)) h
   );
   --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)
+    from var(--ty-success-seed-resolved)
+      calc(var(--ty-l-bold) * var(--ty-success-l-factor))
+      calc(c * var(--ty-c-bold-mult)) h
   );
   --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)
+    from var(--ty-success-seed-resolved)
+      calc(var(--ty-l-base) * var(--ty-success-l-factor))
+      calc(c * var(--ty-c-base-mult)) h
   );
   --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)
+    from var(--ty-success-seed-resolved)
+      calc(var(--ty-l-soft) * var(--ty-success-l-factor))
+      calc(c * var(--ty-c-soft-mult)) h
   );
   --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)
+    from var(--ty-success-seed-resolved)
+      calc(var(--ty-l-faint) * var(--ty-success-l-factor))
+      calc(c * var(--ty-c-faint-mult)) h
   );
   --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)
+    from var(--ty-success-seed-resolved)
+      calc(var(--ty-l-bg-base) * var(--ty-success-l-factor))
+      calc(c * var(--ty-c-bg-base-mult)) h
   );
   --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)
+    from var(--ty-success-seed-resolved)
+      calc(var(--ty-l-bg-bold) * var(--ty-success-l-factor))
+      calc(c * var(--ty-c-bg-bold-mult)) h
   );
   --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)
+    from var(--ty-success-seed-resolved)
+      calc(var(--ty-l-bg-soft) * var(--ty-success-l-factor))
+      calc(c * var(--ty-c-bg-soft-mult)) h
   );
   --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)
+    from var(--ty-danger-seed-resolved)
+      calc(var(--ty-l-strong) * var(--ty-danger-l-factor))
+      calc(c * var(--ty-c-strong-mult)) h
   );
   --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)
+    from var(--ty-danger-seed-resolved)
+      calc(var(--ty-l-bold) * var(--ty-danger-l-factor))
+      calc(c * var(--ty-c-bold-mult)) h
   );
   --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)
+    from var(--ty-danger-seed-resolved)
+      calc(var(--ty-l-base) * var(--ty-danger-l-factor))
+      calc(c * var(--ty-c-base-mult)) h
   );
   --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)
+    from var(--ty-danger-seed-resolved)
+      calc(var(--ty-l-soft) * var(--ty-danger-l-factor))
+      calc(c * var(--ty-c-soft-mult)) h
   );
   --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)
+    from var(--ty-danger-seed-resolved)
+      calc(var(--ty-l-faint) * var(--ty-danger-l-factor))
+      calc(c * var(--ty-c-faint-mult)) h
   );
   --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)
+    from var(--ty-danger-seed-resolved)
+      calc(var(--ty-l-bg-base) * var(--ty-danger-l-factor))
+      calc(c * var(--ty-c-bg-base-mult)) h
   );
   --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)
+    from var(--ty-danger-seed-resolved)
+      calc(var(--ty-l-bg-bold) * var(--ty-danger-l-factor))
+      calc(c * var(--ty-c-bg-bold-mult)) h
   );
   --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)
+    from var(--ty-danger-seed-resolved)
+      calc(var(--ty-l-bg-soft) * var(--ty-danger-l-factor))
+      calc(c * var(--ty-c-bg-soft-mult)) h
   );
   --ty-border-danger: var(--ty-color-danger-soft);
 
   /* 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)
+    from var(--ty-warning-seed-resolved)
+      calc(var(--ty-l-strong) * var(--ty-warning-l-factor))
+      calc(c * var(--ty-c-strong-mult)) h
   );
   --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)
+    from var(--ty-warning-seed-resolved)
+      calc(var(--ty-l-bold) * var(--ty-warning-l-factor))
+      calc(c * var(--ty-c-bold-mult)) h
   );
   --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)
+    from var(--ty-warning-seed-resolved)
+      calc(var(--ty-l-base) * var(--ty-warning-l-factor))
+      calc(c * var(--ty-c-base-mult)) h
   );
   --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)
+    from var(--ty-warning-seed-resolved)
+      calc(var(--ty-l-soft) * var(--ty-warning-l-factor))
+      calc(c * var(--ty-c-soft-mult)) h
   );
   --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)
+    from var(--ty-warning-seed-resolved)
+      calc(var(--ty-l-faint) * var(--ty-warning-l-factor))
+      calc(c * var(--ty-c-faint-mult)) h
   );
   --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)
+    from var(--ty-warning-seed-resolved)
+      calc(var(--ty-l-bg-base) * var(--ty-warning-l-factor))
+      calc(c * var(--ty-c-bg-base-mult)) h
   );
   --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)
+    from var(--ty-warning-seed-resolved)
+      calc(var(--ty-l-bg-bold) * var(--ty-warning-l-factor))
+      calc(c * var(--ty-c-bg-bold-mult)) h
   );
   --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)
+    from var(--ty-warning-seed-resolved)
+      calc(var(--ty-l-bg-soft) * var(--ty-warning-l-factor))
+      calc(c * var(--ty-c-bg-soft-mult)) h
   );
   --ty-border-warning: var(--ty-color-warning-soft);
 
   /* Neutral — same L curve, near-zero chroma so the grey scale stays grey. */
   --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)
+    from var(--ty-neutral-seed-resolved)
+      calc(var(--ty-l-strong) * var(--ty-neutral-l-factor))
+      calc(c * var(--ty-c-strong-mult)) h
   );
   --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)
+    from var(--ty-neutral-seed-resolved)
+      calc(var(--ty-l-bold) * var(--ty-neutral-l-factor))
+      calc(c * var(--ty-c-bold-mult)) h
   );
   --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)
+    from var(--ty-neutral-seed-resolved)
+      calc(var(--ty-l-base) * var(--ty-neutral-l-factor))
+      calc(c * var(--ty-c-base-mult)) h
   );
   --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)
+    from var(--ty-neutral-seed-resolved)
+      calc(var(--ty-l-soft) * var(--ty-neutral-l-factor))
+      calc(c * var(--ty-c-soft-mult)) h
   );
   --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)
+    from var(--ty-neutral-seed-resolved)
+      calc(var(--ty-l-faint) * var(--ty-neutral-l-factor))
+      calc(c * var(--ty-c-faint-mult)) h
   );
   --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)
+    from var(--ty-neutral-seed-resolved)
+      calc(var(--ty-l-bg-base) * var(--ty-neutral-l-factor))
+      calc(c * var(--ty-c-bg-base-mult)) h
   );
   --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)
+    from var(--ty-neutral-seed-resolved)
+      calc(var(--ty-l-bg-bold) * var(--ty-neutral-l-factor))
+      calc(c * var(--ty-c-bg-bold-mult)) h
   );
   --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)
+    from var(--ty-neutral-seed-resolved)
+      calc(var(--ty-l-bg-soft) * var(--ty-neutral-l-factor))
+      calc(c * var(--ty-c-bg-soft-mult)) h
   );
   --ty-bg-neutral-strong: oklch(
-    0.25 calc(var(--ty-neutral-chroma) * 2) var(--ty-neutral-hue)
+    from var(--ty-neutral-seed-resolved) var(--ty-l-bg-neutral-strong)
+      calc(c * 2) h
   );
   --ty-bg-neutral-faint: oklch(
-    0.99 calc(var(--ty-neutral-chroma) * 0.4) var(--ty-neutral-hue)
+    from var(--ty-neutral-seed-resolved) var(--ty-l-bg-neutral-faint)
+      calc(c * var(--ty-c-bg-neutral-faint-mult)) h
+  );
+
+  /* ----------------------------------------------------------------
+   * 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: oklch(
+    from var(--ty-neutral-seed-resolved) var(--ty-l-border-strong) c h
+  );
+  --ty-border: oklch(
+    from var(--ty-neutral-seed-resolved) var(--ty-l-border) c h
+  );
+  --ty-border-bold: oklch(
+    from var(--ty-neutral-seed-resolved) var(--ty-l-border-bold) c h
+  );
+  --ty-border-soft: oklch(
+    from var(--ty-neutral-seed-resolved) var(--ty-l-border-soft) c h
+  );
+  --ty-border-faint: oklch(
+    from var(--ty-neutral-seed-resolved) var(--ty-l-border-faint) c h
   );
 
   /* ----------------------------------------------------------------
-   * Global neutral borders — read off the neutral color ramp.
+   * 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-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-text-strong: oklch(
+    from var(--ty-neutral-seed-resolved) var(--ty-l-text-strong) c h
+  );
+  --ty-text-bold: oklch(
+    from var(--ty-neutral-seed-resolved) var(--ty-l-text-bold) c h
+  );
+  --ty-text: oklch(
+    from var(--ty-neutral-seed-resolved) var(--ty-l-text-base) c h
+  );
+  --ty-text-soft: oklch(
+    from var(--ty-neutral-seed-resolved) var(--ty-l-text-soft) c h
+  );
+  --ty-text-faint: oklch(
+    from var(--ty-neutral-seed-resolved) var(--ty-l-text-faint) c h
+  );
+
+  --ty-content-border: oklch(
+    from var(--ty-neutral-seed-resolved) var(--ty-l-border-content) c h
+  );
+  --ty-elevated-border: oklch(
+    from var(--ty-neutral-seed-resolved) var(--ty-l-border-elevated) c h
+  );
+  --ty-floating-border: oklch(
+    from var(--ty-neutral-seed-resolved) var(--ty-l-border-floating) c h
+  );
 
   /* ----------------------------------------------------------------
    * 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);
+  --ty-surface-canvas: oklch(
+    from var(--ty-primary-seed-resolved) var(--ty-l-surface-canvas)
+      var(--ty-surface-chroma) h
+  );
+  --ty-surface-content: oklch(
+    from var(--ty-primary-seed-resolved) var(--ty-l-surface-content)
+      var(--ty-surface-chroma) h
+  );
+  --ty-surface-elevated: oklch(
+    from var(--ty-primary-seed-resolved) var(--ty-l-surface-elevated)
+      var(--ty-surface-chroma) h
+  );
+  --ty-surface-floating: oklch(
+    from var(--ty-primary-seed-resolved) var(--ty-l-surface-floating)
+      var(--ty-surface-chroma) h
+  );
+  --ty-surface-input: oklch(
+    from var(--ty-primary-seed-resolved) var(--ty-l-surface-input)
+      var(--ty-surface-chroma) h
+  );
 
   /* ----------------------------------------------------------------
    * Inputs — tied to neutral ramp so form controls retint with brand.
@@ -575,7 +725,7 @@ html[data-theme="dark"] {
   --ty-input-disabled-color: var(--ty-color-neutral-bold);
   --ty-input-shadow-focus: color-mix(
     in oklab,
-    var(--ty-color-primary) 5%,
+    var(--ty-color-primary) var(--ty-focus-ring-alpha),
     transparent
   );
 }
@@ -597,16 +747,13 @@ html[data-theme="dark"] {
  * the oklch(from var(--ty-color-*)) formulas resolve per-mode automatically,
  * so no dark duplicate is needed.
  * --------------------------------------------------------------*/
-html:root {
+html:root,
+[data-ty-theme] {
   /* 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))
@@ -621,8 +768,8 @@ html:root {
   );
   /* 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)
+    from var(--ty-neutral-seed-resolved) var(--ty-l-solid-neutral)
+      calc(c * var(--ty-c-strong-mult)) h
   );
 
   /* ----------------------------------------------------------------
@@ -647,7 +794,7 @@ html:root {
 
   /* 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.6;
+  --ty-solid-fg-threshold: 0.62;
 
   --ty-solid-primary-fg: oklch(
     from var(--ty-solid-primary)
@@ -662,18 +809,6 @@ html:root {
       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)
@@ -741,18 +876,6 @@ html:root {
     from var(--ty-solid-primary) calc(l + var(--ty-solid-soft-l)) c h
   );
 
-  --ty-solid-secondary-hover: oklch(
-    from var(--ty-solid-secondary) calc(l + var(--ty-solid-hover-l)) c h
-  );
-  --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
@@ -807,304 +930,439 @@ 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 3 — THEME TRANSITIONS
+ * =====================================================================
+ *
+ * Every dial above is a plain number (or percentage) — and every color
+ * in the system is a pure function of those dials. Registering the
+ * dials as typed custom properties makes them INTERPOLABLE, so a theme
+ * or mode switch (html.dark, html.love, a [data-ty-theme] pack) does
+ * not snap: the dials animate, and every derived color — buttons,
+ * borders, surfaces, text, focus rings — crossfades through OKLCH
+ * space frame by frame. No JS, no repaint tricks; it falls out of the
+ * dials-not-colors architecture.
+ *
+ * Opt out (or retune) per app:
+ *   :root { --ty-theme-transition: 0s; }      no animation
+ *   :root { --ty-theme-transition: 1.2s; }    slower crossfade
+ * Reduced-motion users never get the animation.
+ *
+ * Browsers without @property simply skip registration — themes still
+ * work, switches just snap (the pre-TC37 behavior).
  * ===================================================================== */
 
-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)
-  );
-  --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-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-border-danger: var(--ty-color-danger-soft);
-
-  /* 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)
-  );
-  --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)
-  );
-  --ty-bg-neutral-strong: oklch(
-    0.95 calc(var(--ty-neutral-chroma) * 2) var(--ty-neutral-hue)
-  );
-  --ty-bg-neutral-faint: oklch(
-    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));
+@property --ty-brand-hue {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 45;
+}
+@property --ty-brand-chroma {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.125;
+}
+@property --ty-surface-chroma {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+@property --ty-success-hue {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 145;
+}
+@property --ty-success-chroma {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.135;
+}
+@property --ty-warning-hue {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 75;
+}
+@property --ty-warning-chroma {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.25;
+}
+@property --ty-danger-hue {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 25;
+}
+@property --ty-danger-chroma {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.164;
+}
+@property --ty-neutral-hue {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+@property --ty-neutral-chroma {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+@property --ty-l-strong {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.38;
+}
+@property --ty-l-bold {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.46;
+}
+@property --ty-l-base {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.54;
+}
+@property --ty-l-soft {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.72;
+}
+@property --ty-l-faint {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.88;
+}
+@property --ty-l-bg-base {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.96;
+}
+@property --ty-l-bg-bold {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.92;
+}
+@property --ty-l-bg-soft {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.98;
+}
+@property --ty-l-text-strong {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+@property --ty-l-text-bold {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+@property --ty-l-text-base {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.21;
+}
+@property --ty-l-text-soft {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.37;
+}
+@property --ty-l-text-faint {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.71;
+}
+@property --ty-l-border-content {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.93;
+}
+@property --ty-l-border-elevated {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.93;
+}
+@property --ty-l-border-floating {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.93;
+}
+@property --ty-l-border-strong {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.46;
+}
+@property --ty-l-border-bold {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.64;
+}
+@property --ty-l-border {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.76;
+}
+@property --ty-l-border-soft {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.88;
+}
+@property --ty-l-border-faint {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.92;
+}
+@property --ty-l-surface-canvas {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.985;
+}
+@property --ty-l-surface-content {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+@property --ty-l-surface-elevated {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+@property --ty-l-surface-floating {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+@property --ty-l-surface-input {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+@property --ty-l-solid-neutral {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.4;
+}
+@property --ty-l-bg-neutral-strong {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.25;
+}
+@property --ty-l-bg-neutral-faint {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.99;
+}
+@property --ty-c-bg-neutral-faint-mult {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.4;
+}
+@property --ty-c-strong-mult {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.77;
+}
+@property --ty-c-bold-mult {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+@property --ty-c-base-mult {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.92;
+}
+@property --ty-c-soft-mult {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.77;
+}
+@property --ty-c-faint-mult {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.46;
+}
+@property --ty-c-bg-base-mult {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.15;
+}
+@property --ty-c-bg-bold-mult {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.38;
+}
+@property --ty-c-bg-soft-mult {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.08;
+}
+@property --ty-primary-l-factor {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+@property --ty-success-l-factor {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+@property --ty-warning-l-factor {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1.15;
+}
+@property --ty-danger-l-factor {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+@property --ty-neutral-l-factor {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+@property --ty-solid-hover-l {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: -0.04;
+}
+@property --ty-solid-active-l {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: -0.08;
+}
+@property --ty-solid-strong-l {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: -0.06;
+}
+@property --ty-solid-soft-l {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.1;
+}
+@property --ty-solid-l {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+@property --ty-solid-c {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+@property --ty-solid-h {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+@property --ty-solid-fg-threshold {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.62;
+}
+@property --ty-focus-ring-alpha {
+  syntax: "<percentage>";
+  inherits: true;
+  initial-value: 5%;
+}
 
-  /* 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
-  );
+@property --ty-primary-seed-resolved {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #808080;
+}
+@property --ty-success-seed-resolved {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #808080;
+}
+@property --ty-warning-seed-resolved {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #808080;
+}
+@property --ty-danger-seed-resolved {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #808080;
+}
+@property --ty-neutral-seed-resolved {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #808080;
+}
 
-  /* 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)
-  );
+@media (prefers-reduced-motion: no-preference) {
+  html,
+  [data-ty-theme] {
+    transition-property:
+    --ty-brand-hue,
+    --ty-brand-chroma,
+    --ty-surface-chroma,
+    --ty-success-hue,
+    --ty-success-chroma,
+    --ty-warning-hue,
+    --ty-warning-chroma,
+    --ty-danger-hue,
+    --ty-danger-chroma,
+    --ty-neutral-hue,
+    --ty-neutral-chroma,
+    --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,
+    --ty-l-text-strong,
+    --ty-l-text-bold,
+    --ty-l-text-base,
+    --ty-l-text-soft,
+    --ty-l-text-faint,
+    --ty-l-border-content,
+    --ty-l-border-elevated,
+    --ty-l-border-floating,
+    --ty-l-border-strong,
+    --ty-l-border-bold,
+    --ty-l-border,
+    --ty-l-border-soft,
+    --ty-l-border-faint,
+    --ty-l-surface-canvas,
+    --ty-l-surface-content,
+    --ty-l-surface-elevated,
+    --ty-l-surface-floating,
+    --ty-l-surface-input,
+    --ty-l-solid-neutral,
+    --ty-l-bg-neutral-strong,
+    --ty-l-bg-neutral-faint,
+    --ty-c-bg-neutral-faint-mult,
+    --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,
+    --ty-primary-l-factor,
+    --ty-success-l-factor,
+    --ty-warning-l-factor,
+    --ty-danger-l-factor,
+    --ty-neutral-l-factor,
+    --ty-solid-hover-l,
+    --ty-solid-active-l,
+    --ty-solid-strong-l,
+    --ty-solid-soft-l,
+    --ty-solid-l,
+    --ty-solid-c,
+    --ty-solid-h,
+    --ty-solid-fg-threshold,
+    --ty-focus-ring-alpha;
+    transition-duration: var(--ty-theme-transition, 0.45s);
+    transition-timing-function: ease;
+  }
 }