tyrell-components 1.0.0-RC11 → 1.0.0-RC13

package/dist/tyrell-brand.css

@@ -1,913 +0,0 @@
-/* =====================================================================
- * tyrell-brand.css — OKLCH-based brand layer for Tyrell Components
- * =====================================================================
- *
- * Opt-in. Load AFTER `tyrell.css`. Override a few variables to rebrand.
- *
- *   <link rel="stylesheet" href=".../tyrell.css">
- *   <link rel="stylesheet" href=".../tyrell-brand.css">
- *
- *   :root {
- *     --ty-brand-hue: 200;        // teal. Try 260 indigo, 30 orange, 145 emerald.
- *     --ty-brand-chroma: 0.13;
- *   }
- *
- * =====================================================================
- * 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
- * =====================================================================
- *
- *   SECTION 1 — KNOBS  (~lines 80–225)
- *     The variables you might want to override. Five tiers from drop-in
- *     rebrand (Tier 1) to surgical per-flavor tweak (Tier 5).
- *
- *   SECTION 2 — IMPLEMENTATION
- *     The oklch() expressions that wire the knobs through to the actual
- *     color tokens. Rarely needs editing — Section 1 is the contract.
- *
- * Browser support: OKLCH is in every evergreen browser since mid-2023.
- *
- * ===================================================================== */
-
-/* =====================================================================
- * SECTION 1 — KNOBS
- * =====================================================================
- *
- * 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.
- * ===================================================================== */
-
-:root {
-  /* ----------------------------------------------------------------
-   * 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;
-
-  /* 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
-   * 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-neutral-hue: var(--ty-brand-hue);
-  --ty-neutral-chroma: calc(var(--ty-brand-chroma) * 0.04);
-
-  /* ----------------------------------------------------------------
-   * 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 */
-  --ty-l-bold: 0.46; /* +  high emphasis */
-  --ty-l-base: 0.54; /*    body */
-  --ty-l-soft: 0.72; /* -  low emphasis */
-  --ty-l-faint: 0.88; /* -- min emphasis */
-
-  --ty-l-bg-base: 0.96;
-  --ty-l-bg-bold: 0.92;
-  --ty-l-bg-soft: 0.98;
-
-  /* ----------------------------------------------------------------
-   * 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;
-  --ty-c-bold-mult: 1;
-  --ty-c-base-mult: 0.92;
-  --ty-c-soft-mult: 0.77;
-  --ty-c-faint-mult: 0.46;
-
-  --ty-c-bg-base-mult: 0.15;
-  --ty-c-bg-bold-mult: 0.38;
-  --ty-c-bg-soft-mult: 0.08;
-
-  /* ----------------------------------------------------------------
-   * 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;
-}
-
-/* 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.86;
-  --ty-l-bold: 0.74;
-  --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;
-}
-
-/* =====================================================================
- * 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(
-    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 — 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)
-  );
-  --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.25 calc(var(--ty-neutral-chroma) * 2) var(--ty-neutral-hue)
-  );
-  --ty-bg-neutral-faint: oklch(
-    0.99 calc(var(--ty-neutral-chroma) * 0.4) var(--ty-neutral-hue)
-  );
-
-  /* ----------------------------------------------------------------
-   * 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));
-  --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.
-   * --------------------------------------------------------------*/
-  --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-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) 5%,
-    transparent
-  );
-
-  /* ----------------------------------------------------------------
-   * 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;
-
-  /* Solid neutral routes to a darker shade than neutral-base. The "soft"
-   * solid-neutral softens to a mid-grey for inactive states. */
-  --ty-solid-neutral-soft: oklch(
-    0.6 calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
-      var(--ty-neutral-hue)
-  );
-  --ty-solid-neutral: oklch(
-    0.4 calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
-      var(--ty-neutral-hue)
-  );
-  --ty-solid-neutral-strong: oklch(
-    0.2 calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
-      var(--ty-neutral-hue)
-  );
-}
-
-/* =====================================================================
- * 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"] {
-  /* 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 — 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));
-
-  /* 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-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
-  );
-
-  /* Solid buttons */
-  --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 — in dark mode, "dark grey" lives at the other end
-   * of the ramp. Both modes get a shade darker 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)
-  );
-  --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;
-}