@waveso/ui 0.15.1 → 0.17.0

package/dist/styles.css

@@ -42,7 +42,10 @@
  * circular arc: softer, friendlier. It composes with `border-radius` and
  * respects borders / rings / shadows, and degrades to normal rounding where
  * unsupported (Chrome 2025+ today; Safari/Firefox pending). Pills and circles
- * opt back out — a squircled circle reads as an app icon, not an avatar.
+ * opt back out — a squircled circle reads as an app icon, not an avatar — and
+ * the `::before`/`::after` variants matter: a pseudo-element circle (e.g. the
+ * radio dot's `after:rounded-full`) inherits squircle from the `::after` rule
+ * above, so it needs its own round opt-out or it renders as a rounded square.
  * `::file-selector-button` is listed too — `*` doesn't match pseudo-elements,
  * so the file-input button would otherwise stay round at the squircle radius. */
 @layer base {
@@ -52,7 +55,9 @@
   ::file-selector-button {
     corner-shape: squircle;
   }
-  [class*="rounded-full"] {
+  [class*="rounded-full"],
+  [class*="rounded-full"]::before,
+  [class*="rounded-full"]::after {
     corner-shape: round;
   }
 }
@@ -65,115 +70,232 @@
  * `.graphite`, `.ink` — and it always beats the OS. A theme class sits on the
  * same <html> as `:root`, so every var() alias below (inverse, presence)
  * re-resolves to the active theme.
+ *
+ * Every default here sits in `:where(:root)` (zero specificity), so an app's
+ * own `:root` override wins whatever order the stylesheets load in.
  * ------------------------------------------------------------------------- */
 
-:root {
+:where(:root) {
   /* ========================================================================
    * Palettes — raw primitives. No `--color-` prefix on purpose: these live in
    * `:root`, not `@theme`, so they generate NO utilities (no `bg-graphite-300`).
    * They're referenced by the semantic tokens below, never used directly.
    * ====================================================================== */
 
-  /* Wave — brand ramp. 500 = Wave Blue #0074DE.
-   * A true cobalt signal: calm, trustable, solid, constant. */
-  --wave-50:  oklch(0.974 0.014 238); /* #EEF8FF */
-  --wave-100: oklch(0.937 0.034 239); /* #D6EEFF */
-  --wave-200: oklch(0.876 0.068 240); /* #AEDDFF */
-  --wave-300: oklch(0.793 0.112 245); /* #7BC3FF */
-  --wave-400: oklch(0.700 0.164 250); /* #3EA3FF */
-  --wave-500: oklch(0.566 0.184 255); /* #0074DE */
-  --wave-600: oklch(0.506 0.175 256); /* #0061C6 */
-  --wave-700: oklch(0.429 0.150 257); /* #004C9F */
-  --wave-800: oklch(0.351 0.118 255); /* #003976 */
-  --wave-900: oklch(0.284 0.088 255); /* #042954 */
-  --wave-950: oklch(0.226 0.060 255); /* #061C37 */
-
-  /* Status ramps — shared across every theme (mode-stable, like Wave).
-   * 500 = the locked status colour; the semantic layer picks a swatch per
-   * light/dark (base + hover) so components never carry a `dark:` for it. */
-  --success-50:  oklch(0.975 0.014 155); /* #F0FAF3 */
-  --success-100: oklch(0.951 0.034 155); /* #DEF6E5 */
-  --success-200: oklch(0.911 0.068 155); /* #BFF0CE */
-  --success-300: oklch(0.857 0.113 155); /* #91E6B0 */
-  --success-400: oklch(0.797 0.165 155); /* #4FDB8D */
-  --success-500: oklch(0.710 0.185 155); /* #00C26B */
-  --success-600: oklch(0.620 0.176 155); /* #00A354 */
-  --success-700: oklch(0.504 0.151 155); /* #007C3B */
-  --success-800: oklch(0.388 0.119 155); /* #005626 */
-  --success-900: oklch(0.287 0.088 155); /* #003615 */
-  --success-950: oklch(0.200 0.060 155); /* #001D09 */
-
-  --warning-50:  oklch(0.975 0.012 93); /* #F9F7EE */
-  --warning-100: oklch(0.962 0.029 93); /* #F9F2DD */
-  --warning-200: oklch(0.940 0.058 93); /* #F8EBC0 */
-  --warning-300: oklch(0.911 0.095 93); /* #F7E198 */
-  --warning-400: oklch(0.878 0.139 93); /* #F6D460 */
-  --warning-500: oklch(0.830 0.156 93); /* #EAC434 */
-  --warning-600: oklch(0.719 0.148 93); /* #C4A100 */
-  --warning-700: oklch(0.576 0.127 93); /* #937600 */
-  --warning-800: oklch(0.432 0.100 93); /* #634E00 */
-  --warning-900: oklch(0.308 0.075 93); /* #3D2E00 */
-  --warning-950: oklch(0.200 0.051 93); /* #1E1500 */
-
-  --destructive-50:  oklch(0.975 0.015 25); /* #FFF3F2 */
-  --destructive-100: oklch(0.943 0.037 25); /* #FFE3E0 */
-  --destructive-200: oklch(0.890 0.074 25); /* #FFC8C2 */
-  --destructive-300: oklch(0.817 0.122 25); /* #FFA39B */
-  --destructive-400: oklch(0.736 0.178 25); /* #FF756E */
-  --destructive-500: oklch(0.620 0.200 25); /* #E64343 */
-  --destructive-600: oklch(0.546 0.190 25); /* #C72D32 */
-  --destructive-700: oklch(0.451 0.163 25); /* #9C1C21 */
-  --destructive-800: oklch(0.355 0.128 25); /* #701115 */
-  --destructive-900: oklch(0.272 0.096 25); /* #4C0A0C */
-  --destructive-950: oklch(0.200 0.065 25); /* #2D0606 */
+  /* Wave Blue — the brand, and the first of the Wave Palettes. 500 = #0074DE.
+   * A true cobalt signal: calm, trustable, solid, constant. Grown on the Wave
+   * Light Curve with the Wave Hues Drift, like every Wave Palette below. */
+  --wave-blue-50:  oklch(0.975 0.011 242.8); /* #F1F8FE */
+  --wave-blue-100: oklch(0.944 0.024 242.8); /* #DFEFFC */
+  --wave-blue-200: oklch(0.888 0.049 247.2); /* #C1DEFA */
+  --wave-blue-300: oklch(0.804 0.095 248.7); /* #8EC4FA */
+  --wave-blue-400: oklch(0.686 0.167 250.4); /* #389EFC */
+  --wave-blue-500: oklch(0.566 0.184 254.6); /* #0074DE */
+  --wave-blue-600: oklch(0.471 0.173 258.4); /* #0655B9 */
+  --wave-blue-700: oklch(0.391 0.145 259.8); /* #0A3F91 */
+  --wave-blue-800: oklch(0.320 0.115 260.3); /* #092F6C */
+  --wave-blue-900: oklch(0.258 0.087 260.3); /* #07214D */
+  --wave-blue-950: oklch(0.202 0.067 261); /* #041434 */
+
+  /* The Wave Palettes — Wave Blue's nine signature colours: Wave Indigo,
+   * Wave Purple, Wave Pink, Wave Red, Wave Orange, Wave Yellow, Wave Lime,
+   * Wave Green and Wave Teal. Each hue is placed by hand, in a space of its
+   * own on the colour wheel and evenly apart from its neighbours, and every
+   * step is grown on the Wave Light Curve with the Wave Hues Drift (see
+   * Colors → Wave Light Curve and Hues Drift). A step has the same luminance
+   * in every palette, so the same contrast in every colour. Shared across
+   * every theme; Display-P3 screens get the more vivid values in the block
+   * after this one, at the same luminance. */
+  /* Wave Indigo */
+  --wave-indigo-50:  oklch(0.976 0.010 287.9); /* #F6F6FE */
+  --wave-indigo-100: oklch(0.946 0.022 287.9); /* #ECEBFC */
+  --wave-indigo-200: oklch(0.893 0.047 286.3); /* #D8D8FA */
+  --wave-indigo-300: oklch(0.811 0.091 285.9); /* #BCB9FA */
+  --wave-indigo-400: oklch(0.698 0.160 284.3); /* #948DFC */
+  --wave-indigo-500: oklch(0.587 0.234 283); /* #715AFF */
+  --wave-indigo-600: oklch(0.501 0.283 283); /* #5F1AFA */
+  --wave-indigo-700: oklch(0.412 0.225 283); /* #4619BD */
+  --wave-indigo-800: oklch(0.335 0.171 283); /* #321889 */
+  --wave-indigo-900: oklch(0.269 0.128 283); /* #231361 */
+  --wave-indigo-950: oklch(0.210 0.094 283); /* #150C41 */
+
+  /* Wave Purple */
+  --wave-purple-50:  oklch(0.976 0.013 314.5); /* #FAF5FD */
+  --wave-purple-100: oklch(0.948 0.029 314.5); /* #F5E8FC */
+  --wave-purple-200: oklch(0.896 0.062 313.6); /* #ECD1FA */
+  --wave-purple-300: oklch(0.818 0.117 312); /* #DDADFB */
+  --wave-purple-400: oklch(0.709 0.200 310); /* #C777FC */
+  --wave-purple-500: oklch(0.604 0.289 309); /* #B323FF */
+  --wave-purple-600: oklch(0.498 0.246 309); /* #8B0FC9 */
+  --wave-purple-700: oklch(0.410 0.192 309); /* #681496 */
+  --wave-purple-800: oklch(0.334 0.146 309); /* #4C136D */
+  --wave-purple-900: oklch(0.269 0.110 309); /* #360F4E */
+  --wave-purple-950: oklch(0.210 0.081 309); /* #230934 */
+
+  /* Wave Pink */
+  --wave-pink-50:  oklch(0.977 0.013 337.3); /* #FEF4FB */
+  --wave-pink-100: oklch(0.949 0.030 337.3); /* #FCE7F5 */
+  --wave-pink-200: oklch(0.898 0.065 337.3); /* #FBCEED */
+  --wave-pink-300: oklch(0.822 0.128 338.1); /* #FBA4E1 */
+  --wave-pink-400: oklch(0.717 0.238 339.2); /* #FD56D3 */
+  --wave-pink-500: oklch(0.600 0.258 342); /* #DC01AA */
+  --wave-pink-600: oklch(0.492 0.202 346.2); /* #A90C78 */
+  --wave-pink-700: oklch(0.406 0.157 348.7); /* #801157 */
+  --wave-pink-800: oklch(0.331 0.120 348.8); /* #5E103F */
+  --wave-pink-900: oklch(0.267 0.090 348.8); /* #430D2D */
+  --wave-pink-950: oklch(0.209 0.066 349.3); /* #2D081D */
+
+  /* Wave Red */
+  --wave-red-50:  oklch(0.976 0.009 11.6); /* #FDF5F5 */
+  --wave-red-100: oklch(0.948 0.022 12.1); /* #FCE8EA */
+  --wave-red-200: oklch(0.896 0.047 13.8); /* #FAD1D3 */
+  --wave-red-300: oklch(0.818 0.095 14.5); /* #FBAAB0 */
+  --wave-red-400: oklch(0.708 0.180 16.8); /* #FC6978 */
+  --wave-red-500: oklch(0.592 0.217 21); /* #E22841 */
+  --wave-red-600: oklch(0.489 0.191 21); /* #B30D2C */
+  --wave-red-700: oklch(0.404 0.150 21); /* #871222 */
+  --wave-red-800: oklch(0.329 0.114 21); /* #63111A */
+  --wave-red-900: oklch(0.266 0.086 21); /* #470D12 */
+  --wave-red-950: oklch(0.208 0.063 21); /* #2F080B */
+
+  /* Wave Orange */
+  --wave-orange-50:  oklch(0.975 0.022 85.9); /* #FDF6E7 */
+  --wave-orange-100: oklch(0.945 0.047 84.2); /* #FCEBCA */
+  --wave-orange-200: oklch(0.892 0.086 79.1); /* #FAD59A */
+  --wave-orange-300: oklch(0.813 0.133 67.8); /* #FAB05B */
+  --wave-orange-400: oklch(0.699 0.163 57.3); /* #E77F16 */
+  --wave-orange-500: oklch(0.579 0.154 49.5); /* #BF5801 */
+  --wave-orange-600: oklch(0.479 0.139 42.6); /* #9A3B07 */
+  --wave-orange-700: oklch(0.397 0.117 39.3); /* #782A0B */
+  --wave-orange-800: oklch(0.325 0.092 38.1); /* #591F0B */
+  --wave-orange-900: oklch(0.262 0.069 38.1); /* #3F1608 */
+  --wave-orange-950: oklch(0.206 0.052 37.1); /* #2B0D05 */
+
+  /* Wave Yellow */
+  --wave-yellow-50:  oklch(0.974 0.031 107.1); /* #F8F8E1 */
+  --wave-yellow-100: oklch(0.942 0.071 104.9); /* #F2EFB8 */
+  --wave-yellow-200: oklch(0.887 0.129 101.5); /* #EBDD72 */
+  --wave-yellow-300: oklch(0.804 0.153 98.7); /* #D8BF31 */
+  --wave-yellow-400: oklch(0.686 0.136 93.8); /* #B69715 */
+  --wave-yellow-500: oklch(0.567 0.116 88); /* #937100 */
+  --wave-yellow-600: oklch(0.468 0.095 78.3); /* #775206 */
+  --wave-yellow-700: oklch(0.389 0.078 69.3); /* #5F3C0B */
+  --wave-yellow-800: oklch(0.319 0.062 65); /* #482B0A */
+  --wave-yellow-900: oklch(0.258 0.048 61); /* #341E08 */
+  --wave-yellow-950: oklch(0.203 0.037 57.3); /* #231205 */
+
+  /* Wave Lime */
+  --wave-lime-50:  oklch(0.973 0.031 117.4); /* #F4F9E2 */
+  --wave-lime-100: oklch(0.940 0.071 117.8); /* #E7F2BD */
+  --wave-lime-200: oklch(0.882 0.129 119.9); /* #CDE580 */
+  --wave-lime-300: oklch(0.795 0.178 122.1); /* #A9CD30 */
+  --wave-lime-400: oklch(0.676 0.163 124); /* #82A713 */
+  --wave-lime-500: oklch(0.556 0.138 124); /* #638000 */
+  --wave-lime-600: oklch(0.458 0.110 124); /* #4B6108 */
+  --wave-lime-700: oklch(0.379 0.087 124); /* #39490A */
+  --wave-lime-800: oklch(0.311 0.067 124); /* #2A360A */
+  --wave-lime-900: oklch(0.252 0.050 124); /* #1D2608 */
+  --wave-lime-950: oklch(0.197 0.037 124); /* #121805 */
+
+  /* Wave Green */
+  --wave-green-50:  oklch(0.971 0.031 156.1); /* #E6FCED */
+  --wave-green-100: oklch(0.936 0.071 156.4); /* #C4F9D7 */
+  --wave-green-200: oklch(0.875 0.129 157.7); /* #87F0B5 */
+  --wave-green-300: oklch(0.786 0.165 159.4); /* #36D993 */
+  --wave-green-400: oklch(0.668 0.147 160); /* #15AF75 */
+  --wave-green-500: oklch(0.550 0.125 160); /* #008758 */
+  --wave-green-600: oklch(0.453 0.099 160.5); /* #086643 */
+  --wave-green-700: oklch(0.376 0.075 162.6); /* #0D4D35 */
+  --wave-green-800: oklch(0.308 0.057 163.9); /* #0C3928 */
+  --wave-green-900: oklch(0.250 0.042 165.8); /* #09281D */
+  --wave-green-950: oklch(0.196 0.030 168.8); /* #061913 */
+
+  /* Wave Teal */
+  --wave-teal-50:  oklch(0.971 0.031 197); /* #DEFCFD */
+  --wave-teal-100: oklch(0.937 0.071 197.9); /* #B1FAFB */
+  --wave-teal-200: oklch(0.876 0.128 200); /* #54EFF7 */
+  --wave-teal-300: oklch(0.793 0.124 202.4); /* #37D3DE */
+  --wave-teal-400: oklch(0.674 0.112 205.5); /* #16AAB8 */
+  --wave-teal-500: oklch(0.556 0.096 208.9); /* #008291 */
+  --wave-teal-600: oklch(0.458 0.078 214.6); /* #0A6272 */
+  --wave-teal-700: oklch(0.380 0.062 216); /* #0D4A57 */
+  --wave-teal-800: oklch(0.311 0.048 217.3); /* #0C3640 */
+  --wave-teal-900: oklch(0.252 0.037 219.9); /* #09262E */
+  --wave-teal-950: oklch(0.198 0.028 222.5); /* #06181F */
+
+  /* Wave Gray — pure grey, the Wave Light Curve itself: each step at the
+   * curve's lightness with no chroma, so its 500 holds white text like every
+   * Wave Palette's. With no hue there's nothing to drift, and it's the same on
+   * Display-P3 screens. */
+  --wave-gray-50:  oklch(0.975 0 0); /* #F7F7F7 */
+  --wave-gray-100: oklch(0.945 0 0); /* #EDEDED */
+  --wave-gray-200: oklch(0.890 0 0); /* #DBDBDB */
+  --wave-gray-300: oklch(0.806 0 0); /* #BFBFBF */
+  --wave-gray-400: oklch(0.686 0 0); /* #9A9A9A */
+  --wave-gray-500: oklch(0.565 0 0); /* #767676 */
+  --wave-gray-600: oklch(0.465 0 0); /* #595959 */
+  --wave-gray-700: oklch(0.385 0 0); /* #444444 */
+  --wave-gray-800: oklch(0.315 0 0); /* #313131 */
+  --wave-gray-900: oklch(0.255 0 0); /* #232323 */
+  --wave-gray-950: oklch(0.200 0 0); /* #161616 */
 
   /* ── Neutral ramps (primitives) ───────────────────────────────────────────
    * Three complete neutral ramps. Each theme's semantic block below references
    * exactly one of them directly: Paper → light, Graphite → default dark, Ink →
-   * night. `--wave-*` (brand) is shared by all three. Never used by components
-   * directly — only through the semantic tokens (`--foundation`, `--contrast`…).
+   * night. The Wave Palettes (`--wave-*`) are shared by all three. Never used
+   * by components directly — only through the semantic tokens (`--foundation`,
+   * `--contrast`…).
    * ──────────────────────────────────────────────────────────────────────── */
 
-  /* Graphite — neutral grey (default) */
-  --graphite-50:  oklch(0.985 0.001 286); /* #FAFAFB */
-  --graphite-100: oklch(0.964 0.001 286); /* #F3F3F4 */
-  --graphite-200: oklch(0.923 0.004 286); /* #E5E5E8 */
-  --graphite-300: oklch(0.864 0.007 277); /* #D1D2D7 */
-  --graphite-400: oklch(0.745 0.009 279); /* #ABACB2 */
-  --graphite-500: oklch(0.642 0.012 280); /* #8B8C94 */
-  --graphite-600: oklch(0.537 0.014 281); /* #6C6D76 */
-  --graphite-700: oklch(0.422 0.013 280); /* #4C4D55 */
-  --graphite-800: oklch(0.358 0.014 280); /* #3B3C44 */
-  --graphite-900: oklch(0.322 0.011 278); /* #323339 */
-  --graphite-950: oklch(0.298 0.009 277); /* #2C2D32 */
-
-  /* Ink — deep navy surfaces, neutral-cool structure (page #020812, surface #050F1E).
-   * Chroma fades from full navy at the dark surfaces to near-neutral at the light
-   * end, so text/borders read as a distinct layer rather than melting into navy. */
+  /* Graphite — the mid-tone grey (default). Built around its card colour, the
+   * 900 (#2F3036): the page (950) and menus (800) one even contrast step
+   * either side, the steps above evenly spaced up to the text colour at the
+   * 50. One hue, 278.2; chroma arcs to 0.014 through the middle. */
+  --graphite-50:  oklch(0.964 0.001 278.2); /* #F3F3F4 */
+  --graphite-100: oklch(0.911 0.004 278.2); /* #E1E1E4 */
+  --graphite-200: oklch(0.840 0.007 278.2); /* #C9CACF */
+  --graphite-300: oklch(0.757 0.009 278.2); /* #AEB0B6 */
+  --graphite-400: oklch(0.678 0.011 278.2); /* #96979F */
+  --graphite-500: oklch(0.589 0.013 278.2); /* #7B7C85 */
+  --graphite-600: oklch(0.498 0.014 278.2); /* #61626B */
+  --graphite-700: oklch(0.415 0.013 278.2); /* #4A4B53 */
+  --graphite-800: oklch(0.348 0.012 278.2); /* #383940 */
+  --graphite-900: oklch(0.311 0.011 278.2); /* #2F3036 */
+  --graphite-950: oklch(0.268 0.009 278.2); /* #25262A */
+
+  /* Ink — deep navy surfaces, neutral-cool structure (page #020812, surface #0B1627).
+   * Graphite's even lightness steps between Ink's 50 and its page. Chroma fades
+   * from full navy at the dark surfaces to near-neutral at the light end, so
+   * text/borders read as a distinct layer rather than melting into navy. */
   --ink-50:  oklch(0.966 0.003 248); /* #F2F4F6 */
-  --ink-100: oklch(0.909 0.006 265); /* #DFE1E5 */
-  --ink-200: oklch(0.834 0.008 254); /* #C5C9CE */
-  --ink-300: oklch(0.752 0.011 257); /* #AAAFB6 */
-  --ink-400: oklch(0.658 0.014 256); /* #8C929A */
-  --ink-500: oklch(0.557 0.016 258); /* #6E747D */
-  --ink-600: oklch(0.454 0.022 258); /* #4F5763 */
-  --ink-700: oklch(0.356 0.030 256); /* #323D4C */
-  --ink-800: oklch(0.254 0.041 258); /* #162336 */
-  --ink-900: oklch(0.168 0.036 257); /* #050F1E */
+  --ink-100: oklch(0.906 0.006 265); /* #DEE0E4 */
+  --ink-200: oklch(0.826 0.008 254); /* #C2C6CB */
+  --ink-300: oklch(0.732 0.012 257); /* #A4A9B0 */
+  --ink-400: oklch(0.643 0.014 256); /* #888E96 */
+  --ink-500: oklch(0.542 0.017 258); /* #697079 */
+  --ink-600: oklch(0.439 0.023 258); /* #4A535F */
+  --ink-700: oklch(0.346 0.031 256); /* #2F3A4A */
+  --ink-800: oklch(0.270 0.039 258); /* #1A2739 */
+  --ink-900: oklch(0.201 0.038 257); /* #0B1627 */
   --ink-950: oklch(0.132 0.027 252); /* #020812 */
 
-  /* Paper — cool near-neutral (anchor #EFF0EB @ 200 = foundation) */
-  --paper-50:  oklch(0.992 0.004 122); /* #FCFDFA */
-  --paper-100: oklch(0.974 0.005 118); /* #F6F7F3 */
-  --paper-200: oklch(0.953 0.007 116); /* #EFF0EB */
-  --paper-300: oklch(0.880 0.008 114); /* #D7D8D2 */
-  --paper-400: oklch(0.741 0.010 120); /* #AAACA5 */
-  --paper-500: oklch(0.610 0.010 113); /* #83847D */
-  --paper-600: oklch(0.500 0.009 114); /* #63645E */
-  --paper-700: oklch(0.406 0.010 115); /* #494A44 */
-  --paper-800: oklch(0.310 0.009 116); /* #30312C */
-  --paper-900: oklch(0.224 0.008 118); /* #1B1C18 */
-  --paper-950: oklch(0.156 0.008 119); /* #0C0D09 */
+  /* Paper — warm stone on a white page. Built around its own colours: the
+   * cards (50), the neutral fill (100), a warm 300, the secondary text (600)
+   * and the text (950). The steps between are filled with even contrast,
+   * about 1.37 a step from the 100 down. The warmth peaks at the 300 and eases
+   * into the text greys. The page is white, so it isn't a step; these are
+   * sRGB colours, the same on Display-P3 screens. */
+  --paper-50:  oklch(0.989 0.002 67.8); /* #FCFBFA */
+  --paper-100: oklch(0.959 0.002 67.8); /* #F2F1F0 */
+  --paper-200: oklch(0.860 0.007 67.7); /* #D4D0CC */
+  --paper-300: oklch(0.769 0.010 72.6); /* #B8B3AD */
+  --paper-400: oklch(0.683 0.008 64.9); /* #9D9894 */
+  --paper-500: oklch(0.603 0.006 52.9); /* #84807E */
+  --paper-600: oklch(0.528 0.005 34.3); /* #6E6A69 */
+  --paper-700: oklch(0.452 0.004 34.3); /* #585554 */
+  --paper-800: oklch(0.376 0.003 34.3); /* #434140 */
+  --paper-900: oklch(0.291 0.001 34.3); /* #2C2B2B */
+  --paper-950: oklch(0.159 0 0); /* #0D0D0D */
 
   /* ========================================================================
    * Theme-independent tokens — identical in Paper / Graphite / Ink. The
@@ -190,8 +312,8 @@
   /* Brand — `primary` = the Wave ramp; `accent` = the bright signal (Wave Blue
    * 300, the strand now-glow). `secondary` (the neutral fill) is per-theme, so
    * it lives in the theme blocks. Text on the saturated fills is `text-white`. */
-  --primary: var(--wave-500);
-  --accent: var(--wave-300); /* the bright signal — the strand's "now" cursor glow */
+  --primary: var(--wave-blue-500);
+  --accent: var(--wave-blue-300); /* the bright signal — the strand's "now" cursor glow */
 
   /* Rings = brand themed */
   --focus: var(--primary);
@@ -203,7 +325,7 @@
    * stay in sync and follow a consumer's `--success`/etc. override). */
   --presence-online: var(--success);
   --presence-away: var(--warning);
-  --presence-busy: var(--destructive);
+  --presence-busy: var(--danger);
   --presence-invisible: var(--foundation); /* invisible = the page itself; pair with a border so the dot reads as a hollow ring */
 
   /* Radius */
@@ -251,12 +373,163 @@
   --stagger-lg: 90ms;
 }
 
+/* Display-P3 screens: the Wave Palettes and the Graphite and Ink ramps more
+ * vivid, at the same luminance, so every contrast holds. */
+@media (color-gamut: p3) {
+  :where(:root) {
+    /* Wave Blue */
+    --wave-blue-50:  oklch(0.974 0.012 242.8);
+    --wave-blue-100: oklch(0.944 0.026 242.8);
+    --wave-blue-200: oklch(0.888 0.054 247.2);
+    --wave-blue-300: oklch(0.804 0.104 248.7);
+    --wave-blue-400: oklch(0.686 0.180 250.4);
+    --wave-blue-500: oklch(0.570 0.237 254.6);
+    --wave-blue-600: oklch(0.476 0.221 258.4);
+    --wave-blue-700: oklch(0.395 0.185 259.8);
+    --wave-blue-800: oklch(0.323 0.146 260.3);
+    --wave-blue-900: oklch(0.260 0.110 260.3);
+    --wave-blue-950: oklch(0.204 0.085 261);
+    /* Wave Indigo */
+    --wave-indigo-50:  oklch(0.976 0.011 287.9);
+    --wave-indigo-100: oklch(0.946 0.024 287.9);
+    --wave-indigo-200: oklch(0.893 0.052 286.3);
+    --wave-indigo-300: oklch(0.812 0.099 285.9);
+    --wave-indigo-400: oklch(0.699 0.173 284.3);
+    --wave-indigo-500: oklch(0.590 0.250 283);
+    --wave-indigo-600: oklch(0.503 0.294 283);
+    --wave-indigo-700: oklch(0.413 0.229 283);
+    --wave-indigo-800: oklch(0.335 0.174 283);
+    --wave-indigo-900: oklch(0.269 0.130 283);
+    --wave-indigo-950: oklch(0.210 0.095 283);
+    /* Wave Purple */
+    --wave-purple-50:  oklch(0.976 0.014 314.5);
+    --wave-purple-100: oklch(0.948 0.033 314.5);
+    --wave-purple-200: oklch(0.897 0.068 313.6);
+    --wave-purple-300: oklch(0.820 0.128 312);
+    --wave-purple-400: oklch(0.711 0.216 310);
+    --wave-purple-500: oklch(0.607 0.309 309);
+    --wave-purple-600: oklch(0.501 0.261 309);
+    --wave-purple-700: oklch(0.413 0.204 309);
+    --wave-purple-800: oklch(0.336 0.155 309);
+    --wave-purple-900: oklch(0.270 0.116 309);
+    --wave-purple-950: oklch(0.211 0.086 309);
+    /* Wave Pink */
+    --wave-pink-50:  oklch(0.977 0.017 337.3);
+    --wave-pink-100: oklch(0.950 0.039 337.3);
+    --wave-pink-200: oklch(0.901 0.084 337.3);
+    --wave-pink-300: oklch(0.827 0.165 338.1);
+    --wave-pink-400: oklch(0.717 0.238 339.2);
+    --wave-pink-500: oklch(0.604 0.290 342);
+    --wave-pink-600: oklch(0.496 0.227 346.2);
+    --wave-pink-700: oklch(0.409 0.177 348.7);
+    --wave-pink-800: oklch(0.333 0.135 348.8);
+    --wave-pink-900: oklch(0.268 0.101 348.8);
+    --wave-pink-950: oklch(0.210 0.074 349.3);
+    /* Wave Red */
+    --wave-red-50:  oklch(0.976 0.012 11.6);
+    --wave-red-100: oklch(0.948 0.028 12.1);
+    --wave-red-200: oklch(0.897 0.061 13.8);
+    --wave-red-300: oklch(0.821 0.121 14.5);
+    --wave-red-400: oklch(0.714 0.224 16.8);
+    --wave-red-500: oklch(0.596 0.247 21);
+    --wave-red-600: oklch(0.492 0.217 21);
+    --wave-red-700: oklch(0.406 0.170 21);
+    --wave-red-800: oklch(0.331 0.129 21);
+    --wave-red-900: oklch(0.267 0.097 21);
+    --wave-red-950: oklch(0.209 0.072 21);
+    /* Wave Orange */
+    --wave-orange-50:  oklch(0.975 0.027 85.9);
+    --wave-orange-100: oklch(0.945 0.057 84.2);
+    --wave-orange-200: oklch(0.893 0.106 79.1);
+    --wave-orange-300: oklch(0.815 0.165 67.8);
+    --wave-orange-400: oklch(0.701 0.187 57.3);
+    --wave-orange-500: oklch(0.582 0.176 49.5);
+    --wave-orange-600: oklch(0.482 0.158 42.6);
+    --wave-orange-700: oklch(0.399 0.132 39.3);
+    --wave-orange-800: oklch(0.326 0.104 38.1);
+    --wave-orange-900: oklch(0.263 0.078 38.1);
+    --wave-orange-950: oklch(0.206 0.059 37.1);
+    /* Wave Yellow */
+    --wave-yellow-50:  oklch(0.974 0.031 107.1);
+    --wave-yellow-100: oklch(0.942 0.071 104.9);
+    --wave-yellow-200: oklch(0.887 0.129 101.5);
+    --wave-yellow-300: oklch(0.804 0.177 98.7);
+    --wave-yellow-400: oklch(0.686 0.158 93.8);
+    --wave-yellow-500: oklch(0.567 0.134 88);
+    --wave-yellow-600: oklch(0.469 0.109 78.3);
+    --wave-yellow-700: oklch(0.390 0.090 69.3);
+    --wave-yellow-800: oklch(0.319 0.071 65);
+    --wave-yellow-900: oklch(0.259 0.056 61);
+    --wave-yellow-950: oklch(0.203 0.043 57.3);
+    /* Wave Lime */
+    --wave-lime-50:  oklch(0.973 0.031 117.4);
+    --wave-lime-100: oklch(0.940 0.071 117.8);
+    --wave-lime-200: oklch(0.882 0.129 119.9);
+    --wave-lime-300: oklch(0.794 0.196 122.1);
+    --wave-lime-400: oklch(0.674 0.190 124);
+    --wave-lime-500: oklch(0.555 0.161 124);
+    --wave-lime-600: oklch(0.457 0.129 124);
+    --wave-lime-700: oklch(0.379 0.101 124);
+    --wave-lime-800: oklch(0.310 0.078 124);
+    --wave-lime-900: oklch(0.251 0.059 124);
+    --wave-lime-950: oklch(0.197 0.044 124);
+    /* Wave Green */
+    --wave-green-50:  oklch(0.971 0.031 156.1);
+    --wave-green-100: oklch(0.936 0.071 156.4);
+    --wave-green-200: oklch(0.875 0.129 157.7);
+    --wave-green-300: oklch(0.783 0.196 159.4);
+    --wave-green-400: oklch(0.662 0.200 160);
+    --wave-green-500: oklch(0.545 0.170 160);
+    --wave-green-600: oklch(0.449 0.135 160.5);
+    --wave-green-700: oklch(0.373 0.103 162.6);
+    --wave-green-800: oklch(0.306 0.077 163.9);
+    --wave-green-900: oklch(0.248 0.057 165.8);
+    --wave-green-950: oklch(0.195 0.041 168.8);
+    /* Wave Teal */
+    --wave-teal-50:  oklch(0.971 0.031 197);
+    --wave-teal-100: oklch(0.937 0.071 197.9);
+    --wave-teal-200: oklch(0.876 0.129 200);
+    --wave-teal-300: oklch(0.788 0.165 202.4);
+    --wave-teal-400: oklch(0.671 0.149 205.5);
+    --wave-teal-500: oklch(0.553 0.127 208.9);
+    --wave-teal-600: oklch(0.456 0.104 214.6);
+    --wave-teal-700: oklch(0.378 0.082 216);
+    --wave-teal-800: oklch(0.310 0.064 217.3);
+    --wave-teal-900: oklch(0.251 0.049 219.9);
+    --wave-teal-950: oklch(0.197 0.037 222.5);
+    /* Graphite */
+    --graphite-50:  oklch(0.964 0.001 278.2);
+    --graphite-100: oklch(0.911 0.004 278.2);
+    --graphite-200: oklch(0.840 0.007 278.2);
+    --graphite-300: oklch(0.757 0.009 278.2);
+    --graphite-400: oklch(0.678 0.011 278.2);
+    --graphite-500: oklch(0.589 0.013 278.2);
+    --graphite-600: oklch(0.498 0.014 278.2);
+    --graphite-700: oklch(0.415 0.013 278.2);
+    --graphite-800: oklch(0.348 0.012 278.2);
+    --graphite-900: oklch(0.311 0.011 278.2);
+    --graphite-950: oklch(0.268 0.009 278.2);
+    /* Ink */
+    --ink-50:  oklch(0.966 0.003 248);
+    --ink-100: oklch(0.906 0.007 265);
+    --ink-200: oklch(0.826 0.009 254);
+    --ink-300: oklch(0.732 0.013 257);
+    --ink-400: oklch(0.643 0.015 256);
+    --ink-500: oklch(0.542 0.021 258);
+    --ink-600: oklch(0.439 0.029 258);
+    --ink-700: oklch(0.346 0.039 256);
+    --ink-800: oklch(0.270 0.050 258);
+    --ink-900: oklch(0.201 0.049 257);
+    --ink-950: oklch(0.132 0.035 252);
+  }
+}
+
 /* A squircle reads tighter than a circular arc at the same radius, so where
  * `corner-shape` is active we bump the radius to restore the intended roundness.
  * Scoped via @supports — browsers without squircles keep the original values.
  * Starting value; nudge by eye in Chrome. Feeds --radius-sm/md/lg (all calc off it). */
 @supports (corner-shape: squircle) {
-  :root {
+  :where(:root) {
     --radius: 1rem;
   }
 }
@@ -266,25 +539,37 @@
  * per-theme tokens, shared by `:root` (the default) and `.paper` (explicit —
  * what a theme toggle sets, or to override an inherited dark theme in a nested
  * scope).
+ *
+ * `:where()` keeps the default at zero specificity, here and on the OS-dark
+ * block below, so both are defaults in the cascade too: any rule an app writes
+ * after this file wins, a plain `:root { --foundation: … }` included, on a
+ * dark system as on a light one. A pinned theme class still beats both.
+ *
+ * The page and popups are white; cards and the sidebar sit on the 50, a faint
+ * warm tint, so the contour does most of the separating. The marks are its
+ * text colour, the 950, made translucent, as in every theme.
  * ------------------------------------------------------------------------- */
-:root,
+:where(:root),
 .paper {
-  --foundation: var(--paper-200);
-  --surface: var(--paper-100);
-  --elevated: var(--paper-50);
+  --foundation: white;
+  --surface: var(--paper-50);
+  --elevated: white;
   --contrast: var(--paper-950);
   --muted: var(--paper-600);
   --soft: var(--paper-500);
-  --secondary: var(--paper-300);
-  --line: color-mix(in srgb, var(--paper-950) 7%, transparent);
-  --edge: color-mix(in srgb, var(--paper-950) 14%, transparent);
-  --solid: var(--paper-300);
-  --shadow-color: 0.159 0.021 263;
-  --shadow-strength: 0.22;
-  --destructive: oklch(0.620 0.200 25);
-  --success: oklch(0.710 0.185 155);
-  --warning: oklch(0.830 0.156 93);
-  --info: var(--wave-500);
+  --secondary: var(--paper-100);
+  --contour: color-mix(in srgb, var(--paper-950) 5%, transparent);
+  --highlight: color-mix(in srgb, var(--paper-950) 10%, transparent);
+  --shade: color-mix(in srgb, var(--paper-950) 15%, transparent);
+  --shadow-strength: 0.055;
+  --danger: var(--wave-red-500);
+  --danger-text: var(--wave-red-600);
+  --success: var(--wave-green-500);
+  --success-text: var(--wave-green-600);
+  --warning: var(--wave-orange-500);
+  --warning-text: var(--wave-orange-600);
+  --info: var(--wave-blue-500);
+  --info-text: var(--wave-blue-600);
 }
 
 /* ---------------------------------------------------------------------------
@@ -293,26 +578,31 @@
  * `.graphite` (what a theme toggle sets). Same tokens both ways — a media query
  * can't be folded into a plain class selector, so they're stated once each.
  * Status brightens and the shadow dims for the dark surface; any pinned theme
- * beats the OS.
+ * beats the OS. The OS-dark default is wrapped in `:where()`, as Paper's is:
+ * written bare, its three `:not()`s outweighed an app's own `:root` override,
+ * which was then ignored on every dark system.
  * ------------------------------------------------------------------------- */
 @media (prefers-color-scheme: dark) {
-  :root:not(.paper):not(.graphite):not(.ink) {
+  :where(:root:not(.paper):not(.graphite):not(.ink)) {
     --foundation: var(--graphite-950);
     --surface: var(--graphite-900);
     --elevated: var(--graphite-800);
-    --contrast: var(--graphite-100);
-    --muted: var(--graphite-400);
-    --soft: var(--graphite-600);
+    --contrast: var(--graphite-50);
+    --muted: var(--graphite-300);
+    --soft: var(--graphite-500);
     --secondary: var(--graphite-700);
-    --line: color-mix(in srgb, var(--graphite-50) 5%, transparent);
-    --edge: color-mix(in srgb, var(--graphite-50) 13%, transparent);
-    --solid: var(--graphite-700);
-    --shadow-color: 0.125 0.011 259;
-    --shadow-strength: 0.18;
-    --destructive: oklch(0.630 0.200 25);
-    --success: oklch(0.735 0.185 155);
-    --warning: oklch(0.850 0.156 93);
-    --info: var(--wave-400);
+    --contour: color-mix(in srgb, var(--graphite-50) 5%, transparent);
+    --highlight: color-mix(in srgb, var(--graphite-50) 10%, transparent);
+    --shade: color-mix(in srgb, var(--graphite-50) 15%, transparent);
+    --shadow-strength: 0.045;
+    --danger: var(--wave-red-500);
+    --danger-text: oklch(0.738 0.158 16.8); /* #FE7C86, see below */
+    --success: var(--wave-green-500);
+    --success-text: oklch(0.700 0.155 160); /* #14BB7C, see below */
+    --warning: var(--wave-orange-500);
+    --warning-text: oklch(0.732 0.173 57.3); /* #F78711, see below */
+    --info: var(--wave-blue-500);
+    --info-text: oklch(0.717 0.150 250.4); /* #52A8FD, see below */
   }
 }
 
@@ -320,50 +610,80 @@
   --foundation: var(--graphite-950);
   --surface: var(--graphite-900);
   --elevated: var(--graphite-800);
-  --contrast: var(--graphite-100);
-  --muted: var(--graphite-400);
-  --soft: var(--graphite-600);
+  --contrast: var(--graphite-50);
+  --muted: var(--graphite-300);
+  --soft: var(--graphite-500);
   --secondary: var(--graphite-700);
-  --line: color-mix(in srgb, var(--graphite-50) 5%, transparent);
-  --edge: color-mix(in srgb, var(--graphite-50) 13%, transparent);
-  --solid: var(--graphite-700);
-  --shadow-color: 0.125 0.011 259;
-  --shadow-strength: 0.18;
-  --destructive: oklch(0.630 0.200 25);
-  --success: oklch(0.735 0.185 155);
-  --warning: oklch(0.850 0.156 93);
-  --info: var(--wave-400);
+  --contour: color-mix(in srgb, var(--graphite-50) 5%, transparent);
+  --highlight: color-mix(in srgb, var(--graphite-50) 10%, transparent);
+  --shade: color-mix(in srgb, var(--graphite-50) 15%, transparent);
+  --shadow-strength: 0.045;
+  --danger: var(--wave-red-500);
+  --danger-text: oklch(0.738 0.158 16.8); /* #FE7C86, see below */
+  --success: var(--wave-green-500);
+  --success-text: oklch(0.700 0.155 160); /* #14BB7C, see below */
+  --warning: var(--wave-orange-500);
+  --warning-text: oklch(0.732 0.173 57.3); /* #F78711, see below */
+  --info: var(--wave-blue-500);
+  --info-text: oklch(0.717 0.150 250.4); /* #52A8FD, see below */
+}
+
+/* Graphite's status text. Its mid-tone menus need each status a touch lighter
+ * than its 400 for words to read there (4.6), so Graphite sets those four
+ * itself rather than moving the palettes: each keeps its 400's hue, lifted to
+ * that lightness at the most chroma the gamut holds. On Display-P3 screens
+ * they take the P3 versions, as the palettes do. Ink and Paper keep their
+ * palette steps. */
+@media (color-gamut: p3) {
+  .graphite {
+    --danger-text: oklch(0.743 0.198 16.8);
+    --success-text: oklch(0.693 0.212 160);
+    --warning-text: oklch(0.734 0.198 57.3);
+    --info-text: oklch(0.717 0.162 250.4);
+  }
+}
+
+@media (prefers-color-scheme: dark) and (color-gamut: p3) {
+  :where(:root:not(.paper):not(.graphite):not(.ink)) {
+    --danger-text: oklch(0.743 0.198 16.8);
+    --success-text: oklch(0.693 0.212 160);
+    --warning-text: oklch(0.734 0.198 57.3);
+    --info-text: oklch(0.717 0.162 250.4);
+  }
 }
 
 /* ---------------------------------------------------------------------------
  * Ink — the premium night theme. Opt-in only: `<html class="ink">`.
  * A complete, self-contained dark theme (deep navy), separate from the Graphite
- * default dark. It's dark, so it drives the `dark:` variant too. primary /
+ * default dark. primary /
  * accent / focus / inverse / presence stay constant or re-resolve via `:root`.
  * ------------------------------------------------------------------------- */
 .ink {
   --foundation: var(--ink-950);
   --surface: var(--ink-900);
   --elevated: var(--ink-800);
-  --contrast: var(--ink-100);
+  --contrast: var(--ink-50);
   --muted: var(--ink-400);
   --soft: var(--ink-600);
   --secondary: var(--ink-700);
-  --line: color-mix(in srgb, var(--ink-50) 5%, transparent);
-  --edge: color-mix(in srgb, var(--ink-50) 13%, transparent);
-  --solid: var(--ink-700);
-  --shadow-color: 0.125 0.011 259;
-  --shadow-strength: 0.18;
-  --destructive: oklch(0.630 0.200 25);
-  --success: oklch(0.735 0.185 155);
-  --warning: oklch(0.850 0.156 93);
-  --info: var(--wave-400);
+  --contour: color-mix(in srgb, var(--ink-50) 5%, transparent);
+  --highlight: color-mix(in srgb, var(--ink-50) 10%, transparent);
+  --shade: color-mix(in srgb, var(--ink-50) 15%, transparent);
+  --shadow-strength: 0.045;
+  --danger: var(--wave-red-500);
+  --danger-text: var(--wave-red-400);
+  --success: var(--wave-green-500);
+  --success-text: var(--wave-green-400);
+  --warning: var(--wave-orange-500);
+  --warning-text: var(--wave-orange-400);
+  --info: var(--wave-blue-500);
+  --info-text: var(--wave-blue-400);
 }
 
 /* ---------------------------------------------------------------------------
  * Tailwind v4 theme mapping — maps CSS variables to Tailwind color tokens.
  * Consumers MUST include this for Tailwind classes like `bg-primary`,
- * `text-muted`, `border-line` etc. to work.
+ * `text-muted`, `border-contour` etc. to work.
  * ------------------------------------------------------------------------- */
 
 @theme inline {
@@ -387,19 +707,35 @@
   --color-secondary: var(--secondary);
   --color-accent: var(--accent);
 
-  /* Structure — `line` (faint divider), `edge` (input border), `solid` (opaque
-   * border), `focus` (brand-themed ring = primary). */
-  --color-line: var(--line);
-  --color-edge: var(--edge);
-  --color-solid: var(--solid);
+  /* Form — the theme's foreground (its text colour) made translucent, at
+   * three strengths, the way a form is drawn: `contour` marks where a shape
+   * ends: hairline borders and separators. `highlight` marks where attention
+   * lands: hovered, keyboard-highlighted and open items. `shade` gives a
+   * control its body: field and track fills and outline-control borders.
+   * Every theme uses the same strengths: contour 5%, highlight 10%, shade
+   * 15% of its text colour (Graphite's and Ink's 50, Paper's 950).
+   * All three are translucent, so each reads the same on any surface beneath
+   * it, and `shade` doubles as the intense border (layout regions, control
+   * outlines). `focus` is the brand-themed ring (= primary). */
+  --color-contour: var(--contour);
+  --color-highlight: var(--highlight);
+  --color-shade: var(--shade);
   --color-focus: var(--focus);
   --color-scrim: var(--scrim);
 
-  /* Status */
-  --color-destructive: var(--destructive);
+  /* Status. Each status is a fill (the 500, holding white text) everywhere
+   * but in text: Tailwind reads `--text-color-*` before `--color-*`, so
+   * `text-danger` (words and icons) takes `--danger-text`, a colour that
+   * reads on the theme's surfaces, while `bg-`, `border-` and `ring-danger` keep
+   * the fill. The same for `success`, `warning` and `info`. */
+  --color-danger: var(--danger);
+  --text-color-danger: var(--danger-text);
   --color-success: var(--success);
+  --text-color-success: var(--success-text);
   --color-warning: var(--warning);
+  --text-color-warning: var(--warning-text);
   --color-info: var(--info);
+  --text-color-info: var(--info-text);
 
   /* Presence */
   --color-presence-online: var(--presence-online);
@@ -421,29 +757,31 @@
   --font-mono: var(--font-mono);
 }
 
-/* Shadow scale — layered, tinted by `--shadow-color` and dimmed by
- * `--shadow-strength` (both resolve per theme, so retinting or dimming
- * every shadow is one token). Tiers differ by layer count + spread, not alpha.
+/* Shadow scale — layered, in a dark version of the page's own colour: the
+ * active theme's `--foundation` at 16% of its lightness, same hue and chroma,
+ * so a shadow belongs to its surface in every theme (an app's own and nested
+ * ones included, as it resolves where it's used). Set `--shadow-color` to
+ * tint them from another colour instead. `--shadow-strength` sets each
+ * theme's opacity. Tiers differ by layer count + spread, not alpha: each adds
+ * one layer and reaches about 2.5–3× further (sm 3 layers / 3px, md 4 /
+ * 10px, lg 5 / 24px), so the darkness under an element steps evenly.
  * Overrides Tailwind's shadow-sm/md/lg. */
 @theme {
   --shadow-sm:
-    0px 0.5px 0.7px oklch(var(--shadow-color) / var(--shadow-strength)),
-    0px 0.8px 1px -1.2px oklch(var(--shadow-color) / var(--shadow-strength)),
-    0px 2px 2.5px -2.5px oklch(var(--shadow-color) / var(--shadow-strength));
+    0px 0.5px 0.9px oklch(from var(--shadow-color, var(--foundation)) calc(l * 0.16) c h / var(--shadow-strength)),
+    0px 1.2px 1.8px -0.9px oklch(from var(--shadow-color, var(--foundation)) calc(l * 0.16) c h / var(--shadow-strength)),
+    0px 3px 4.3px -2px oklch(from var(--shadow-color, var(--foundation)) calc(l * 0.16) c h / var(--shadow-strength));
   --shadow-md:
-    0px 0.5px 0.7px oklch(var(--shadow-color) / var(--shadow-strength)),
-    0px 1.6px 2px -0.8px oklch(var(--shadow-color) / var(--shadow-strength)),
-    0px 4.1px 5.2px -1.7px oklch(var(--shadow-color) / var(--shadow-strength)),
-    0px 10px 12.6px -2.5px oklch(var(--shadow-color) / var(--shadow-strength));
+    0px 0.5px 0.7px oklch(from var(--shadow-color, var(--foundation)) calc(l * 0.16) c h / var(--shadow-strength)),
+    0px 1.6px 2px -0.8px oklch(from var(--shadow-color, var(--foundation)) calc(l * 0.16) c h / var(--shadow-strength)),
+    0px 4.1px 5.2px -1.7px oklch(from var(--shadow-color, var(--foundation)) calc(l * 0.16) c h / var(--shadow-strength)),
+    0px 10px 12.6px -2.5px oklch(from var(--shadow-color, var(--foundation)) calc(l * 0.16) c h / var(--shadow-strength));
   --shadow-lg:
-    0px 0.5px 0.7px oklch(var(--shadow-color) / var(--shadow-strength)),
-    0px 2.9px 3.7px -0.4px oklch(var(--shadow-color) / var(--shadow-strength)),
-    0px 5.4px 6.8px -0.7px oklch(var(--shadow-color) / var(--shadow-strength)),
-    0px 8.9px 11.2px -1.1px oklch(var(--shadow-color) / var(--shadow-strength)),
-    0px 14.3px 18px -1.4px oklch(var(--shadow-color) / var(--shadow-strength)),
-    0px 22.3px 28.1px -1.8px oklch(var(--shadow-color) / var(--shadow-strength)),
-    0px 33.9px 42.7px -2.1px oklch(var(--shadow-color) / var(--shadow-strength)),
-    0px 50px 62.9px -2.5px oklch(var(--shadow-color) / var(--shadow-strength));
+    0px 0.5px 0.7px oklch(from var(--shadow-color, var(--foundation)) calc(l * 0.16) c h / var(--shadow-strength)),
+    0px 2.2px 2.8px -0.6px oklch(from var(--shadow-color, var(--foundation)) calc(l * 0.16) c h / var(--shadow-strength)),
+    0px 5px 6.3px -1.2px oklch(from var(--shadow-color, var(--foundation)) calc(l * 0.16) c h / var(--shadow-strength)),
+    0px 11px 13.9px -1.9px oklch(from var(--shadow-color, var(--foundation)) calc(l * 0.16) c h / var(--shadow-strength)),
+    0px 24px 30.2px -2.5px oklch(from var(--shadow-color, var(--foundation)) calc(l * 0.16) c h / var(--shadow-strength));
 }
 
 /* ---------------------------------------------------------------------------
@@ -468,7 +806,7 @@
     background: transparent;
   }
   &:hover {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M12 0C12 5.4 11.5 8.5 10 10C8.5 11.5 5.4 12 0 12' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M12 0C12 5.4 11.5 8.5 10 10C8.5 11.5 5.4 12 0 12' stroke='%2383847D' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 5px bottom 5px;
     background-size: 12px 12px;
@@ -476,7 +814,7 @@
 }
 
 /* `motion-color` — interaction-state transition for controls: smoothly
- * animates color / background / border / ring (box-shadow) on hover, focus,
+ * animates color / background / border / ring (box-shadow) / backdrop blur on hover, focus,
  * pressed, checked, etc. Runs at the `sm` tier (controls are small + fast). A
  * plain layered `@utility`, so the unlayered enter/exit recipes below win over
  * it when both land on one element (e.g. a button that also carries `motion-scale-sm`). */
@@ -484,7 +822,9 @@
   transition: color var(--duration-sm) var(--ease),
               background-color var(--duration-sm) var(--ease),
               border-color var(--duration-sm) var(--ease),
-              box-shadow var(--duration-sm) var(--ease);
+              box-shadow var(--duration-sm) var(--ease),
+              -webkit-backdrop-filter var(--duration-sm) var(--ease),
+              backdrop-filter var(--duration-sm) var(--ease);
 }
 
 /* Motion recipes — Base UI primitives emit `data-starting-style` (enter)
@@ -502,8 +842,12 @@
  * cascade, with NO `!important` (banned — see feedback_security). The
  * resting/enter/exit declarations stay layered so `group-has` still wins.
  *
- * `0.001px` resting blur defeats Lightning CSS's `blur(0) → blur()`
- * minification (which emits invalid CSS); it is visually equivalent to 0. */
+ * The resting state declares NO `filter`. It stays `none`, and `none` blends
+ * with the starting/ending `blur()` as a zero blur (how CSS interpolates
+ * `none` with a filter list), so the transitions still run. Don't add a
+ * resting `blur()`: Lightning CSS minifies `blur(0)` to the invalid `blur()`,
+ * and a stand-in like `blur(0.001px)` is not invisible in WebKit, which draws
+ * any non-zero blur at a minimum radius and softens the whole surface. */
 
 /* `motion-scrim` — opacity only, no blur. For full-screen backdrops: animating
  * blur across the whole viewport janks (a flat dim shows none anyway). The
@@ -525,7 +869,6 @@
  * tier per surface (don't compose — each declares its own unlayered transition).
  * Companion idioms: `motion-color` (controls) and `motion-scrim` (backdrops). */
 @utility motion-scale-sm {
-  filter: blur(0.001px);
   scale: 1;
   &[data-starting-style],
   &[data-ending-style] {
@@ -535,7 +878,6 @@
   }
 }
 @utility motion-scale-md {
-  filter: blur(0.001px);
   scale: 1;
   &[data-starting-style],
   &[data-ending-style] {
@@ -545,7 +887,6 @@
   }
 }
 @utility motion-scale-lg {
-  filter: blur(0.001px);
   scale: 1;
   &[data-starting-style],
   &[data-ending-style] {
@@ -559,7 +900,6 @@
  * trigger's `data-[side]` (Base UI sets it) and settles toward it; default /
  * side=bottom rises up. Opacity + blur + translate (`--offset-*`), NO scale. */
 @utility motion-slide-sm {
-  filter: blur(0.001px);
   translate: 0;
   &[data-starting-style],
   &[data-ending-style] {
@@ -579,7 +919,6 @@
   &[data-side=inline-end][data-ending-style] { translate: var(--offset-sm) 0; }
 }
 @utility motion-slide-md {
-  filter: blur(0.001px);
   translate: 0;
   &[data-starting-style],
   &[data-ending-style] {
@@ -599,7 +938,6 @@
   &[data-side=inline-end][data-ending-style] { translate: var(--offset-md) 0; }
 }
 @utility motion-slide-lg {
-  filter: blur(0.001px);
   translate: 0;
   &[data-starting-style],
   &[data-ending-style] {
@@ -622,7 +960,6 @@
 /* `motion-fade-*` — fade in place: opacity + blur, no transform. The signature
  * blur-fade for content that should appear without moving or scaling. */
 @utility motion-fade-sm {
-  filter: blur(0.001px);
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -630,7 +967,6 @@
   }
 }
 @utility motion-fade-md {
-  filter: blur(0.001px);
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -638,7 +974,6 @@
   }
 }
 @utility motion-fade-lg {
-  filter: blur(0.001px);
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -651,9 +986,29 @@
  * recipe with one transition. Don't try `motion-scale-md motion-slide-md`: their
  * transitions collide and scale won't animate. md only (no sm/lg consumer). */
 @utility motion-pop-md {
-  filter: blur(0.001px);
   scale: 1;
   translate: 0;
+  /* Pop from the anchored EDGE, centered along it — symmetric left/right for
+   * top/bottom dropdowns — regardless of start/end alignment. Base UI 1.8
+   * changed its `--transform-origin` to pin to the aligned corner (#5015),
+   * which reads as a left-to-right grow; these per-side rules restore the
+   * symmetric pop and replace the old `origin-(--transform-origin)` that each
+   * popup used to carry. */
+  transform-origin: center top;
+  &[data-side="bottom"] {
+    transform-origin: center top;
+  }
+  &[data-side="top"] {
+    transform-origin: center bottom;
+  }
+  &[data-side="left"],
+  &[data-side="inline-start"] {
+    transform-origin: right center;
+  }
+  &[data-side="right"],
+  &[data-side="inline-end"] {
+    transform-origin: left center;
+  }
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -673,6 +1028,31 @@
   &[data-side=inline-end][data-ending-style] { translate: var(--offset-md) 0; }
 }
 
+/* `motion-spin-{sm,md,lg}` — continuous rotation for loaders, three speeds (sm
+ * fastest → lg calmest). LINEAR (a spinner rotates at a constant rate) and
+ * literal durations (a visible spin needs ~0.5–1s, not the 150–250ms
+ * transition tiers). Reduced motion slows every tier to a calm 1.5s instead of
+ * stopping it: a frozen spinner reads as broken. A plain layered `@utility`, so
+ * variants work and a consumer's own utility can still override it. */
+@utility motion-spin-sm {
+  animation: motion-spin 0.5s linear infinite;
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 1.5s;
+  }
+}
+@utility motion-spin-md {
+  animation: motion-spin 0.75s linear infinite;
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 1.5s;
+  }
+}
+@utility motion-spin-lg {
+  animation: motion-spin 1s linear infinite;
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 1.5s;
+  }
+}
+
 /* Recipe transitions — UNLAYERED on purpose (see note above): beats any
  * layered `transition-*` utility on the same element without `!important`. */
 .motion-scrim {
@@ -728,10 +1108,13 @@
 }
 
 /* ---------------------------------------------------------------------------
- * Reduced motion — one block, every token zeroes, every recipe collapses.
+ * Reduced motion — every token zeroes, so every transition recipe collapses.
+ * Spinners slow down instead of stopping (inside `motion-spin-*`). `html:root`
+ * on purpose: one step stronger than a plain `:root`, so an app that tunes the
+ * motion tokens in its own `:root` can't switch reduced motion back on.
  * ------------------------------------------------------------------------- */
 @media (prefers-reduced-motion: reduce) {
-  :root {
+  html:root {
     --duration-sm: 0ms; --duration-md: 0ms; --duration-lg: 0ms;
     --blur-sm: 0px; --blur-md: 0px; --blur-lg: 0px;
     --scale-sm: 1; --scale-md: 1; --scale-lg: 1;
@@ -749,10 +1132,11 @@
 
 /* ---------------------------------------------------------------------------
  * Keyframe utilities — self-hosted (replaces the former `tw-animate-css` dep,
- * now removed). Only the three the library actually uses; `animate-spin` /
+ * now removed). Only the four the library actually uses; `animate-spin` /
  * `animate-pulse` come from Tailwind core. Registering via `@theme` generates
  * the `animate-accordion-down` / `animate-accordion-up` / `animate-caret-blink`
- * utilities. Accordion height runs on our motion tokens (`md` tier + the curve)
+ * utilities; `motion-spin` drives the `motion-spin-*` utilities and is named
+ * apart from Tailwind's `spin` so an app's own `spin` keyframe can't replace it. Accordion height runs on our motion tokens (`md` tier + the curve)
  * and uses Base UI's `--accordion-panel-height` (the Radix var tw-animate
  * targeted is never set under Base UI). Collapses under reduced motion via
  * `--duration-md`. */
@@ -769,6 +1153,9 @@
   from { height: var(--accordion-panel-height); }
   to { height: 0; }
 }
+@keyframes motion-spin {
+  to { transform: rotate(360deg); }
+}
 @keyframes caret-blink {
   0%, 70%, 100% { opacity: 1; }
   20%, 50% { opacity: 0; }