actual-css 0.1.0

package/src/css/theme.css

@@ -0,0 +1,186 @@
+:root {
+  color-scheme: light dark;
+}
+
+[data-theme="light"] {
+  color-scheme: light;
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+/* Dark mode is progressive enhancement via light-dark(). Older browsers get
+   the light fallback rather than a partially dark native color scheme over
+   light tokens. */
+@supports not (color: light-dark(red, blue)) {
+  :root,
+  [data-theme="light"],
+  [data-theme="dark"] {
+    color-scheme: light;
+  }
+}
+
+/* Default palette — "ink & terra": aubergine primary, terracotta secondary,
+   pigment-toned statuses (sage, ochre, brick) tuned to equal perceived weight.
+   The neutral ramp (text, borders, subtle surfaces) is tinted toward the
+   primary hue (~260) so the whole page carries the identity, quietly. */
+
+/* Light fallback — also the default on browsers without light-dark() support. */
+:root,
+[data-theme="light"] {
+  /* Intent colors */
+  --primary: hsl(268 32% 33%);
+  --primary-fg: hsl(0 0% 98%);
+
+  --secondary: hsl(16 38% 38%);
+  --secondary-fg: hsl(0 0% 98%);
+
+  --success: hsl(150 40% 31%);
+  --success-fg: hsl(0 0% 98%);
+
+  --warning: hsl(36 68% 34%);
+  --warning-fg: hsl(0 0% 98%);
+
+  --danger: hsl(5 58% 43%);
+  --danger-fg: hsl(0 0% 98%);
+
+  --neutral: hsl(258 7% 43%);
+  --neutral-fg: hsl(0 0% 98%);
+
+  /* Surfaces */
+  --surface: hsl(0 0% 100%);
+  --surface-raised: hsl(0 0% 100%);
+  --surface-subtle: hsl(262 24% 96%);
+  --surface-solid: hsl(261 16% 13%);
+
+  /* Text */
+  --text: hsl(261 20% 13%);
+  --text-muted: hsl(259 9% 42%);
+  --text-subtle: hsl(258 7% 57%);
+
+  /* Lines and focus */
+  --border: hsl(260 15% 88%);
+  --focus: var(--primary);
+  /* Pre-color-mix fallback only — superseded below by a derivation from
+     --focus so overriding --primary/--focus never leaves a stale ring. */
+  --focus-ring: hsl(268 32% 33% / 0.22);
+  --focus-ring-shadow: 0 0 0 3px var(--focus-ring);
+  --hover-overlay: hsl(260 20% 10% / 0.04);
+
+  /* Radius scale — themes may override the whole scale (e.g. [data-theme="square"]) */
+  --radius: 0.5rem;
+  --radius-sm: 0.25rem;
+  --radius-lg: 0.75rem;
+
+  /* Shadow color — consumed by --shadow / --shadow-popout in tokens.css */
+  --shadow-color: hsl(260 25% 10%);
+
+  /* Heading and selection — derived from theme color tokens */
+  --heading: var(--text);
+  --selection-bg: var(--primary);
+  --selection-fg: var(--primary-fg);
+
+  /* hgroup internal gap */
+  --hgroup-gap: 0.25em;
+}
+
+/* Tone subsystem — fixed-backdrop foreground for components placed over media
+   or other surfaces outside the theme token stack. Use data-theme islands for
+   full dark/light subtree inversion. */
+[data-tone="dark"] {
+  --tone-fg: white;
+}
+
+[data-tone="light"] {
+  --tone-fg: var(--text);
+}
+
+/* Focus ring derivation — color-mix tier. Runs whether or not light-dark()
+   is also supported, so it covers the color-mix-without-light-dark browser
+   tier on its own; the light-dark block below refines it further with the
+   light/dark alpha split once both features are available. Deriving from
+   --focus (not a literal) means overriding --primary/--focus, in the
+   default theme or any custom one, keeps the ring in sync automatically. */
+@supports (color: color-mix(in oklch, red, white)) {
+  :root,
+  [data-theme="light"],
+  [data-theme="dark"] {
+    --focus-ring: color-mix(in oklch, var(--focus) 22%, transparent);
+  }
+}
+
+/* Auto dark mode via light-dark(). Resolves based on the element's color-scheme:
+    :root (light dark) follows the OS, [data-theme="light"] forces light,
+    [data-theme="dark"] forces dark by overriding color-scheme.
+    Dark pastels sit a little lower and more chromatic (L 70-76, sat 38-45)
+    than usual so the palette stays warm rather than washed gray. */
+@supports (color: light-dark(red, blue)) {
+  :root,
+  [data-theme="light"] {
+    --primary: light-dark(hsl(268 32% 33%), hsl(268 42% 76%));
+    --primary-fg: light-dark(hsl(0 0% 98%), hsl(268 30% 12%));
+
+    --secondary: light-dark(hsl(16 38% 38%), hsl(18 45% 72%));
+    --secondary-fg: light-dark(hsl(0 0% 98%), hsl(18 32% 11%));
+
+    --success: light-dark(hsl(150 40% 31%), hsl(150 38% 62%));
+    --success-fg: light-dark(hsl(0 0% 98%), hsl(150 35% 8%));
+
+    --warning: light-dark(hsl(36 68% 34%), hsl(40 62% 64%));
+    --warning-fg: light-dark(hsl(0 0% 98%), hsl(38 35% 10%));
+
+    --danger: light-dark(hsl(5 58% 43%), hsl(4 60% 70%));
+    --danger-fg: light-dark(hsl(0 0% 98%), hsl(4 35% 10%));
+
+    --neutral: light-dark(hsl(258 7% 43%), hsl(258 10% 72%));
+    --neutral-fg: light-dark(hsl(0 0% 98%), hsl(260 18% 10%));
+
+    --surface: light-dark(hsl(0 0% 100%), hsl(263 17% 9%));
+    --surface-raised: light-dark(hsl(0 0% 100%), hsl(263 15% 12%));
+    --surface-subtle: light-dark(hsl(262 24% 96%), hsl(263 13% 16%));
+    --surface-solid: light-dark(hsl(261 16% 13%), hsl(0 0% 96%));
+
+    --text: light-dark(hsl(261 20% 13%), hsl(260 12% 95%));
+    --text-muted: light-dark(hsl(259 9% 42%), hsl(259 9% 67%));
+    --text-subtle: light-dark(hsl(258 7% 57%), hsl(258 7% 54%));
+
+    --border: light-dark(hsl(260 15% 88%), hsl(262 12% 24%));
+    --focus-ring: light-dark(hsl(268 32% 33% / 0.22), hsl(268 42% 76% / 0.28));
+    --hover-overlay: light-dark(hsl(260 20% 10% / 0.04), hsl(0 0% 100% / 0.06));
+    --shadow-color: light-dark(hsl(260 25% 10%), hsl(262 40% 2%));
+  }
+}
+
+@supports (color: color-mix(in oklch, red, white)) and (color: light-dark(red, blue)) {
+  :root,
+  [data-theme="light"] {
+    --focus-ring: light-dark(
+      color-mix(in oklch, var(--focus) 22%, transparent),
+      color-mix(in oklch, var(--focus) 28%, transparent)
+    );
+  }
+}
+
+@media (forced-colors: active) {
+  :root,
+  [data-theme="light"],
+  [data-theme="dark"] {
+    --focus-outline: calc(var(--border-width) * 2) solid Highlight;
+    --focus-ring-shadow: none;
+
+    --backdrop-fill: Canvas;
+  }
+}
+
+@media (prefers-contrast: more) {
+  :root,
+  [data-theme="light"],
+  [data-theme="dark"] {
+    --border-width: 2px;
+    --focus-outline-offset: 3px;
+    --focus-ring-shadow: 0 0 0 4px var(--focus-ring);
+    --text-muted: var(--text);
+    --text-subtle: var(--text);
+  }
+}

package/src/css/themes/corporate.css

@@ -0,0 +1,60 @@
+[data-theme="corporate"] {
+  color-scheme: light dark;
+
+  --primary: hsl(214 82% 44%);
+  --primary-fg: white;
+  --secondary: hsl(250 45% 48%);
+  --secondary-fg: white;
+  --success: hsl(152 62% 32%);
+  --success-fg: white;
+  --warning: hsl(40 94% 48%);
+  --warning-fg: hsl(35 30% 12%);
+  --danger: hsl(355 70% 50%);
+  --danger-fg: white;
+  --neutral: hsl(220 12% 42%);
+  --neutral-fg: white;
+
+  --surface: hsl(0 0% 100%);
+  --surface-raised: hsl(214 30% 98%);
+  --surface-subtle: hsl(214 35% 95%);
+  --surface-solid: hsl(220 24% 12%);
+
+  --text: hsl(220 24% 12%);
+  --text-muted: hsl(220 10% 42%);
+  --text-subtle: hsl(220 8% 55%);
+
+  --border: hsl(220 16% 86%);
+  --focus: var(--primary);
+  --focus-ring: hsl(214 82% 44% / 0.22);
+}
+
+@supports (color: light-dark(red, blue)) {
+  [data-theme="corporate"] {
+    --primary: light-dark(hsl(214 82% 44%), hsl(214 75% 80%));
+    --primary-fg: light-dark(white, hsl(214 30% 12%));
+    --secondary: light-dark(hsl(250 45% 48%), hsl(250 53% 80%));
+    --secondary-fg: light-dark(white, hsl(250 30% 12%));
+    --success: light-dark(hsl(152 62% 32%), hsl(152 70% 80%));
+    --success-fg: light-dark(white, hsl(152 30% 12%));
+    --warning: light-dark(hsl(40 94% 48%), hsl(40 75% 80%));
+    --warning-fg: light-dark(hsl(35 30% 12%), hsl(40 30% 12%));
+    --danger: light-dark(hsl(355 70% 50%), hsl(355 75% 80%));
+    --danger-fg: light-dark(white, hsl(355 30% 12%));
+    --neutral: light-dark(hsl(220 12% 42%), hsl(220 20% 80%));
+    --neutral-fg: light-dark(white, hsl(220 30% 12%));
+
+    --surface: light-dark(hsl(0 0% 100%), hsl(214 18% 8%));
+    --surface-raised: light-dark(hsl(214 30% 98%), hsl(214 16% 11%));
+    --surface-subtle: light-dark(hsl(214 35% 95%), hsl(214 14% 16%));
+    --surface-solid: light-dark(hsl(220 24% 12%), hsl(0 0% 96%));
+
+    --text: light-dark(hsl(220 24% 12%), hsl(0 0% 96%));
+    --text-muted: light-dark(hsl(220 10% 42%), hsl(214 8% 68%));
+    --text-subtle: light-dark(hsl(220 8% 55%), hsl(214 7% 55%));
+
+    --border: light-dark(hsl(220 16% 86%), hsl(214 12% 24%));
+    --focus-ring: light-dark(hsl(214 82% 44% / 0.22), hsl(214 75% 80% / 0.28));
+    --hover-overlay: light-dark(hsl(220 30% 10% / 0.04), hsl(0 0% 100% / 0.06));
+    --shadow-color: light-dark(hsl(220 30% 10%), hsl(0 0% 0%));
+  }
+}

package/src/css/themes/cyberpunk.css

@@ -0,0 +1,60 @@
+/* Cyberpunk — light-only stress-test theme (single block, color-scheme: light,
+ * same shape as dark.css). Illustrative rather than production: it exists to
+ * prove the token contract survives an extreme spec — a saturated yellow
+ * canvas, near-black text and borders, dark-on-bright intent pairs, zero
+ * radius, 2px strokes, and hard offset shadows — without touching a single
+ * component rule. */
+[data-theme="cyberpunk"] {
+  color-scheme: light;
+
+  /* Bright intents carry dark ink. Each -fg pair is hand-tuned: danger keeps
+     a light fg because saturated red is too dark for near-black text, and
+     neutral inverts the canvas (black chip, yellow text). */
+  --primary: hsl(330 100% 60%);
+  --primary-fg: hsl(330 100% 10%);
+  --secondary: hsl(187 100% 42%);
+  --secondary-fg: hsl(187 100% 8%);
+  --success: hsl(150 100% 35%);
+  --success-fg: hsl(150 100% 6%);
+  --warning: hsl(25 95% 50%);
+  --warning-fg: hsl(25 100% 8%);
+  --danger: hsl(0 85% 44%);
+  --danger-fg: hsl(0 0% 98%);
+  --neutral: hsl(56 30% 8%);
+  --neutral-fg: hsl(56 100% 55%);
+
+  /* Yellow canvas. Raised surfaces go paler instead of shadowed — elevation
+     is carried by the hard offset shadow below. */
+  --surface: hsl(56 100% 50%);
+  --surface-raised: hsl(54 100% 64%);
+  --surface-subtle: hsl(53 100% 80%);
+  --surface-solid: hsl(56 30% 8%);
+
+  --text: hsl(56 60% 6%);
+  --text-muted: hsl(56 25% 22%);
+  --text-subtle: hsl(56 14% 34%);
+
+  --border: hsl(56 60% 6%);
+  --focus: hsl(330 100% 42%);
+  --focus-ring: hsl(330 100% 42% / 0.3);
+  --hover-overlay: hsl(56 100% 8% / 0.08);
+
+  /* Structure: sharp corners, thick strokes, print-like offset shadows.
+     Overriding --shadow directly bypasses the color-mix shadow recipe in
+     tokens.css (themes load later, so these flat values win). */
+  --radius: 0;
+  --radius-sm: 0;
+  --radius-lg: 0;
+  --border-width: 2px;
+  --shadow: 0.25rem 0.25rem 0 hsl(56 60% 6%);
+  --shadow-popout: 0.25rem 0.25rem 0 hsl(56 60% 6%);
+  --shadow-color: hsl(56 60% 6%);
+
+  /* Soft surfaces mix against a saturated yellow, so the default recipe reads
+     as more yellow — pull more intent in for tints that stay legible. */
+  --soft-bg-mix: 78%;
+  --soft-border-mix: 40%;
+
+  --selection-bg: hsl(56 60% 6%);
+  --selection-fg: hsl(56 100% 50%);
+}

package/src/css/themes/dark.css

@@ -0,0 +1,32 @@
+/* Canonical dark theme. Single-block shape (color-scheme: dark only) — it
+ * does not adapt to prefers-color-scheme; opt in via [data-theme="dark"].
+ * dim.css is a darker variant with lifted surface tones. */
+[data-theme="dark"] {
+  color-scheme: dark;
+
+  --primary: hsl(220 90% 66%);
+  --primary-fg: hsl(222 30% 8%);
+  --secondary: hsl(270 65% 70%);
+  --secondary-fg: hsl(270 30% 10%);
+  --success: hsl(145 55% 54%);
+  --success-fg: hsl(145 40% 8%);
+  --warning: hsl(38 92% 62%);
+  --warning-fg: hsl(35 35% 10%);
+  --danger: hsl(0 75% 66%);
+  --danger-fg: hsl(0 35% 10%);
+  --neutral: hsl(220 10% 72%);
+  --neutral-fg: hsl(222 24% 8%);
+
+  --surface: hsl(222 24% 8%);
+  --surface-raised: hsl(222 22% 11%);
+  --surface-subtle: hsl(222 18% 15%);
+  --surface-solid: hsl(0 0% 96%);
+
+  --text: hsl(0 0% 96%);
+  --text-muted: hsl(220 10% 68%);
+  --text-subtle: hsl(220 8% 55%);
+  --border: hsl(222 14% 24%);
+  --focus: var(--primary);
+  --focus-ring: hsl(220 90% 66% / 0.28);
+  --hover-overlay: hsl(0 0% 100% / 0.06);
+}

package/src/css/themes/dim.css

@@ -0,0 +1,33 @@
+/* Dim — a dark theme variant that lifts the surface tones up a few percentage
+ * points. Same shape as dark.css (dark-only, single block) so authors can drop
+ * it in when the canonical dark is too dense. Demonstrates how a theme can
+ * recolor the same token set without changing structure. */
+[data-theme="dim"] {
+  color-scheme: dark;
+
+  --primary: hsl(210 92% 70%);
+  --primary-fg: hsl(218 28% 10%);
+  --secondary: hsl(270 70% 74%);
+  --secondary-fg: hsl(270 30% 10%);
+  --success: hsl(150 56% 58%);
+  --success-fg: hsl(150 38% 9%);
+  --warning: hsl(40 92% 64%);
+  --warning-fg: hsl(35 35% 10%);
+  --danger: hsl(0 74% 68%);
+  --danger-fg: hsl(0 35% 10%);
+  --neutral: hsl(220 10% 72%);
+  --neutral-fg: hsl(220 24% 10%);
+
+  --surface: hsl(220 20% 13%);
+  --surface-raised: hsl(220 18% 16%);
+  --surface-subtle: hsl(220 16% 20%);
+  --surface-solid: hsl(0 0% 96%);
+
+  --text: hsl(220 18% 94%);
+  --text-muted: hsl(220 10% 70%);
+  --text-subtle: hsl(220 8% 58%);
+  --border: hsl(220 12% 28%);
+  --focus: var(--primary);
+  --focus-ring: hsl(210 92% 70% / 0.28);
+  --hover-overlay: hsl(0 0% 100% / 0.06);
+}

package/src/css/themes/edge.css

@@ -0,0 +1,143 @@
+/* Edge - paired light/dark theme that demonstrates component-local
+ * border-accent tokens. Buttons become surface controls with an
+ * intent-colored lower edge (.solid remains available when an action needs a
+ * filled treatment), text controls (input/textarea/select) pick up the same
+ * lower-edge accent via --control-border-block-end-*, alerts get an
+ * intent-colored leading flag via --alert-border-inline-start-*, and text
+ * controls and buttons both get a thinner, tighter focus outline than the
+ * shared recipe. */
+[data-theme="edge"] {
+  color-scheme: light dark;
+
+  --primary: hsl(224 72% 42%);
+  --primary-fg: white;
+  --secondary: hsl(166 54% 30%);
+  --secondary-fg: white;
+  --success: hsl(145 46% 32%);
+  --success-fg: white;
+  --warning: hsl(36 80% 38%);
+  --warning-fg: hsl(34 35% 10%);
+  --danger: hsl(354 62% 46%);
+  --danger-fg: white;
+  --neutral: hsl(228 9% 42%);
+  --neutral-fg: white;
+
+  --surface: hsl(40 20% 99%);
+  --surface-raised: hsl(0 0% 100%);
+  --surface-subtle: hsl(220 24% 95%);
+  --surface-solid: hsl(228 26% 12%);
+
+  --text: hsl(228 24% 12%);
+  --text-muted: hsl(228 9% 42%);
+  --text-subtle: hsl(228 7% 56%);
+
+  --border: hsl(220 14% 86%);
+  --focus: var(--primary);
+  --focus-ring: hsl(224 72% 42% / 0.22);
+  --hover-overlay: hsl(228 30% 10% / 0.04);
+
+  --radius: 0.375rem;
+  --radius-sm: 0.25rem;
+  --radius-lg: 0.625rem;
+
+  --btn-default-bg: var(--surface-subtle);
+  --btn-default-border: transparent;
+  --btn-border-color: transparent;
+  --btn-border-block-end-width: 2px;
+
+  --control-border-block-end-color: var(--primary);
+  --control-border-block-end-width: 2px;
+}
+
+/* Intent-dependent button tokens must resolve on the button itself. If these
+   live on [data-theme], var(--intent) computes before local intent classes
+   apply and every button keeps the same primary edge. */
+[data-theme="edge"] .btn:not(.link) {
+  --btn-border-block-end-color: var(--intent, var(--primary));
+}
+
+[data-theme="edge"] .btn:not(:where(.solid, .soft, .outline, .ghost, .link)) {
+  --btn-default-fg: var(--intent, var(--text));
+  --ui-hover-bg: var(--surface-raised);
+}
+
+@media (hover: hover) {
+  [data-theme="edge"]
+    .btn:not(
+      :where(:disabled, [aria-disabled="true"], .solid, .soft, .outline, .ghost, .link)
+    ):hover {
+    box-shadow: none;
+  }
+}
+
+/* Intent-dependent alert token, same reasoning as the button rule above:
+   must resolve on the alert itself so local intent classes (.danger, etc.)
+   win over the bare --primary fallback. */
+[data-theme="edge"] .alert {
+  --alert-border-inline-start-color: var(--intent, var(--primary));
+  --alert-border-inline-start-width: 4px;
+}
+
+/* Focus recipe override — the base recipe (control.css) flips --control-border
+   to --focus on top of the outline + ring, which triples up with the lower-edge
+   accent already visible here. Edge drops the border-color flip and thickens
+   the accent edge instead; the ring stays untouched. */
+[data-theme="edge"] :is(.input, .textarea, .select):focus-visible {
+  --control-border: var(--border);
+  --control-border-block-end-width: 3px;
+}
+
+/* The shared 2px-solid/2px-offset outline reads as a second ring on top of
+   the accent edge (inputs) or the box-shadow ring (buttons). Edge thins both
+   to the border width and tightens the offset so the outline hugs the
+   control instead of floating a second halo around it. Gated outside
+   forced-colors so that mode's Highlight-colored --focus-outline (theme.css)
+   stays in charge for inputs — a direct property on the element would
+   otherwise out-specificity that fallback regardless of the media condition
+   it was declared under. Buttons don't consume --focus-outline (they compute
+   their own outline so it can use --btn-focus-color's intent awareness), so
+   they get their own local width token, --btn-focus-outline-width. */
+@media not (forced-colors: active) {
+  [data-theme="edge"] :is(.input, .textarea, .select, .btn) {
+    --focus-outline-offset: 1px;
+  }
+
+  [data-theme="edge"] :is(.input, .textarea, .select) {
+    --focus-outline: var(--border-width) solid var(--focus);
+  }
+
+  [data-theme="edge"] .btn {
+    --btn-focus-outline-width: var(--border-width);
+  }
+}
+
+@supports (color: light-dark(red, blue)) {
+  [data-theme="edge"] {
+    --primary: light-dark(hsl(224 72% 42%), hsl(220 80% 76%));
+    --primary-fg: light-dark(white, hsl(224 35% 10%));
+    --secondary: light-dark(hsl(166 54% 30%), hsl(166 58% 70%));
+    --secondary-fg: light-dark(white, hsl(166 35% 9%));
+    --success: light-dark(hsl(145 46% 32%), hsl(145 48% 64%));
+    --success-fg: light-dark(white, hsl(145 35% 8%));
+    --warning: light-dark(hsl(36 80% 38%), hsl(40 72% 66%));
+    --warning-fg: light-dark(hsl(34 35% 10%), hsl(38 35% 10%));
+    --danger: light-dark(hsl(354 62% 46%), hsl(354 66% 72%));
+    --danger-fg: light-dark(white, hsl(354 35% 10%));
+    --neutral: light-dark(hsl(228 9% 42%), hsl(228 12% 72%));
+    --neutral-fg: light-dark(white, hsl(228 24% 10%));
+
+    --surface: light-dark(hsl(40 20% 99%), hsl(228 20% 8%));
+    --surface-raised: light-dark(hsl(0 0% 100%), hsl(228 17% 11%));
+    --surface-subtle: light-dark(hsl(220 24% 95%), hsl(228 14% 16%));
+    --surface-solid: light-dark(hsl(228 26% 12%), hsl(0 0% 96%));
+
+    --text: light-dark(hsl(228 24% 12%), hsl(0 0% 96%));
+    --text-muted: light-dark(hsl(228 9% 42%), hsl(228 8% 68%));
+    --text-subtle: light-dark(hsl(228 7% 56%), hsl(228 7% 55%));
+
+    --border: light-dark(hsl(220 14% 86%), hsl(228 12% 24%));
+    --focus-ring: light-dark(hsl(224 72% 42% / 0.22), hsl(220 80% 76% / 0.28));
+    --hover-overlay: light-dark(hsl(228 30% 10% / 0.04), hsl(0 0% 100% / 0.06));
+    --shadow-color: light-dark(hsl(228 30% 10%), hsl(0 0% 0%));
+  }
+}

package/src/css/themes/forest.css

@@ -0,0 +1,65 @@
+[data-theme="forest"] {
+  color-scheme: light dark;
+
+  --primary: hsl(175 48% 26%);
+  --primary-fg: white;
+  --secondary: hsl(82 42% 34%);
+  --secondary-fg: white;
+  --success: hsl(148 58% 32%);
+  --success-fg: white;
+  --warning: hsl(42 88% 48%);
+  --warning-fg: hsl(35 35% 12%);
+  --danger: hsl(4 62% 48%);
+  --danger-fg: white;
+  --neutral: hsl(120 10% 34%);
+  --neutral-fg: white;
+
+  --surface: hsl(48 36% 96%);
+  --surface-raised: hsl(45 36% 98%);
+  --surface-subtle: hsl(112 26% 91%);
+  --surface-solid: hsl(130 22% 15%);
+
+  --text: hsl(130 20% 14%);
+  --text-muted: hsl(125 10% 38%);
+  --text-subtle: hsl(125 8% 50%);
+
+  --border: hsl(105 18% 78%);
+  --focus: var(--primary);
+  --focus-ring: hsl(175 48% 26% / 0.22);
+
+  /* Organic rounding — demonstrates scaling the radius tokens up. */
+  --radius: 0.75rem;
+  --radius-sm: 0.5rem;
+  --radius-lg: 1.25rem;
+}
+
+@supports (color: light-dark(red, blue)) {
+  [data-theme="forest"] {
+    --primary: light-dark(hsl(175 48% 26%), hsl(175 45% 76%));
+    --primary-fg: light-dark(white, hsl(175 30% 12%));
+    --secondary: light-dark(hsl(82 42% 34%), hsl(82 50% 80%));
+    --secondary-fg: light-dark(white, hsl(82 30% 12%));
+    --success: light-dark(hsl(148 58% 32%), hsl(148 66% 80%));
+    --success-fg: light-dark(white, hsl(148 30% 12%));
+    --warning: light-dark(hsl(42 88% 48%), hsl(42 75% 80%));
+    --warning-fg: light-dark(hsl(35 35% 12%), hsl(42 30% 12%));
+    --danger: light-dark(hsl(4 62% 48%), hsl(4 70% 80%));
+    --danger-fg: light-dark(white, hsl(4 30% 12%));
+    --neutral: light-dark(hsl(120 10% 34%), hsl(120 18% 80%));
+    --neutral-fg: light-dark(white, hsl(120 30% 12%));
+
+    --surface: light-dark(hsl(48 36% 96%), hsl(130 18% 8%));
+    --surface-raised: light-dark(hsl(45 36% 98%), hsl(130 16% 11%));
+    --surface-subtle: light-dark(hsl(112 26% 91%), hsl(130 14% 16%));
+    --surface-solid: light-dark(hsl(130 22% 15%), hsl(0 0% 96%));
+
+    --text: light-dark(hsl(130 20% 14%), hsl(0 0% 96%));
+    --text-muted: light-dark(hsl(125 10% 38%), hsl(130 8% 68%));
+    --text-subtle: light-dark(hsl(125 8% 50%), hsl(130 7% 55%));
+
+    --border: light-dark(hsl(105 18% 78%), hsl(130 12% 24%));
+    --focus-ring: light-dark(hsl(175 48% 26% / 0.22), hsl(175 45% 76% / 0.28));
+    --hover-overlay: light-dark(hsl(220 30% 10% / 0.04), hsl(0 0% 100% / 0.06));
+    --shadow-color: light-dark(hsl(220 30% 10%), hsl(0 0% 0%));
+  }
+}

package/src/css/themes/gradient.css

@@ -0,0 +1,97 @@
+/* Gradient — paired light/dark theme, palette inspired by Bootstrap 4's
+ * defaults. Demonstrates that a solid button can be given the classic
+ * Bootstrap 4 gradient treatment (a 15%-white-lightened top fading to the
+ * flat intent color) purely through token overrides, without touching
+ * button.css. Only bare/.solid buttons are targeted — .soft/.outline/.ghost/
+ * .link stay flat, matching Bootstrap 4's own gradient mixin, which only
+ * wraps its filled button variant. */
+[data-theme="gradient"] {
+  color-scheme: light dark;
+
+  --primary: hsl(211 100% 50%);
+  --primary-fg: white;
+  --secondary: hsl(208 7% 46%);
+  --secondary-fg: white;
+  --success: hsl(134 61% 41%);
+  --success-fg: white;
+  --warning: hsl(45 100% 51%);
+  --warning-fg: hsl(45 100% 10%);
+  --danger: hsl(354 70% 54%);
+  --danger-fg: white;
+  --neutral: hsl(210 10% 23%);
+  --neutral-fg: white;
+
+  --surface: hsl(0 0% 100%);
+  --surface-raised: hsl(0 0% 100%);
+  --surface-subtle: hsl(210 17% 95%);
+  --surface-solid: hsl(210 10% 15%);
+
+  --text: hsl(210 11% 15%);
+  --text-muted: hsl(208 7% 46%);
+  --text-subtle: hsl(210 9% 62%);
+
+  --border: hsl(210 14% 89%);
+  --focus: var(--primary);
+  --focus-ring: hsl(211 100% 50% / 0.25);
+  --hover-overlay: hsl(210 30% 10% / 0.04);
+
+  --radius: 0.25rem;
+  --radius-sm: 0.2rem;
+  --radius-lg: 0.3rem;
+}
+
+@supports (color: light-dark(red, blue)) {
+  [data-theme="gradient"] {
+    --primary: light-dark(hsl(211 100% 50%), hsl(211 90% 72%));
+    --primary-fg: light-dark(white, hsl(211 40% 10%));
+    --secondary: light-dark(hsl(208 7% 46%), hsl(208 10% 72%));
+    --secondary-fg: light-dark(white, hsl(208 15% 10%));
+    --success: light-dark(hsl(134 61% 41%), hsl(134 55% 65%));
+    --success-fg: light-dark(white, hsl(134 40% 8%));
+    --warning: light-dark(hsl(45 100% 51%), hsl(45 90% 70%));
+    --warning-fg: light-dark(hsl(45 100% 10%), hsl(45 100% 10%));
+    --danger: light-dark(hsl(354 70% 54%), hsl(354 75% 74%));
+    --danger-fg: light-dark(white, hsl(354 40% 10%));
+    --neutral: light-dark(hsl(210 10% 23%), hsl(210 12% 75%));
+    --neutral-fg: light-dark(white, hsl(210 15% 10%));
+
+    --surface: light-dark(hsl(0 0% 100%), hsl(210 15% 8%));
+    --surface-raised: light-dark(hsl(0 0% 100%), hsl(210 13% 11%));
+    --surface-subtle: light-dark(hsl(210 17% 95%), hsl(210 12% 16%));
+    --surface-solid: light-dark(hsl(210 10% 15%), hsl(0 0% 96%));
+
+    --text: light-dark(hsl(210 11% 15%), hsl(0 0% 96%));
+    --text-muted: light-dark(hsl(208 7% 46%), hsl(210 8% 68%));
+    --text-subtle: light-dark(hsl(210 9% 62%), hsl(210 7% 55%));
+
+    --border: light-dark(hsl(210 14% 89%), hsl(210 12% 24%));
+    --focus-ring: light-dark(hsl(211 100% 50% / 0.25), hsl(211 90% 72% / 0.3));
+    --hover-overlay: light-dark(hsl(210 30% 10% / 0.04), hsl(0 0% 100% / 0.06));
+    --shadow-color: light-dark(hsl(210 30% 10%), hsl(0 0% 0%));
+  }
+}
+
+@supports (color: color-mix(in oklch, red, white)) {
+  /* Bootstrap 4 gradient recipe (linear-gradient(180deg, mix(white, $color,
+     15%), $color)) ported to the token contract. --ui-bg covers explicit
+     .solid; --btn-default-bg covers the bare/no-variant default. Bootstrap 4
+     still darkens the button on hover even with gradients enabled, so
+     --ui-hover-bg reruns the same recipe over a darkened base color instead
+     of reusing --ui-bg verbatim — the resting gradient shape survives, just
+     shifted darker, same as the flat color-mix darken variants.css uses for
+     hover on ungradiented themes. */
+  [data-theme="gradient"] .btn:not(:where(.soft, .outline, .ghost, .link)) {
+    --gradient-hover-color: color-mix(in oklch, var(--intent, var(--neutral)) 88%, black);
+    --ui-bg: linear-gradient(
+      180deg,
+      color-mix(in oklch, white 15%, var(--intent, var(--neutral))),
+      var(--intent, var(--neutral))
+    );
+    --btn-default-bg: var(--ui-bg);
+    --ui-hover-bg: linear-gradient(
+      180deg,
+      color-mix(in oklch, white 15%, var(--gradient-hover-color)),
+      var(--gradient-hover-color)
+    );
+  }
+}