@forte-ui/react 1.0.0-alpha.1

package/dist/styles/tokens.color.css

@@ -0,0 +1,223 @@
+/**
+ * GENERATED FILE — do not edit by hand.
+ * Source of truth: packages/react/scripts/ramp.mjs
+ * Regenerate with:  pnpm --filter @forte-ui/react tokens
+ */
+
+@layer forte.tokens {
+  /* -----------------------------------------------------------------------
+   * Layer 0 — fallback for engines without relative colour syntax.
+   * Hue cannot be extracted without it, so we mix toward white/black instead.
+   * Degraded but coherent, and it keeps a brand seed recognisable.
+   * --------------------------------------------------------------------- */
+  :root,
+  .forte-theme,
+  [data-forte-theme] {
+    --forte-accent-1: color-mix(in oklab, var(--forte-accent-seed) 3%, white);
+    --forte-accent-2: color-mix(in oklab, var(--forte-accent-seed) 6%, white);
+    --forte-accent-3: color-mix(in oklab, var(--forte-accent-seed) 12%, white);
+    --forte-accent-4: color-mix(in oklab, var(--forte-accent-seed) 18%, white);
+    --forte-accent-5: color-mix(in oklab, var(--forte-accent-seed) 25%, white);
+    --forte-accent-6: color-mix(in oklab, var(--forte-accent-seed) 33%, white);
+    --forte-accent-7: color-mix(in oklab, var(--forte-accent-seed) 45%, white);
+    --forte-accent-8: color-mix(in oklab, var(--forte-accent-seed) 62%, white);
+    --forte-accent-9: var(--forte-accent-seed);
+    --forte-accent-10: color-mix(in oklab, var(--forte-accent-seed) 92%, black);
+    --forte-accent-11: color-mix(in oklab, var(--forte-accent-seed) 65%, black);
+    --forte-accent-12: color-mix(in oklab, var(--forte-accent-seed) 30%, black);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root,
+    .forte-theme,
+    [data-forte-theme] {
+      --forte-accent-1: color-mix(in oklab, var(--forte-accent-seed) 8%, #0a0a0b);
+      --forte-accent-2: color-mix(in oklab, var(--forte-accent-seed) 12%, #0a0a0b);
+      --forte-accent-3: color-mix(in oklab, var(--forte-accent-seed) 22%, #0a0a0b);
+      --forte-accent-4: color-mix(in oklab, var(--forte-accent-seed) 30%, #0a0a0b);
+      --forte-accent-5: color-mix(in oklab, var(--forte-accent-seed) 38%, #0a0a0b);
+      --forte-accent-6: color-mix(in oklab, var(--forte-accent-seed) 48%, #0a0a0b);
+      --forte-accent-7: color-mix(in oklab, var(--forte-accent-seed) 62%, #0a0a0b);
+      --forte-accent-8: color-mix(in oklab, var(--forte-accent-seed) 80%, #0a0a0b);
+      --forte-accent-10: color-mix(in oklab, var(--forte-accent-seed) 88%, white);
+      --forte-accent-11: color-mix(in oklab, var(--forte-accent-seed) 55%, white);
+      --forte-accent-12: color-mix(in oklab, var(--forte-accent-seed) 22%, white);
+    }
+  }
+  :root,
+  .forte-theme,
+  [data-forte-theme] {
+    --forte-secondary-1: color-mix(in oklab, var(--forte-secondary-seed) 3%, white);
+    --forte-secondary-2: color-mix(in oklab, var(--forte-secondary-seed) 6%, white);
+    --forte-secondary-3: color-mix(in oklab, var(--forte-secondary-seed) 12%, white);
+    --forte-secondary-4: color-mix(in oklab, var(--forte-secondary-seed) 18%, white);
+    --forte-secondary-5: color-mix(in oklab, var(--forte-secondary-seed) 25%, white);
+    --forte-secondary-6: color-mix(in oklab, var(--forte-secondary-seed) 33%, white);
+    --forte-secondary-7: color-mix(in oklab, var(--forte-secondary-seed) 45%, white);
+    --forte-secondary-8: color-mix(in oklab, var(--forte-secondary-seed) 62%, white);
+    --forte-secondary-9: var(--forte-secondary-seed);
+    --forte-secondary-10: color-mix(in oklab, var(--forte-secondary-seed) 92%, black);
+    --forte-secondary-11: color-mix(in oklab, var(--forte-secondary-seed) 65%, black);
+    --forte-secondary-12: color-mix(in oklab, var(--forte-secondary-seed) 30%, black);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root,
+    .forte-theme,
+    [data-forte-theme] {
+      --forte-secondary-1: color-mix(in oklab, var(--forte-secondary-seed) 8%, #0a0a0b);
+      --forte-secondary-2: color-mix(in oklab, var(--forte-secondary-seed) 12%, #0a0a0b);
+      --forte-secondary-3: color-mix(in oklab, var(--forte-secondary-seed) 22%, #0a0a0b);
+      --forte-secondary-4: color-mix(in oklab, var(--forte-secondary-seed) 30%, #0a0a0b);
+      --forte-secondary-5: color-mix(in oklab, var(--forte-secondary-seed) 38%, #0a0a0b);
+      --forte-secondary-6: color-mix(in oklab, var(--forte-secondary-seed) 48%, #0a0a0b);
+      --forte-secondary-7: color-mix(in oklab, var(--forte-secondary-seed) 62%, #0a0a0b);
+      --forte-secondary-8: color-mix(in oklab, var(--forte-secondary-seed) 80%, #0a0a0b);
+      --forte-secondary-10: color-mix(in oklab, var(--forte-secondary-seed) 88%, white);
+      --forte-secondary-11: color-mix(in oklab, var(--forte-secondary-seed) 55%, white);
+      --forte-secondary-12: color-mix(in oklab, var(--forte-secondary-seed) 22%, white);
+    }
+  }
+  :root,
+  .forte-theme,
+  [data-forte-theme] {
+    --forte-gray-1: light-dark(oklch(0.994 0 0), oklch(0.178 0 0));
+    --forte-gray-2: light-dark(oklch(0.982 0 0), oklch(0.213 0 0));
+    --forte-gray-3: light-dark(oklch(0.957 0 0), oklch(0.252 0 0));
+    --forte-gray-4: light-dark(oklch(0.935 0 0), oklch(0.284 0 0));
+    --forte-gray-5: light-dark(oklch(0.914 0 0), oklch(0.314 0 0));
+    --forte-gray-6: light-dark(oklch(0.891 0 0), oklch(0.350 0 0));
+    --forte-gray-7: light-dark(oklch(0.858 0 0), oklch(0.401 0 0));
+    --forte-gray-8: light-dark(oklch(0.797 0 0), oklch(0.487 0 0));
+    --forte-gray-9: light-dark(oklch(0.646 0 0), oklch(0.537 0 0));
+    --forte-gray-10: light-dark(oklch(0.610 0 0), oklch(0.585 0 0));
+    --forte-gray-11: light-dark(oklch(0.503 0 0), oklch(0.770 0 0));
+    --forte-gray-12: light-dark(oklch(0.242 0 0), oklch(0.949 0 0));
+  }
+
+  /* -----------------------------------------------------------------------
+   * Layer 1 — the real ramps.
+   * The @supports test uses a LITERAL colour on purpose: a test containing
+   * var() reports true unconditionally and would never guard anything.
+   * light-dark() needs no separate guard — relative colour syntax shipped
+   * later than light-dark() in every engine, so passing this test implies it.
+   * --------------------------------------------------------------------- */
+  @supports (color: oklch(from red l c h)) {
+    :root,
+    .forte-theme,
+    [data-forte-theme] {
+      --forte-accent-1: light-dark(
+        oklch(from var(--forte-accent-seed) 0.993 min(0.010, calc(c * 0.04)) h),
+        oklch(from var(--forte-accent-seed) 0.178 min(0.018, calc(c * 0.10)) h));
+      --forte-accent-2: light-dark(
+        oklch(from var(--forte-accent-seed) 0.978 min(0.022, calc(c * 0.09)) h),
+        oklch(from var(--forte-accent-seed) 0.213 min(0.028, calc(c * 0.14)) h));
+      --forte-accent-3: light-dark(
+        oklch(from var(--forte-accent-seed) 0.954 min(0.043, calc(c * 0.17)) h),
+        oklch(from var(--forte-accent-seed) 0.271 min(0.060, calc(c * 0.32)) h));
+      --forte-accent-4: light-dark(
+        oklch(from var(--forte-accent-seed) 0.930 min(0.062, calc(c * 0.25)) h),
+        oklch(from var(--forte-accent-seed) 0.313 min(0.084, calc(c * 0.45)) h));
+      --forte-accent-5: light-dark(
+        oklch(from var(--forte-accent-seed) 0.899 min(0.078, calc(c * 0.33)) h),
+        oklch(from var(--forte-accent-seed) 0.363 min(0.098, calc(c * 0.53)) h));
+      --forte-accent-6: light-dark(
+        oklch(from var(--forte-accent-seed) 0.860 min(0.092, calc(c * 0.42)) h),
+        oklch(from var(--forte-accent-seed) 0.424 min(0.104, calc(c * 0.56)) h));
+      --forte-accent-7: light-dark(
+        oklch(from var(--forte-accent-seed) 0.810 min(0.110, calc(c * 0.52)) h),
+        oklch(from var(--forte-accent-seed) 0.503 min(0.112, calc(c * 0.60)) h));
+      --forte-accent-8: light-dark(
+        oklch(from var(--forte-accent-seed) 0.745 min(0.140, calc(c * 0.66)) h),
+        oklch(from var(--forte-accent-seed) 0.606 min(0.130, calc(c * 0.70)) h));
+      --forte-accent-9: var(--forte-accent-seed);
+      --forte-accent-10: light-dark(
+        oklch(from var(--forte-accent-seed) clamp(0.30, calc(l - 0.035), 0.95) c h),
+        oklch(from var(--forte-accent-seed) clamp(0.30, calc(l + 0.05), 0.93) min(0.17, calc(c * 0.90)) h));
+      --forte-accent-11: light-dark(
+        oklch(from var(--forte-accent-seed) clamp(0.32, calc(l - 0.09), 0.490) min(0.15, calc(c * 0.80)) h),
+        oklch(from var(--forte-accent-seed) clamp(0.76, calc(l + 0.16), 0.92) min(0.14, calc(c * 0.72)) h));
+      --forte-accent-12: light-dark(
+        oklch(from var(--forte-accent-seed) clamp(0.20, calc(l * 0.5), 0.34) min(0.09, calc(c * 0.50)) h),
+        oklch(from var(--forte-accent-seed) clamp(0.88, calc(l + 0.28), 0.96) min(0.065, calc(c * 0.34)) h));
+    }
+    :root,
+    .forte-theme,
+    [data-forte-theme] {
+      --forte-secondary-1: light-dark(
+        oklch(from var(--forte-secondary-seed) 0.993 min(0.010, calc(c * 0.04)) h),
+        oklch(from var(--forte-secondary-seed) 0.178 min(0.018, calc(c * 0.10)) h));
+      --forte-secondary-2: light-dark(
+        oklch(from var(--forte-secondary-seed) 0.978 min(0.022, calc(c * 0.09)) h),
+        oklch(from var(--forte-secondary-seed) 0.213 min(0.028, calc(c * 0.14)) h));
+      --forte-secondary-3: light-dark(
+        oklch(from var(--forte-secondary-seed) 0.954 min(0.043, calc(c * 0.17)) h),
+        oklch(from var(--forte-secondary-seed) 0.271 min(0.060, calc(c * 0.32)) h));
+      --forte-secondary-4: light-dark(
+        oklch(from var(--forte-secondary-seed) 0.930 min(0.062, calc(c * 0.25)) h),
+        oklch(from var(--forte-secondary-seed) 0.313 min(0.084, calc(c * 0.45)) h));
+      --forte-secondary-5: light-dark(
+        oklch(from var(--forte-secondary-seed) 0.899 min(0.078, calc(c * 0.33)) h),
+        oklch(from var(--forte-secondary-seed) 0.363 min(0.098, calc(c * 0.53)) h));
+      --forte-secondary-6: light-dark(
+        oklch(from var(--forte-secondary-seed) 0.860 min(0.092, calc(c * 0.42)) h),
+        oklch(from var(--forte-secondary-seed) 0.424 min(0.104, calc(c * 0.56)) h));
+      --forte-secondary-7: light-dark(
+        oklch(from var(--forte-secondary-seed) 0.810 min(0.110, calc(c * 0.52)) h),
+        oklch(from var(--forte-secondary-seed) 0.503 min(0.112, calc(c * 0.60)) h));
+      --forte-secondary-8: light-dark(
+        oklch(from var(--forte-secondary-seed) 0.745 min(0.140, calc(c * 0.66)) h),
+        oklch(from var(--forte-secondary-seed) 0.606 min(0.130, calc(c * 0.70)) h));
+      --forte-secondary-9: var(--forte-secondary-seed);
+      --forte-secondary-10: light-dark(
+        oklch(from var(--forte-secondary-seed) clamp(0.30, calc(l - 0.035), 0.95) c h),
+        oklch(from var(--forte-secondary-seed) clamp(0.30, calc(l + 0.05), 0.93) min(0.17, calc(c * 0.90)) h));
+      --forte-secondary-11: light-dark(
+        oklch(from var(--forte-secondary-seed) clamp(0.32, calc(l - 0.09), 0.490) min(0.15, calc(c * 0.80)) h),
+        oklch(from var(--forte-secondary-seed) clamp(0.76, calc(l + 0.16), 0.92) min(0.14, calc(c * 0.72)) h));
+      --forte-secondary-12: light-dark(
+        oklch(from var(--forte-secondary-seed) clamp(0.20, calc(l * 0.5), 0.34) min(0.09, calc(c * 0.50)) h),
+        oklch(from var(--forte-secondary-seed) clamp(0.88, calc(l + 0.28), 0.96) min(0.065, calc(c * 0.34)) h));
+    }
+    :root,
+    .forte-theme,
+    [data-forte-theme] {
+      --forte-gray-1: light-dark(
+        oklch(from var(--forte-accent-seed) 0.994 min(calc(0.002 * var(--forte-neutral-tint)), calc(c * 0.02)) h),
+        oklch(from var(--forte-accent-seed) 0.178 min(calc(0.004 * var(--forte-neutral-tint)), calc(c * 0.03)) h));
+      --forte-gray-2: light-dark(
+        oklch(from var(--forte-accent-seed) 0.982 min(calc(0.004 * var(--forte-neutral-tint)), calc(c * 0.03)) h),
+        oklch(from var(--forte-accent-seed) 0.213 min(calc(0.006 * var(--forte-neutral-tint)), calc(c * 0.04)) h));
+      --forte-gray-3: light-dark(
+        oklch(from var(--forte-accent-seed) 0.957 min(calc(0.006 * var(--forte-neutral-tint)), calc(c * 0.04)) h),
+        oklch(from var(--forte-accent-seed) 0.252 min(calc(0.009 * var(--forte-neutral-tint)), calc(c * 0.05)) h));
+      --forte-gray-4: light-dark(
+        oklch(from var(--forte-accent-seed) 0.935 min(calc(0.008 * var(--forte-neutral-tint)), calc(c * 0.05)) h),
+        oklch(from var(--forte-accent-seed) 0.284 min(calc(0.011 * var(--forte-neutral-tint)), calc(c * 0.06)) h));
+      --forte-gray-5: light-dark(
+        oklch(from var(--forte-accent-seed) 0.914 min(calc(0.009 * var(--forte-neutral-tint)), calc(c * 0.05)) h),
+        oklch(from var(--forte-accent-seed) 0.314 min(calc(0.012 * var(--forte-neutral-tint)), calc(c * 0.06)) h));
+      --forte-gray-6: light-dark(
+        oklch(from var(--forte-accent-seed) 0.891 min(calc(0.01 * var(--forte-neutral-tint)), calc(c * 0.06)) h),
+        oklch(from var(--forte-accent-seed) 0.350 min(calc(0.013 * var(--forte-neutral-tint)), calc(c * 0.07)) h));
+      --forte-gray-7: light-dark(
+        oklch(from var(--forte-accent-seed) 0.858 min(calc(0.011 * var(--forte-neutral-tint)), calc(c * 0.06)) h),
+        oklch(from var(--forte-accent-seed) 0.401 min(calc(0.014 * var(--forte-neutral-tint)), calc(c * 0.07)) h));
+      --forte-gray-8: light-dark(
+        oklch(from var(--forte-accent-seed) 0.797 min(calc(0.012 * var(--forte-neutral-tint)), calc(c * 0.07)) h),
+        oklch(from var(--forte-accent-seed) 0.487 min(calc(0.014 * var(--forte-neutral-tint)), calc(c * 0.07)) h));
+      --forte-gray-9: light-dark(
+        oklch(from var(--forte-accent-seed) 0.646 min(calc(0.01 * var(--forte-neutral-tint)), calc(c * 0.06)) h),
+        oklch(from var(--forte-accent-seed) 0.537 min(calc(0.012 * var(--forte-neutral-tint)), calc(c * 0.06)) h));
+      --forte-gray-10: light-dark(
+        oklch(from var(--forte-accent-seed) 0.610 min(calc(0.008 * var(--forte-neutral-tint)), calc(c * 0.05)) h),
+        oklch(from var(--forte-accent-seed) 0.585 min(calc(0.01 * var(--forte-neutral-tint)), calc(c * 0.05)) h));
+      --forte-gray-11: light-dark(
+        oklch(from var(--forte-accent-seed) 0.503 min(calc(0.006 * var(--forte-neutral-tint)), calc(c * 0.04)) h),
+        oklch(from var(--forte-accent-seed) 0.770 min(calc(0.007 * var(--forte-neutral-tint)), calc(c * 0.04)) h));
+      --forte-gray-12: light-dark(
+        oklch(from var(--forte-accent-seed) 0.242 min(calc(0.004 * var(--forte-neutral-tint)), calc(c * 0.03)) h),
+        oklch(from var(--forte-accent-seed) 0.949 min(calc(0.005 * var(--forte-neutral-tint)), calc(c * 0.03)) h));
+    }
+  }
+}

package/dist/styles/tokens.css

@@ -0,0 +1,460 @@
+/**
+ * forte-ui semantic tokens, geometry, and motion.
+ * The colour *ramps* are generated — see tokens.color.css / scripts/ramp.mjs.
+ *
+ * Most blocks here are declared on `:root, .forte-theme, [data-forte-theme]`, not
+ * on `:root` alone. That repetition is load-bearing: a `var()` inside an
+ * unregistered custom property is substituted at the element where the
+ * property is DECLARED, so a subtree that only overrides `--forte-accent-seed`
+ * would keep the root's already-resolved values. Restating the derivations on
+ * the scope selectors is what makes per-subtree theming work at all.
+ *
+ * The exception is the radius and density defaults, which sit on `:root`
+ * alone — they are what the `data-forte-*` presets rewrite, so restating them on
+ * every scope would have each scope shadow a preset inherited from an
+ * ancestor. See the comment above that block; motion.css does the same.
+ */
+@layer forte.tokens {
+  :root {
+    color-scheme: light dark;
+  }
+
+  /* ------------------------------------------------------------------------
+   * Direction
+   *
+   * `--forte-direction` is the sign of the inline axis, for the handful of
+   * places that must move something with `translate`/`transform`, which have
+   * no logical form and always run along the physical x axis. A component
+   * multiplies its own positive travel by it; nothing else here needs to know
+   * about direction, because every other placement uses logical properties.
+   *
+   * Keyed on the `dir` ATTRIBUTE, and deliberately not on `:dir()`: with this
+   * package's CSS targets, `:dir()` is lowered at build time into a list of
+   * `:lang()` selectors, which follows the document *language* rather than the
+   * `dir` attribute — so the rule would quietly stop matching in the published
+   * stylesheet while still working in source.
+   *
+   * Both directions are declared, and the value is inherited rather than read
+   * off an ancestor selector, so the NEAREST `dir` ancestor wins: an LTR
+   * island inside an RTL page gets 1 back, at any nesting depth.
+   * --------------------------------------------------------------------- */
+  [dir="ltr"] {
+    --forte-direction: 1;
+  }
+
+  [dir="rtl"] {
+    --forte-direction: -1;
+  }
+
+  /* Forcing a mode opts out of the OS preference. */
+  [data-theme="light"] {
+    color-scheme: light;
+  }
+
+  [data-theme="dark"] {
+    color-scheme: dark;
+  }
+
+  /* ------------------------------------------------------------------------
+   * Status colours. Fixed hues — a brand seed must not be able to make an
+   * error message look reassuring.
+   * --------------------------------------------------------------------- */
+  :root,
+  .forte-theme,
+  [data-forte-theme] {
+    --forte-danger-2: light-dark(oklch(0.974 0.014 17), oklch(0.220 0.035 17));
+    --forte-danger-3: light-dark(oklch(0.944 0.033 17), oklch(0.272 0.061 17));
+    --forte-danger-7: light-dark(oklch(0.808 0.098 17), oklch(0.480 0.128 17));
+    --forte-danger-9: oklch(0.552 0.211 24);
+    --forte-danger-10: light-dark(oklch(0.512 0.208 24), oklch(0.606 0.204 24));
+    --forte-danger-11: light-dark(oklch(0.485 0.196 24), oklch(0.760 0.140 20));
+
+    --forte-success-2: light-dark(oklch(0.976 0.017 155), oklch(0.216 0.032 155));
+    --forte-success-3: light-dark(oklch(0.946 0.042 155), oklch(0.268 0.054 155));
+    --forte-success-7: light-dark(oklch(0.810 0.100 155), oklch(0.470 0.110 155));
+    --forte-success-9: oklch(0.545 0.148 152);
+    --forte-success-11: light-dark(oklch(0.475 0.128 152), oklch(0.792 0.135 152));
+
+    --forte-warning-2: light-dark(oklch(0.980 0.024 85), oklch(0.222 0.034 85));
+    --forte-warning-3: light-dark(oklch(0.955 0.058 85), oklch(0.276 0.056 85));
+    /* Lighter than its own `-9`, which reads backwards until you remember
+     * that amber's 9 sits at 0.812 — step 7 has to stay above it or the ramp
+     * inverts. It is the faintest of the four `-7` edges against white
+     * (1.6:1, where danger manages 1.9) and that is the hue, not a mistake:
+     * a warning chip carries its meaning in the label, never in the border
+     * alone. */
+    --forte-warning-7: light-dark(oklch(0.855 0.110 85), oklch(0.500 0.095 85));
+    --forte-warning-9: oklch(0.812 0.163 82);
+    --forte-warning-11: light-dark(oklch(0.520 0.118 60), oklch(0.840 0.140 85));
+
+    /* Blue runs out of sRGB gamut earlier than the other three hues do, so
+     * steps 2 and 3 carry visibly less chroma than their danger and success
+     * counterparts rather than the same number clipped: the browser clips
+     * naively instead of gamut-mapping, and a clipped near-white shifts
+     * lightness as well as saturation. `--forte-info-11` on `--forte-info-3`
+     * still measures 5.12:1 light / 7.78:1 dark. */
+    --forte-info-2: light-dark(oklch(0.975 0.012 250), oklch(0.218 0.038 250));
+    --forte-info-3: light-dark(oklch(0.945 0.026 250), oklch(0.272 0.065 250));
+    --forte-info-7: light-dark(oklch(0.800 0.090 250), oklch(0.478 0.130 250));
+    /* Step 9 sat at 0.588 for as long as nothing painted text on it. `Badge`
+     * does — a solid `tone="info"` chip — and white measured 4.09:1 there, an
+     * AA failure. Black clears it (4.77:1), but nobody ships black on azure,
+     * so the fill moved instead: 0.550 puts white at 4.78:1 and lands info
+     * between its own siblings (danger 0.552, success 0.545) rather than as an
+     * outlier above them. `Alert` reads only the tints above and is unaffected.
+     * check-contrast.mjs asserts the pair, which is what stops a future nudge
+     * from undoing this. */
+    --forte-info-9: oklch(0.550 0.158 250);
+    --forte-info-11: light-dark(oklch(0.500 0.140 250), oklch(0.790 0.110 250));
+  }
+
+  /* Baseline for engines that reach neither @supports block below. Declared
+   * first on purpose: equal-specificity declarations are won by the LAST one,
+   * so a fallback placed after the @supports blocks would silently defeat
+   * them. Order is the mechanism here. */
+  :root,
+  .forte-theme,
+  [data-forte-theme] {
+    --forte-color-on-primary: oklch(0.995 0 0);
+    --forte-color-on-secondary: oklch(0.995 0 0);
+  }
+
+  /* ------------------------------------------------------------------------
+   * Auto-contrast text on a solid fill.
+   *
+   * The white/black crossover is NOT a constant lightness. It rises for
+   * pinks and purples and falls for greens, because OKLCH lightness weights
+   * the channels differently from WCAG relative luminance. A first-order hue
+   * term tracks it closely enough that this fallback clears AA on its own:
+   * measured worst case 4.50:1 across 119,108 in-gamut seeds, against a
+   * theoretical optimum of 4.58:1. Coefficients are fitted — keep them in
+   * sync with scripts/check-contrast.mjs, which enforces them.
+   *
+   * `clamp(0, (threshold - l) * 1000, 1)` is a branch: lighter-than-threshold
+   * collapses to 0 (black), darker to 1 (white). Chroma is forced to 0 so the
+   * result is a true neutral rather than a tinted off-white.
+   * --------------------------------------------------------------------- */
+  @supports (color: oklch(from red l c h)) {
+    :root,
+    .forte-theme,
+    [data-forte-theme] {
+      --forte-on-threshold: 0.5675;
+      --forte-on-hue-cos: 0.13;
+      --forte-on-hue-sin: -0.03;
+
+      --forte-color-on-primary: oklch(
+        from var(--forte-accent-9)
+        clamp(0, calc((var(--forte-on-threshold)
+          + c * (var(--forte-on-hue-cos) * cos(h * 1deg)
+               + var(--forte-on-hue-sin) * sin(h * 1deg))
+          - l) * 1000), 1)
+        0 h
+      );
+      --forte-color-on-secondary: oklch(
+        from var(--forte-secondary-9)
+        clamp(0, calc((var(--forte-on-threshold)
+          + c * (var(--forte-on-hue-cos) * cos(h * 1deg)
+               + var(--forte-on-hue-sin) * sin(h * 1deg))
+          - l) * 1000), 1)
+        0 h
+      );
+    }
+  }
+
+  /* contrast-color() judges the actually-painted, gamut-mapped colour rather
+   * than the specified lightness, so it stays correct even for seeds the
+   * fitted threshold can only approximate. Layered second so it wins where
+   * supported. */
+  @supports (color: contrast-color(red)) {
+    :root,
+    .forte-theme,
+    [data-forte-theme] {
+      --forte-color-on-primary: contrast-color(var(--forte-accent-9));
+      --forte-color-on-secondary: contrast-color(var(--forte-secondary-9));
+    }
+  }
+
+  /* ------------------------------------------------------------------------
+   * Semantic aliases — what components actually consume.
+   * --------------------------------------------------------------------- */
+  :root,
+  .forte-theme,
+  [data-forte-theme] {
+    /* Surfaces */
+    --forte-color-background: var(--forte-gray-1);
+    --forte-color-panel: var(--forte-gray-2);
+    --forte-color-panel-hover: var(--forte-gray-3);
+    --forte-color-panel-active: var(--forte-gray-4);
+    --forte-color-overlay: var(--forte-gray-1);
+
+    /* Text */
+    --forte-color-foreground: var(--forte-gray-12);
+    --forte-color-foreground-muted: var(--forte-gray-11);
+    /* 3.73:1 — passes SC 1.4.11 for non-text, FAILS 1.4.3 for body copy.
+     * Icons and decoration only. `prefers-contrast: more` promotes it. */
+    --forte-color-foreground-subtle: var(--forte-gray-10);
+
+    /* Borders */
+    --forte-color-border: var(--forte-gray-7);
+    --forte-color-border-muted: var(--forte-gray-6);
+    --forte-color-border-strong: var(--forte-gray-8);
+
+    /* Primary */
+    --forte-color-primary: var(--forte-accent-9);
+    --forte-color-primary-hover: var(--forte-accent-10);
+    --forte-color-primary-active: var(--forte-accent-11);
+    --forte-color-primary-soft: var(--forte-accent-3);
+    --forte-color-primary-soft-hover: var(--forte-accent-4);
+    --forte-color-primary-soft-active: var(--forte-accent-5);
+    --forte-color-primary-text: var(--forte-accent-11);
+    --forte-color-primary-border: var(--forte-accent-7);
+
+    /* Secondary */
+    --forte-color-secondary: var(--forte-secondary-9);
+    --forte-color-secondary-hover: var(--forte-secondary-10);
+    --forte-color-secondary-active: var(--forte-secondary-11);
+    --forte-color-secondary-soft: var(--forte-secondary-3);
+    --forte-color-secondary-soft-hover: var(--forte-secondary-4);
+    --forte-color-secondary-soft-active: var(--forte-secondary-5);
+    --forte-color-secondary-text: var(--forte-secondary-11);
+    --forte-color-secondary-border: var(--forte-secondary-7);
+
+    /* Status */
+    --forte-color-danger: var(--forte-danger-9);
+    --forte-color-danger-hover: var(--forte-danger-10);
+    --forte-color-danger-text: var(--forte-danger-11);
+    --forte-color-danger-soft: var(--forte-danger-3);
+    --forte-color-danger-border: var(--forte-danger-7);
+    --forte-color-on-danger: oklch(0.995 0 0);
+    --forte-color-success: var(--forte-success-9);
+    --forte-color-success-text: var(--forte-success-11);
+    --forte-color-success-soft: var(--forte-success-3);
+    --forte-color-success-border: var(--forte-success-7);
+    --forte-color-warning: var(--forte-warning-9);
+    --forte-color-warning-text: var(--forte-warning-11);
+    --forte-color-warning-soft: var(--forte-warning-3);
+    --forte-color-warning-border: var(--forte-warning-7);
+    --forte-color-info: var(--forte-info-9);
+    --forte-color-info-text: var(--forte-info-11);
+    --forte-color-info-soft: var(--forte-info-3);
+    --forte-color-info-border: var(--forte-info-7);
+
+    /* Text on a solid status fill. Literals, not the auto-contrast expression
+     * the brand tones use: those hues are fixed above, so the answer is known
+     * at author time and there is nothing for `contrast-color()` to decide.
+     *
+     * The two are not the same colour, and that is the point of having them.
+     * `--forte-warning-9` is a light amber — white on it measures 1.82:1, a
+     * failure a component guessing "solid fill means white text" would ship
+     * silently. `--forte-success-9` sits almost exactly on the white/black
+     * crossover: 4.54:1 white against 4.56:1 black, so it clears AA either way
+     * and by very little. check-contrast.mjs asserts all four pairs, which is
+     * what stops a future nudge to a status hue from quietly breaking one.
+     *
+     * `--forte-color-on-info` is the newest of the four and the note that used
+     * to stand here said to add it "with a matching assertion the day
+     * something needs it". `Badge` needed it. The assertion is in place, and
+     * so is the other half of that day's work: `--forte-info-9` moved down to
+     * 0.550 so the answer could be white — see the note on the ramp above. */
+    --forte-color-on-success: oklch(0.995 0 0);
+    --forte-color-on-warning: oklch(0.145 0 0);
+    --forte-color-on-info: oklch(0.995 0 0);
+  }
+}
+
+/**
+ * Geometry: spacing, radius, density, typography, elevation.
+ */
+@layer forte.tokens {
+  :root,
+  .forte-theme,
+  [data-forte-theme] {
+    /* Spacing (4px base) */
+    --forte-space-1: 0.25rem;
+    --forte-space-2: 0.5rem;
+    --forte-space-3: 0.75rem;
+    --forte-space-4: 1rem;
+    --forte-space-5: 1.5rem;
+    --forte-space-6: 2rem;
+    --forte-space-7: 2.5rem;
+    --forte-space-8: 3rem;
+
+    /* Typography */
+    --forte-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+      "Helvetica Neue", Arial, sans-serif;
+    --forte-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
+      "Liberation Mono", monospace;
+
+    --forte-font-size-1: 0.75rem;
+    --forte-font-size-2: 0.875rem;
+    --forte-font-size-3: 1rem;
+    --forte-font-size-4: 1.125rem;
+    --forte-font-size-5: 1.25rem;
+    --forte-font-size-6: 1.5rem;
+
+    --forte-font-weight-normal: 400;
+    --forte-font-weight-medium: 500;
+    --forte-font-weight-semibold: 600;
+    --forte-font-weight-bold: 700;
+
+    --forte-line-height-tight: 1.2;
+    --forte-line-height-normal: 1.5;
+
+    --forte-letter-spacing-tight: -0.01em;
+    --forte-letter-spacing-normal: 0em;
+
+    /* Elevation. Every shadow is forced to `none` under forced-colors, so a
+     * shadow may never be the only thing separating a surface from the page —
+     * floating surfaces also carry `.forte-hc-surface`. */
+    --forte-shadow-1: 0 1px 2px 0 light-dark(oklch(0 0 0 / 0.05), oklch(0 0 0 / 0.4));
+    --forte-shadow-2:
+      0 1px 3px 0 light-dark(oklch(0 0 0 / 0.1), oklch(0 0 0 / 0.5)),
+      0 1px 2px -1px light-dark(oklch(0 0 0 / 0.1), oklch(0 0 0 / 0.5));
+    --forte-shadow-3:
+      0 4px 6px -1px light-dark(oklch(0 0 0 / 0.1), oklch(0 0 0 / 0.5)),
+      0 2px 4px -2px light-dark(oklch(0 0 0 / 0.1), oklch(0 0 0 / 0.5));
+    --forte-shadow-4:
+      0 12px 24px -6px light-dark(oklch(0 0 0 / 0.12), oklch(0 0 0 / 0.6)),
+      0 4px 8px -4px light-dark(oklch(0 0 0 / 0.1), oklch(0 0 0 / 0.5));
+
+    /* Scrims and glass */
+    --forte-scrim-color: light-dark(oklch(0 0 0 / 0.45), oklch(0 0 0 / 0.65));
+    --forte-scrim-blur: 4px;
+    --forte-glass-alpha: 0.72;
+
+    /* Hit targets — SC 2.5.8 (AA) and 2.5.5 (AAA) */
+    --forte-target-min: 24px;
+    --forte-target-comfortable: 44px;
+  }
+
+  /* ------------------------------------------------------------------------
+   * Radius and density defaults, on `:root` ALONE.
+   *
+   * Everything above is restated on `.forte-theme` / `[data-forte-theme]` because
+   * it is DERIVED from a seed a scope can override, and a `var()` inside an
+   * unregistered custom property is substituted where it is declared. These
+   * two groups are different: they are the values the `data-forte-radius` and
+   * `data-forte-density` presets below rewrite. Restating them on the scope
+   * selectors would mean every theme scope re-declares the DEFAULTS on top of
+   * a preset inherited from an ancestor — `.forte-theme` (0,1,0) and
+   * `[data-forte-radius="pill"]` (0,1,0) tie on specificity, and the scope wins
+   * because it matches the nearer element. A docs demo frame inside a page
+   * themed to `pill` would silently snap back to the default radius.
+   *
+   * So: inheritance carries a preset into a scope, and a scope that wants its
+   * own geometry says so with its own `data-forte-radius` / `data-forte-density`,
+   * which then wins on the blocks below. The cost is that overriding a raw
+   * `--forte-space-*` or `--forte-radius-*` on a subtree no longer re-derives the
+   * semantic values — that is what the presets are for.
+   * --------------------------------------------------------------------- */
+  :root {
+    /* Radius scale */
+    --forte-radius-1: 0.125rem;
+    --forte-radius-2: 0.25rem;
+    --forte-radius-3: 0.375rem;
+    --forte-radius-4: 0.5rem;
+    --forte-radius-5: 0.75rem;
+    --forte-radius-6: 1rem;
+    --forte-radius-full: 9999px;
+
+    /* Semantic radius — what components consume, so a preset can retarget
+     * the whole library by rewriting three values instead of seven. */
+    --forte-radius-control: var(--forte-radius-4);
+    --forte-radius-surface: var(--forte-radius-5);
+    --forte-radius-pill: var(--forte-radius-full);
+
+    /* Density: control metrics. Comfortable is the default. */
+    --forte-control-h-sm: 1.75rem;
+    --forte-control-h-md: 2.25rem;
+    --forte-control-h-lg: 2.75rem;
+    --forte-control-px-sm: var(--forte-space-3);
+    --forte-control-px-md: var(--forte-space-4);
+    --forte-control-px-lg: var(--forte-space-5);
+    --forte-control-gap: var(--forte-space-2);
+    --forte-surface-p: var(--forte-space-5);
+    --forte-list-item-py: var(--forte-space-2);
+  }
+
+  /* Radius presets. Discrete literals rather than a calc() multiplier: an
+   * unregistered property containing var() freezes at its declaring element,
+   * so `calc(8px * var(--forte-radius-factor))` on :root would never re-derive
+   * inside a scoped subtree. There are only three presets — literals are both
+   * simpler and correct.
+   *
+   * Each preset restates the WHOLE scale, the way every state block in
+   * motion.css does, so a preset is a complete statement rather than a patch
+   * on whatever it inherited. `none` zeroes the scale itself, so a nested
+   * `soft` that only re-pointed `--forte-radius-control` at `--forte-radius-5`
+   * would resolve it against its ancestor's zero and stay square. */
+  /* `0px` and not `0`, and the unit is load-bearing. A bare `0` in a custom
+   * property is a <number>, and a math function may not mix a number with a
+   * length: `min(var(--forte-radius-surface), 12px)` becomes invalid at
+   * computed-value time under this preset, taking every value derived from it
+   * down with it. On `border-radius` itself the two are identical, so the
+   * breakage only ever showed up one derivation later — which is exactly the
+   * kind of silent var() failure that is hard to find. */
+  [data-forte-radius="none"] {
+    --forte-radius-1: 0px;
+    --forte-radius-2: 0px;
+    --forte-radius-3: 0px;
+    --forte-radius-4: 0px;
+    --forte-radius-5: 0px;
+    --forte-radius-6: 0px;
+    --forte-radius-full: 0px;
+    --forte-radius-control: 0px;
+    --forte-radius-surface: 0px;
+    --forte-radius-pill: 0px;
+  }
+
+  [data-forte-radius="soft"] {
+    --forte-radius-1: 0.125rem;
+    --forte-radius-2: 0.25rem;
+    --forte-radius-3: 0.375rem;
+    --forte-radius-4: 0.5rem;
+    --forte-radius-5: 0.75rem;
+    --forte-radius-6: 1rem;
+    --forte-radius-full: 9999px;
+    --forte-radius-control: var(--forte-radius-5);
+    --forte-radius-surface: var(--forte-radius-6);
+    --forte-radius-pill: var(--forte-radius-full);
+  }
+
+  [data-forte-radius="pill"] {
+    --forte-radius-1: 0.125rem;
+    --forte-radius-2: 0.25rem;
+    --forte-radius-3: 0.375rem;
+    --forte-radius-4: 0.5rem;
+    --forte-radius-5: 0.75rem;
+    --forte-radius-6: 1rem;
+    --forte-radius-full: 9999px;
+    --forte-radius-control: var(--forte-radius-full);
+    --forte-radius-surface: var(--forte-radius-6);
+    --forte-radius-pill: var(--forte-radius-full);
+  }
+
+  /* Density presets. `compact` `sm` lands at exactly 24px — the SC 2.5.8
+   * floor. Do not add a denser preset. */
+  [data-forte-density="compact"] {
+    --forte-control-h-sm: 1.5rem;
+    --forte-control-h-md: 1.875rem;
+    --forte-control-h-lg: 2.25rem;
+    --forte-control-px-sm: var(--forte-space-2);
+    --forte-control-px-md: var(--forte-space-3);
+    --forte-control-px-lg: var(--forte-space-4);
+    --forte-control-gap: var(--forte-space-1);
+    --forte-surface-p: var(--forte-space-4);
+    --forte-list-item-py: var(--forte-space-1);
+  }
+
+  [data-forte-density="spacious"] {
+    --forte-control-h-sm: 2.25rem;
+    --forte-control-h-md: 2.75rem;
+    --forte-control-h-lg: 3.25rem;
+    --forte-control-px-sm: var(--forte-space-4);
+    --forte-control-px-md: var(--forte-space-5);
+    --forte-control-px-lg: var(--forte-space-6);
+    --forte-control-gap: var(--forte-space-3);
+    --forte-surface-p: var(--forte-space-6);
+    --forte-list-item-py: var(--forte-space-3);
+  }
+}