actual-css 0.1.0

package/src/css/themes/index.css

@@ -0,0 +1,43 @@
+/* Opt-in theme bundle. Importing this file pulls in every theme below, each
+ * gated by [data-theme="…"]. The light baseline is :root in src/css/theme.css —
+ * there is no light.css here.
+ *
+ * The themes are illustrative: each one demonstrates a different set of knobs
+ * the token contract exposes, beyond recoloring.
+ *
+ *   dark       — canonical dark (single block, color-scheme: dark only)
+ *   dim        — dark variant with lifted surface tones
+ *   corporate  — reference paired light/dark recolor via light-dark()
+ *   forest     — paired recolor + scaled-up radius tokens
+ *   ocean      — reference paired recolor
+ *   spruce     — deep spruce-green primary + copper secondary
+ *   petrol     — desaturated petrol-blue primary + apricot secondary
+ *   sunset     — paired recolor + selection and shadow-color theming
+ *   lavender   — paired recolor + soft-variant tuning, tinted shadows
+ *   mono       — grayscale palette, colored status intents only
+ *   square     — paired recolor + full radius scale forced to 0
+ *   edge       — paired recolor + intent-colored button lower edge
+ *   cyberpunk  — light-only stress test: yellow canvas, dark-on-bright
+ *                intents, 2px borders, hard offset shadows
+ *   neon       — dark-only + wide-gamut P3 upgrade via oklch(), glow
+ *                shadows, soft-variant tuning
+ *   gradient   — paired recolor + Bootstrap 4 style gradient on solid buttons
+ *                via component-local button tokens
+ *
+ * Single-block themes (dark, dim, cyberpunk, neon) pin one color-scheme and
+ * cannot adapt to prefers-color-scheme; the paired ones follow the OS. */
+@import "./dark.css";
+@import "./dim.css";
+@import "./corporate.css";
+@import "./forest.css";
+@import "./ocean.css";
+@import "./spruce.css";
+@import "./petrol.css";
+@import "./sunset.css";
+@import "./lavender.css";
+@import "./mono.css";
+@import "./square.css";
+@import "./edge.css";
+@import "./cyberpunk.css";
+@import "./neon.css";
+@import "./gradient.css";

package/src/css/themes/lavender.css

@@ -0,0 +1,66 @@
+[data-theme="lavender"] {
+  color-scheme: light dark;
+
+  --primary: hsl(258 70% 58%);
+  --primary-fg: white;
+  --secondary: hsl(305 45% 48%);
+  --secondary-fg: white;
+  --success: hsl(150 50% 33%);
+  --success-fg: white;
+  --warning: hsl(42 90% 52%);
+  --warning-fg: hsl(35 35% 12%);
+  --danger: hsl(350 68% 52%);
+  --danger-fg: white;
+  --neutral: hsl(260 10% 42%);
+  --neutral-fg: white;
+
+  --surface: hsl(260 45% 98%);
+  --surface-raised: hsl(0 0% 100%);
+  --surface-subtle: hsl(260 35% 94%);
+  --surface-solid: hsl(260 30% 18%);
+
+  --text: hsl(260 28% 15%);
+  --text-muted: hsl(260 12% 43%);
+  --text-subtle: hsl(260 10% 57%);
+
+  --border: hsl(260 28% 85%);
+  --focus: var(--primary);
+  --focus-ring: hsl(258 70% 58% / 0.22);
+
+  /* Pastel tuning — demonstrates the soft-variant knobs (paler tints, gentler
+     hovers) and violet-tinted shadows. */
+  --soft-bg-mix: 92%;
+  --soft-hover-alpha: 8%;
+  --shadow-color: hsl(260 45% 20%);
+}
+
+@supports (color: light-dark(red, blue)) {
+  [data-theme="lavender"] {
+    --primary: light-dark(hsl(258 70% 58%), hsl(258 75% 80%));
+    --primary-fg: light-dark(white, hsl(258 30% 12%));
+    --secondary: light-dark(hsl(305 45% 48%), hsl(305 53% 80%));
+    --secondary-fg: light-dark(white, hsl(305 30% 12%));
+    --success: light-dark(hsl(150 50% 33%), hsl(150 58% 80%));
+    --success-fg: light-dark(white, hsl(150 30% 12%));
+    --warning: light-dark(hsl(42 90% 52%), hsl(42 75% 80%));
+    --warning-fg: light-dark(hsl(35 35% 12%), hsl(42 30% 12%));
+    --danger: light-dark(hsl(350 68% 52%), hsl(350 75% 80%));
+    --danger-fg: light-dark(white, hsl(350 30% 12%));
+    --neutral: light-dark(hsl(260 10% 42%), hsl(260 18% 80%));
+    --neutral-fg: light-dark(white, hsl(260 30% 12%));
+
+    --surface: light-dark(hsl(260 45% 98%), hsl(260 18% 8%));
+    --surface-raised: light-dark(hsl(0 0% 100%), hsl(260 16% 11%));
+    --surface-subtle: light-dark(hsl(260 35% 94%), hsl(260 14% 16%));
+    --surface-solid: light-dark(hsl(260 30% 18%), hsl(0 0% 96%));
+
+    --text: light-dark(hsl(260 28% 15%), hsl(0 0% 96%));
+    --text-muted: light-dark(hsl(260 12% 43%), hsl(260 8% 68%));
+    --text-subtle: light-dark(hsl(260 10% 57%), hsl(260 7% 55%));
+
+    --border: light-dark(hsl(260 28% 85%), hsl(260 12% 24%));
+    --focus-ring: light-dark(hsl(258 70% 58% / 0.22), hsl(258 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(260 45% 20%), hsl(260 40% 2%));
+  }
+}

package/src/css/themes/mono.css

@@ -0,0 +1,60 @@
+[data-theme="mono"] {
+  color-scheme: light dark;
+
+  --primary: hsl(220 8% 18%);
+  --primary-fg: white;
+  --secondary: hsl(220 7% 34%);
+  --secondary-fg: white;
+  --success: hsl(145 42% 32%);
+  --success-fg: white;
+  --warning: hsl(40 70% 44%);
+  --warning-fg: hsl(35 35% 10%);
+  --danger: hsl(0 56% 46%);
+  --danger-fg: white;
+  --neutral: hsl(220 6% 45%);
+  --neutral-fg: white;
+
+  --surface: hsl(0 0% 99%);
+  --surface-raised: hsl(0 0% 100%);
+  --surface-subtle: hsl(220 8% 94%);
+  --surface-solid: hsl(220 8% 15%);
+
+  --text: hsl(220 8% 12%);
+  --text-muted: hsl(220 6% 42%);
+  --text-subtle: hsl(220 5% 58%);
+
+  --border: hsl(220 8% 84%);
+  --focus: var(--primary);
+  --focus-ring: hsl(220 8% 18% / 0.22);
+}
+
+@supports (color: light-dark(red, blue)) {
+  [data-theme="mono"] {
+    --primary: light-dark(hsl(220 8% 18%), hsl(220 16% 80%));
+    --primary-fg: light-dark(white, hsl(220 30% 12%));
+    --secondary: light-dark(hsl(220 7% 34%), hsl(220 15% 80%));
+    --secondary-fg: light-dark(white, hsl(220 30% 12%));
+    --success: light-dark(hsl(145 42% 32%), hsl(145 50% 80%));
+    --success-fg: light-dark(white, hsl(145 30% 12%));
+    --warning: light-dark(hsl(40 70% 44%), hsl(40 75% 80%));
+    --warning-fg: light-dark(hsl(35 35% 10%), hsl(40 30% 12%));
+    --danger: light-dark(hsl(0 56% 46%), hsl(0 64% 80%));
+    --danger-fg: light-dark(white, hsl(0 30% 12%));
+    --neutral: light-dark(hsl(220 6% 45%), hsl(220 14% 80%));
+    --neutral-fg: light-dark(white, hsl(220 30% 12%));
+
+    --surface: light-dark(hsl(0 0% 99%), hsl(0 0% 8%));
+    --surface-raised: light-dark(hsl(0 0% 100%), hsl(0 0% 11%));
+    --surface-subtle: light-dark(hsl(220 8% 94%), hsl(0 0% 16%));
+    --surface-solid: light-dark(hsl(220 8% 15%), hsl(0 0% 96%));
+
+    --text: light-dark(hsl(220 8% 12%), hsl(0 0% 96%));
+    --text-muted: light-dark(hsl(220 6% 42%), hsl(0 0% 68%));
+    --text-subtle: light-dark(hsl(220 5% 58%), hsl(0 0% 55%));
+
+    --border: light-dark(hsl(220 8% 84%), hsl(0 0% 24%));
+    --focus-ring: light-dark(hsl(220 8% 18% / 0.22), hsl(220 16% 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/neon.css

@@ -0,0 +1,66 @@
+/* Neon — dark-only theme (single block, color-scheme: dark, same shape as
+ * dark.css) that demonstrates wide-gamut progressive enhancement. The baseline
+ * block uses sRGB-safe hsl() and works everywhere dark.css works; on P3
+ * displays with oklch() support the intents are re-declared with chroma beyond
+ * sRGB. This is the pattern for shipping colors sRGB cannot express without
+ * breaking older screens or browsers. Also demonstrates the soft-variant
+ * tuning knobs and glow shadows on popovers. */
+[data-theme="neon"] {
+  color-scheme: dark;
+
+  /* Electric intents over near-black: bright hues carry dark ink so solid
+     chips read as lit signs rather than white-on-color buttons. */
+  --primary: hsl(315 95% 62%);
+  --primary-fg: hsl(315 100% 8%);
+  --secondary: hsl(182 100% 46%);
+  --secondary-fg: hsl(182 100% 7%);
+  --success: hsl(135 85% 52%);
+  --success-fg: hsl(135 100% 6%);
+  --warning: hsl(55 95% 55%);
+  --warning-fg: hsl(55 100% 7%);
+  --danger: hsl(350 100% 64%);
+  --danger-fg: hsl(350 100% 8%);
+  --neutral: hsl(260 12% 76%);
+  --neutral-fg: hsl(260 25% 8%);
+
+  --surface: hsl(260 25% 6%);
+  --surface-raised: hsl(260 22% 9%);
+  --surface-subtle: hsl(260 20% 13%);
+  --surface-solid: hsl(0 0% 96%);
+
+  --text: hsl(0 0% 97%);
+  --text-muted: hsl(260 12% 70%);
+  --text-subtle: hsl(260 8% 55%);
+
+  --border: hsl(260 18% 24%);
+  --focus: var(--secondary);
+  --focus-ring: hsl(182 100% 46% / 0.35);
+  --hover-overlay: hsl(0 0% 100% / 0.07);
+  --shadow-color: hsl(260 60% 3%);
+
+  /* Neon tints: stronger soft surfaces and hovers than the default recipe,
+     so tinted chips glow against the near-black canvas. */
+  --soft-bg-mix: 80%;
+  --soft-border-mix: 45%;
+  --soft-hover-alpha: 20%;
+
+  /* Popovers and tooltips glow instead of dropping a shadow. */
+  --shadow-popout: 0 0 1rem hsl(315 95% 62% / 0.25);
+}
+
+/* Wide-gamut upgrade: chroma beyond sRGB on P3-capable displays. Both gates
+   are required — a P3 screen driven by an older browser keeps the hsl()
+   baseline above; -fg inks stay unchanged (near-black is gamut-safe). */
+@media (color-gamut: p3) {
+  @supports (color: oklch(0% 0 0)) {
+    [data-theme="neon"] {
+      --primary: oklch(70% 0.32 340);
+      --secondary: oklch(85% 0.17 195);
+      --success: oklch(85% 0.28 148);
+      --warning: oklch(92% 0.2 105);
+      --danger: oklch(68% 0.26 15);
+      --focus-ring: oklch(85% 0.17 195 / 0.35);
+      --shadow-popout: 0 0 1rem oklch(70% 0.32 340 / 0.3);
+    }
+  }
+}

package/src/css/themes/ocean.css

@@ -0,0 +1,60 @@
+[data-theme="ocean"] {
+  color-scheme: light dark;
+
+  --primary: hsl(198 82% 35%);
+  --primary-fg: white;
+  --secondary: hsl(174 58% 30%);
+  --secondary-fg: white;
+  --success: hsl(160 62% 30%);
+  --success-fg: white;
+  --warning: hsl(36 90% 50%);
+  --warning-fg: hsl(35 35% 12%);
+  --danger: hsl(350 70% 52%);
+  --danger-fg: white;
+  --neutral: hsl(205 12% 38%);
+  --neutral-fg: white;
+
+  --surface: hsl(200 50% 98%);
+  --surface-raised: hsl(0 0% 100%);
+  --surface-subtle: hsl(198 42% 94%);
+  --surface-solid: hsl(204 38% 16%);
+
+  --text: hsl(205 34% 14%);
+  --text-muted: hsl(205 12% 42%);
+  --text-subtle: hsl(205 10% 56%);
+
+  --border: hsl(198 30% 84%);
+  --focus: var(--primary);
+  --focus-ring: hsl(198 82% 35% / 0.22);
+}
+
+@supports (color: light-dark(red, blue)) {
+  [data-theme="ocean"] {
+    --primary: light-dark(hsl(198 82% 35%), hsl(198 75% 80%));
+    --primary-fg: light-dark(white, hsl(198 30% 12%));
+    --secondary: light-dark(hsl(174 58% 30%), hsl(174 66% 80%));
+    --secondary-fg: light-dark(white, hsl(174 30% 12%));
+    --success: light-dark(hsl(160 62% 30%), hsl(160 70% 80%));
+    --success-fg: light-dark(white, hsl(160 30% 12%));
+    --warning: light-dark(hsl(36 90% 50%), hsl(36 75% 80%));
+    --warning-fg: light-dark(hsl(35 35% 12%), hsl(36 30% 12%));
+    --danger: light-dark(hsl(350 70% 52%), hsl(350 75% 80%));
+    --danger-fg: light-dark(white, hsl(350 30% 12%));
+    --neutral: light-dark(hsl(205 12% 38%), hsl(205 20% 80%));
+    --neutral-fg: light-dark(white, hsl(205 30% 12%));
+
+    --surface: light-dark(hsl(200 50% 98%), hsl(200 18% 8%));
+    --surface-raised: light-dark(hsl(0 0% 100%), hsl(200 16% 11%));
+    --surface-subtle: light-dark(hsl(198 42% 94%), hsl(200 14% 16%));
+    --surface-solid: light-dark(hsl(204 38% 16%), hsl(0 0% 96%));
+
+    --text: light-dark(hsl(205 34% 14%), hsl(0 0% 96%));
+    --text-muted: light-dark(hsl(205 12% 42%), hsl(200 8% 68%));
+    --text-subtle: light-dark(hsl(205 10% 56%), hsl(200 7% 55%));
+
+    --border: light-dark(hsl(198 30% 84%), hsl(200 12% 24%));
+    --focus-ring: light-dark(hsl(198 82% 35% / 0.22), hsl(198 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/petrol.css

@@ -0,0 +1,64 @@
+/* Petrol — desaturated petrol-blue primary with apricot secondary over cool
+ * blue-tinted neutrals. Paired light/dark via light-dark(). The most
+ * conventional of the bundled palettes: warm, highly legible, no semantic
+ * hue collisions. */
+[data-theme="petrol"] {
+  color-scheme: light dark;
+
+  --primary: hsl(203 55% 30%);
+  --primary-fg: hsl(0 0% 98%);
+  --secondary: hsl(22 55% 47%);
+  --secondary-fg: hsl(0 0% 98%);
+  --success: hsl(155 45% 32%);
+  --success-fg: hsl(0 0% 98%);
+  --warning: hsl(38 70% 36%);
+  --warning-fg: hsl(0 0% 98%);
+  --danger: hsl(357 55% 45%);
+  --danger-fg: hsl(0 0% 98%);
+  --neutral: hsl(210 8% 43%);
+  --neutral-fg: hsl(0 0% 98%);
+
+  --surface: hsl(0 0% 100%);
+  --surface-raised: hsl(204 30% 98%);
+  --surface-subtle: hsl(204 25% 96%);
+  --surface-solid: hsl(207 25% 12%);
+
+  --text: hsl(207 25% 12%);
+  --text-muted: hsl(206 9% 42%);
+  --text-subtle: hsl(205 7% 57%);
+
+  --border: hsl(205 15% 87%);
+  --focus: var(--primary);
+  --focus-ring: hsl(203 55% 30% / 0.22);
+}
+
+@supports (color: light-dark(red, blue)) {
+  [data-theme="petrol"] {
+    --primary: light-dark(hsl(203 55% 30%), hsl(202 55% 72%));
+    --primary-fg: light-dark(hsl(0 0% 98%), hsl(204 40% 10%));
+    --secondary: light-dark(hsl(22 55% 47%), hsl(24 55% 70%));
+    --secondary-fg: light-dark(hsl(0 0% 98%), hsl(24 35% 11%));
+    --success: light-dark(hsl(155 45% 32%), hsl(155 40% 60%));
+    --success-fg: light-dark(hsl(0 0% 98%), hsl(155 35% 8%));
+    --warning: light-dark(hsl(38 70% 36%), hsl(40 62% 63%));
+    --warning-fg: light-dark(hsl(0 0% 98%), hsl(38 35% 10%));
+    --danger: light-dark(hsl(357 55% 45%), hsl(357 58% 70%));
+    --danger-fg: light-dark(hsl(0 0% 98%), hsl(357 35% 10%));
+    --neutral: light-dark(hsl(210 8% 43%), hsl(208 10% 71%));
+    --neutral-fg: light-dark(hsl(0 0% 98%), hsl(208 18% 10%));
+
+    --surface: light-dark(hsl(0 0% 100%), hsl(206 22% 9%));
+    --surface-raised: light-dark(hsl(204 30% 98%), hsl(206 19% 12%));
+    --surface-subtle: light-dark(hsl(204 25% 96%), hsl(206 15% 16%));
+    --surface-solid: light-dark(hsl(207 25% 12%), hsl(0 0% 96%));
+
+    --text: light-dark(hsl(207 25% 12%), hsl(205 12% 95%));
+    --text-muted: light-dark(hsl(206 9% 42%), hsl(205 8% 67%));
+    --text-subtle: light-dark(hsl(205 7% 57%), hsl(205 7% 53%));
+
+    --border: light-dark(hsl(205 15% 87%), hsl(206 12% 24%));
+    --focus-ring: light-dark(hsl(203 55% 30% / 0.22), hsl(202 55% 72% / 0.28));
+    --hover-overlay: light-dark(hsl(207 30% 10% / 0.04), hsl(0 0% 100% / 0.06));
+    --shadow-color: light-dark(hsl(207 30% 10%), hsl(0 0% 0%));
+  }
+}

package/src/css/themes/spruce.css

@@ -0,0 +1,64 @@
+/* Spruce — deep spruce-green primary with copper secondary over sea-green
+ * tinted neutrals. Paired light/dark via light-dark(). The green primary is
+ * deliberately far from success in hue (174 vs 135) and saturation so the two
+ * never read as the same signal; keep that split when adjusting either. */
+[data-theme="spruce"] {
+  color-scheme: light dark;
+
+  --primary: hsl(174 45% 24%);
+  --primary-fg: hsl(160 30% 97%);
+  --secondary: hsl(24 48% 42%);
+  --secondary-fg: hsl(0 0% 98%);
+  --success: hsl(135 38% 33%);
+  --success-fg: hsl(0 0% 98%);
+  --warning: hsl(42 72% 35%);
+  --warning-fg: hsl(0 0% 98%);
+  --danger: hsl(3 55% 44%);
+  --danger-fg: hsl(0 0% 98%);
+  --neutral: hsl(185 8% 40%);
+  --neutral-fg: hsl(0 0% 98%);
+
+  --surface: hsl(0 0% 100%);
+  --surface-raised: hsl(160 20% 98%);
+  --surface-subtle: hsl(168 18% 95%);
+  --surface-solid: hsl(185 25% 11%);
+
+  --text: hsl(185 25% 11%);
+  --text-muted: hsl(183 9% 40%);
+  --text-subtle: hsl(182 7% 55%);
+
+  --border: hsl(170 12% 86%);
+  --focus: var(--primary);
+  --focus-ring: hsl(174 45% 24% / 0.22);
+}
+
+@supports (color: light-dark(red, blue)) {
+  [data-theme="spruce"] {
+    --primary: light-dark(hsl(174 45% 24%), hsl(170 35% 66%));
+    --primary-fg: light-dark(hsl(160 30% 97%), hsl(174 40% 9%));
+    --secondary: light-dark(hsl(24 48% 42%), hsl(26 50% 70%));
+    --secondary-fg: light-dark(hsl(0 0% 98%), hsl(26 35% 11%));
+    --success: light-dark(hsl(135 38% 33%), hsl(135 35% 60%));
+    --success-fg: light-dark(hsl(0 0% 98%), hsl(135 35% 8%));
+    --warning: light-dark(hsl(42 72% 35%), hsl(44 60% 62%));
+    --warning-fg: light-dark(hsl(0 0% 98%), hsl(42 35% 10%));
+    --danger: light-dark(hsl(3 55% 44%), hsl(3 58% 69%));
+    --danger-fg: light-dark(hsl(0 0% 98%), hsl(3 35% 10%));
+    --neutral: light-dark(hsl(185 8% 40%), hsl(183 10% 70%));
+    --neutral-fg: light-dark(hsl(0 0% 98%), hsl(185 18% 10%));
+
+    --surface: light-dark(hsl(0 0% 100%), hsl(182 20% 8%));
+    --surface-raised: light-dark(hsl(160 20% 98%), hsl(182 17% 11%));
+    --surface-subtle: light-dark(hsl(168 18% 95%), hsl(182 14% 15%));
+    --surface-solid: light-dark(hsl(185 25% 11%), hsl(0 0% 96%));
+
+    --text: light-dark(hsl(185 25% 11%), hsl(175 12% 94%));
+    --text-muted: light-dark(hsl(183 9% 40%), hsl(180 8% 66%));
+    --text-subtle: light-dark(hsl(182 7% 55%), hsl(180 7% 52%));
+
+    --border: light-dark(hsl(170 12% 86%), hsl(182 12% 23%));
+    --focus-ring: light-dark(hsl(174 45% 24% / 0.22), hsl(170 35% 66% / 0.28));
+    --hover-overlay: light-dark(hsl(185 30% 10% / 0.04), hsl(0 0% 100% / 0.06));
+    --shadow-color: light-dark(hsl(185 30% 10%), hsl(0 0% 0%));
+  }
+}

package/src/css/themes/square.css

@@ -0,0 +1,68 @@
+[data-theme="square"] {
+  color-scheme: light dark;
+
+  --primary: hsl(220 90% 56%);
+  --primary-fg: white;
+  --secondary: hsl(270 60% 56%);
+  --secondary-fg: white;
+  --success: hsl(145 60% 32%);
+  --success-fg: white;
+  --warning: hsl(38 92% 50%);
+  --warning-fg: hsl(35 30% 12%);
+  --danger: hsl(0 75% 51%);
+  --danger-fg: white;
+  --neutral: hsl(220 10% 42%);
+  --neutral-fg: white;
+
+  --surface: hsl(0 0% 100%);
+  --surface-raised: hsl(0 0% 100%);
+  --surface-subtle: hsl(220 20% 96%);
+  --surface-solid: hsl(222 22% 12%);
+
+  --text: hsl(222 22% 12%);
+  --text-muted: hsl(220 10% 42%);
+  --text-subtle: hsl(220 8% 55%);
+
+  --border: hsl(220 15% 88%);
+  --focus: var(--primary);
+  --focus-ring: hsl(220 90% 56% / 0.22);
+  --hover-overlay: hsl(220 30% 10% / 0.04);
+
+  --radius: 0;
+  --radius-sm: 0;
+  --radius-lg: 0;
+}
+
+@supports (color: light-dark(red, blue)) {
+  /* Square — paired light/dark theme that demonstrates overriding the full
+ * --radius scale to 0 for sharp-cornered applications. The recolor is close to
+ * the default blue palette; the radius override is the point. */
+  [data-theme="square"] {
+    --primary: light-dark(hsl(220 90% 56%), hsl(220 75% 80%));
+    --primary-fg: light-dark(white, hsl(220 30% 12%));
+    --secondary: light-dark(hsl(270 60% 56%), hsl(270 68% 80%));
+    --secondary-fg: light-dark(white, hsl(270 30% 12%));
+    --success: light-dark(hsl(145 60% 32%), hsl(145 68% 80%));
+    --success-fg: light-dark(white, hsl(145 30% 12%));
+    --warning: light-dark(hsl(38 92% 50%), hsl(38 75% 80%));
+    --warning-fg: light-dark(hsl(35 30% 12%), hsl(38 30% 12%));
+    --danger: light-dark(hsl(0 75% 51%), hsl(0 75% 80%));
+    --danger-fg: light-dark(white, hsl(0 30% 12%));
+    --neutral: light-dark(hsl(220 10% 42%), hsl(220 18% 80%));
+    --neutral-fg: light-dark(white, hsl(220 30% 12%));
+
+    --surface: light-dark(hsl(0 0% 100%), hsl(222 18% 8%));
+    --surface-raised: light-dark(hsl(0 0% 100%), hsl(222 16% 11%));
+    --surface-subtle: light-dark(hsl(220 20% 96%), hsl(222 14% 16%));
+    --surface-solid: light-dark(hsl(222 22% 12%), hsl(0 0% 96%));
+
+    --text: light-dark(hsl(222 22% 12%), hsl(0 0% 96%));
+    --text-muted: light-dark(hsl(220 10% 42%), hsl(222 8% 68%));
+    --text-subtle: light-dark(hsl(220 8% 55%), hsl(222 7% 55%));
+
+    --border: light-dark(hsl(220 15% 88%), hsl(222 12% 24%));
+    --focus-ring: light-dark(hsl(220 90% 56% / 0.22), hsl(220 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/sunset.css

@@ -0,0 +1,66 @@
+[data-theme="sunset"] {
+  color-scheme: light dark;
+
+  --primary: hsl(16 84% 43%);
+  --primary-fg: white;
+  --secondary: hsl(330 60% 52%);
+  --secondary-fg: white;
+  --success: hsl(142 52% 34%);
+  --success-fg: white;
+  --warning: hsl(42 94% 52%);
+  --warning-fg: hsl(30 35% 12%);
+  --danger: hsl(358 72% 52%);
+  --danger-fg: white;
+  --neutral: hsl(24 12% 38%);
+  --neutral-fg: white;
+
+  --surface: hsl(34 70% 97%);
+  --surface-raised: hsl(30 80% 99%);
+  --surface-subtle: hsl(28 62% 92%);
+  --surface-solid: hsl(18 34% 18%);
+
+  --text: hsl(20 34% 14%);
+  --text-muted: hsl(20 12% 42%);
+  --text-subtle: hsl(20 10% 55%);
+
+  --border: hsl(25 38% 84%);
+  --focus: var(--primary);
+  --focus-ring: hsl(16 84% 43% / 0.22);
+
+  /* Warm chrome — demonstrates selection and shadow-color theming. The
+     selection pair rides the intent tokens, so it adapts to dark for free. */
+  --selection-bg: var(--secondary);
+  --selection-fg: var(--secondary-fg);
+  --shadow-color: hsl(20 60% 12%);
+}
+
+@supports (color: light-dark(red, blue)) {
+  [data-theme="sunset"] {
+    --primary: light-dark(hsl(16 84% 43%), hsl(16 75% 80%));
+    --primary-fg: light-dark(white, hsl(16 30% 12%));
+    --secondary: light-dark(hsl(330 60% 52%), hsl(330 68% 80%));
+    --secondary-fg: light-dark(white, hsl(330 30% 12%));
+    --success: light-dark(hsl(142 52% 34%), hsl(142 60% 80%));
+    --success-fg: light-dark(white, hsl(142 30% 12%));
+    --warning: light-dark(hsl(42 94% 52%), hsl(42 75% 80%));
+    --warning-fg: light-dark(hsl(30 35% 12%), hsl(42 30% 12%));
+    --danger: light-dark(hsl(358 72% 52%), hsl(358 75% 80%));
+    --danger-fg: light-dark(white, hsl(358 30% 12%));
+    --neutral: light-dark(hsl(24 12% 38%), hsl(24 20% 80%));
+    --neutral-fg: light-dark(white, hsl(24 30% 12%));
+
+    --surface: light-dark(hsl(34 70% 97%), hsl(20 18% 8%));
+    --surface-raised: light-dark(hsl(30 80% 99%), hsl(20 16% 11%));
+    --surface-subtle: light-dark(hsl(28 62% 92%), hsl(20 14% 16%));
+    --surface-solid: light-dark(hsl(18 34% 18%), hsl(0 0% 96%));
+
+    --text: light-dark(hsl(20 34% 14%), hsl(0 0% 96%));
+    --text-muted: light-dark(hsl(20 12% 42%), hsl(20 8% 68%));
+    --text-subtle: light-dark(hsl(20 10% 55%), hsl(20 7% 55%));
+
+    --border: light-dark(hsl(25 38% 84%), hsl(20 12% 24%));
+    --focus-ring: light-dark(hsl(16 84% 43% / 0.22), hsl(16 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(20 60% 12%), hsl(20 40% 2%));
+  }
+}

package/src/css/tokens.css

@@ -0,0 +1,122 @@
+:root {
+  /* Typography */
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --line-height: 1.5;
+  --line-height-tight: 1.25;
+  --line-height-relaxed: 1.75;
+  --font-weight: 400;
+  --font-weight-medium: 500;
+  --font-weight-strong: 650;
+  --font-weight-bold: 700;
+
+  /* Typography scale */
+  --font-size-xs: 0.8125rem;
+  --font-size-sm: 0.875rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.125rem;
+
+  /* Spacing */
+  --gap: 0.75rem;
+  --variant-space: var(--space-4);
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2rem;
+
+  /* Shape */
+  --border-width: 1px;
+  --radius-full: 9999px;
+  --shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.08);
+  --shadow-popout: 0 0.25rem 0.75rem rgb(0 0 0 / 0.15);
+
+  /* Motion — see reset.css for the prefers-reduced-motion hard reset.
+     --duration drives component transitions (hover/focus); the dedicated
+     animation rates below tune one-shot open/close and decorative loops. */
+  --duration: 150ms;
+  --duration-fast: 100ms;
+  --duration-slow: 200ms;
+  --duration-spin: 0.75s;
+  --duration-shimmer: 1.2s;
+  --ease: ease;
+
+  /* Focus ring — shared by every interactive component's :focus-visible */
+  --focus-outline: calc(var(--border-width) * 2) solid var(--focus);
+  --focus-outline-offset: 2px;
+
+  /* Status dot positioning — used by .avatar > .badge:empty. The offset is
+     the circle-aware inset (1 - 1/√2) / 2 ≈ 14.65%; the ring surrounds the
+     dot with the parent surface color. */
+  --indicator-offset: 14.65%;
+  --indicator-ring: var(--surface);
+
+  /* Shared backdrop — consumed by modal, drawer, and mobile flyout sheets. */
+  --backdrop-color: rgb(0 0 0);
+  --backdrop-opacity: 0.45;
+  --backdrop-fill: rgb(0 0 0 / var(--backdrop-opacity));
+
+  /* Progress / meter track height */
+  --bar-height: 0.65rem;
+
+  /* Controls — inputs and buttons share --control-size so heights always match.
+     .sm/.lg (variants.css) switch --control-size and --control-font-size. */
+  --control-size-sm: 2rem;
+  --control-size-md: 2.375rem;
+  --control-size-lg: 2.75rem;
+  --control-size: var(--control-size-md);
+  --control-pad-x: 1em;
+  --control-font-size: var(--font-size-md);
+  --disabled-opacity: 0.65;
+
+  /* Variant tuning — themes may adjust generated soft surfaces without
+     replacing the component rules. */
+  --soft-bg-mix: 88%;
+  --soft-border-mix: 65%;
+  --soft-hover-alpha: 12%;
+
+  /* Shared icons */
+  --icon-chevron-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  --icon-check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
+  /* Native select uses background-image, which cannot inherit currentColor.
+     The stroke matches the default theme's text-subtle (hue 258 neutral). */
+  --icon-chevron-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238a8594' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+
+  /* Viewport size tokens — fallback vh/vw with dvh/vi enhancement.
+     Consumed by full-viewport components (app-shell, drawer, modal, flyout).
+     Custom properties keep the fallback explicit while allowing modern units
+     to enhance the same public tokens. */
+  --viewport-block: 100vh;
+  --viewport-inline: 100vw;
+
+  /* Layering */
+  --z-sticky: 10;
+  --z-menu: 20;
+  --z-tooltip: 50;
+  --z-status: 60;
+}
+
+@supports (block-size: 100dvh) {
+  :root {
+    --viewport-block: 100dvh;
+  }
+}
+
+@supports (inline-size: 100vi) {
+  :root {
+    --viewport-inline: 100vi;
+  }
+}
+
+@supports (color: color-mix(in oklch, red, white)) {
+  :root {
+    --shadow: 0 0.5rem 1.5rem color-mix(in oklch, var(--shadow-color) 8%, transparent);
+    --shadow-popout: 0 0.25rem 0.75rem color-mix(in oklch, var(--shadow-color) 15%, transparent);
+    --backdrop-fill: color-mix(
+      in oklch,
+      var(--backdrop-color) calc(var(--backdrop-opacity) * 100%),
+      transparent
+    );
+  }
+}