@fluid-theme/core 0.4.3 → 2.0.0

package/src/core/tokens.css

@@ -1,167 +1,219 @@
 /**
- * Fluid Framework - Design Tokens
+ * Fluid Theme - Design Tokens
  * @layer tokens
  *
- * The single source of truth. Every value flows from here.
+ * Three kinds of rule, in this order:
+ *  1. KNOBS (the first :root rule, knobs only): the values a site, or an AI
+ *     editing a site, is meant to change. Set them on :root in the site's
+ *     own stylesheet (`themes` layer) or the stack's injected tokens.
+ *  2. SCALES (a plain :root rule): type, space, radius, motion, shadow and
+ *     z-index steps the knobs and the components draw on.
+ *  3. THE ROLE SCOPE: every colour role, declared once, on :root AND on each
+ *     dark band (.section[data-bg="inverse"], .hero[data-theme="dark"],
+ *     .site-footer[data-dark]) and on the nav, inverse by default (not
+ *     data-bg="plain" or transparent).
+ *     The build lowers light-dark() to variables that resolve where a role
+ *     is declared, so a role declared only on :root would not flip on a band
+ *     that sets color-scheme: dark. Declaring the roles on the band too
+ *     re-resolves the same light-dark() values there.
  *
- * Color philosophy: OKLCH-based, black & white foundation.
- * - Perceptually uniform lightness (50% gray LOOKS like 50%)
- * - Themes need only 2 colors: light and dark
- * - All other colors derive mathematically
+ * Colour is OKLCH, derived from --accent and --neutral-tint. Dark mode follows
+ * the OS; <html data-theme="light"> or "dark" overrides it (read on <html>).
  */
 
 @layer tokens {
   :root {
+    color-scheme: light dark;
+
     /* ========================================
-       OKLCH COLOR SYSTEM
-       Perceptually uniform, mathematically derived
+       KNOBS
        ======================================== */
 
-    /* === FOUNDATION: Pure Black & White === */
-    --black: oklch(0% 0 0);
-    --white: oklch(100% 0 0);
-
-
-    /* === GRAY SCALE: Perceptually Even Steps ===
-       In OKLCH, 50% lightness actually LOOKS 50% gray.
-       These steps are mathematically uniform to human vision. */
-    --gray-5:  oklch(5% 0 0);
-    --gray-10: oklch(10% 0 0);
-    --gray-15: oklch(15% 0 0);
-    --gray-20: oklch(20% 0 0);
-    --gray-25: oklch(25% 0 0);
-    --gray-30: oklch(30% 0 0);
-    --gray-35: oklch(35% 0 0);
-    --gray-40: oklch(40% 0 0);
-    --gray-45: oklch(45% 0 0);
-    --gray-50: oklch(50% 0 0);
-    --gray-55: oklch(55% 0 0);
-    --gray-60: oklch(60% 0 0);
-    --gray-65: oklch(65% 0 0);
-    --gray-70: oklch(70% 0 0);
-    --gray-75: oklch(75% 0 0);
-    --gray-80: oklch(80% 0 0);
-    --gray-85: oklch(85% 0 0);
-    --gray-90: oklch(90% 0 0);
-    --gray-95: oklch(95% 0 0);
-    --gray-98: oklch(98% 0 0);
-
-
-    /* === THEME FOUNDATION ===
-       Themes override ONLY these two variables.
-       Everything else derives automatically. */
-    --theme-dark: var(--black);
-    --theme-light: var(--white);
-
-    /* Note: --theme-chroma/--theme-hue and --blend-* scale removed (unused).
-       Semantic color tokens (--color-text, --color-surface, etc.) are used instead. */
-
-
-    /* === ACCENT COLOR ===
-       Default: a mid-gray. Themes can override with any color.
-       Variants auto-calculate lighter/darker versions. */
-    --accent: var(--gray-40);
-    --accent-subtle: color-mix(in oklch, var(--accent) 15%, var(--theme-light));
-    --accent-hover: color-mix(in oklch, var(--accent) 85%, var(--theme-dark));
-    --accent-active: color-mix(in oklch, var(--accent) 70%, var(--theme-dark));
-
-
-    /* === SEMANTIC COLORS: Light Mode ===
-       These map the foundation to meaningful roles. */
-    --color-text: var(--gray-15);
-    --color-text-muted: var(--gray-40);
-    --color-text-subtle: var(--gray-55);
-
-    --color-background: var(--white);
-    --color-surface: var(--gray-98);
-    --color-surface-raised: var(--white);
-
-    --color-border: var(--gray-85);
-    --color-border-subtle: var(--gray-90);
-
-    --color-focus: var(--accent);
-    --color-selection: var(--accent-subtle);
-
-
-    /* === FEEDBACK COLORS ===
-       Muted, not alarming. OKLCH for perceptual consistency. */
-    --color-success: oklch(55% 0.15 145);
-    --color-warning: oklch(70% 0.15 70);
-    --color-error: oklch(55% 0.18 25);
-    --color-info: oklch(55% 0.12 240);
+    /* --- Colour ---
+       --accent       the brand colour as a FILL (primary button, accent-strong
+                      band, active marks). Any OKLCH colour; a spice, never a
+                      default background.
+       --on-accent    text ON an accent fill: white below L 0.575, near black
+                      above. An accent between L 0.55 and 0.60 clears 4.5:1
+                      with neither for some hues: avoid that band or set this.
+       --accent-ink   the accent as TEXT and focus ring (derived; it lives in
+                      the role scope below so it flips on dark bands).
+       --neutral-tint the colour the greys lean toward. Only its hue and chroma
+                      are used; surfaces set their own lightness. */
+    --accent: oklch(42% 0.15 22);          /* deep oxblood; white on it ≈ 8.5:1 */
+    --on-accent: oklch(from var(--accent) clamp(0, (0.575 - l) * 1000, 1) 0 0);
+    --neutral-tint: oklch(50% 0.01 75);    /* warm paper */
+
+    /* --- Type ---
+       --font-heading  the main face knob: display, h1-h3, lede, card titles,
+                       stat numerals, nav brand. Newsreader when the fonts file
+                       (dist/fluid-fonts.min.css) is linked; a system serif without it.
+       --font-display  the display face; follows --font-heading. Set it only
+                       when the display face differs from the heading face.
+       --font-body     text, h4-h6, labels, nav links, buttons, forms, tables.
+       --text-min / --text-max  body size at 360px and at 1440px, in rem
+                       (unitless); every step of the scale is built on them.
+       --type-ratio    the desktop scale ratio (phones use min(1.25, ratio)).
+       --weight-display  weight of display, h1 and h2 (h3 is +100, at most
+                       700 unless the display is heavier).
+       --weight-heading  (optional, no default) one weight for h2 and h3
+                       instead of the display ladder; legacy-1x sets it.
+       --h1-size, --h2-size, --h3-size  (optional, no default) a heading's
+                       size outright, instead of its step; legacy-1x sets them.
+       --display-max   the cap on a display headline's size. --fit 8 at
+                       10rem fills an 80rem column exactly, so the cap and
+                       --container-content agree; a headline straight in a
+                       .content-grid fits the reading column instead.
+       --measure       the reading width of prose (58ch is about 72
+                       characters of the body face).
+       --hero-headline-size  has NO default in v2: .display and .hero__headline
+                       fit their column (--fit). Setting it on :root still wins. */
+    --font-heading: "Newsreader Variable", "Newsreader Fallback", "Iowan Old Style", "Sitka Heading",
+                    Charter, "Palatino Linotype", "URW Palladio L", P052, Georgia, serif;
+    --font-display: var(--font-heading);
+    --font-body: "Schibsted Grotesk Variable", "Schibsted Fallback", "Helvetica Neue",
+                 "Segoe UI Variable Text", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
+    --text-min: 1.0625;       /* 17px */
+    --text-max: 1.25;         /* 20px */
+    --type-ratio: 1.414;
+    --weight-display: 400;
+    --display-max: 10rem;
+    --measure: 58ch;
+
+    /* --- Shape --- */
+    --radius-card: 0;
+    --radius-control: 0;      /* buttons, inputs, selects, nav links, tabs, badges */
+    --radius-pill: 9999px;    /* chips, data-pill buttons */
+    --border-width: 1px;
+    --shadow-style: 0;        /* 0 = none, 1 = soft, 2 = hard (offset, no blur) */
+    --shadow-offset: 4px;     /* how far a hard shadow sits from its box */
 
-    /* Subtle backgrounds for feedback */
-    --color-success-subtle: oklch(95% 0.03 145);
-    --color-warning-subtle: oklch(95% 0.04 70);
-    --color-error-subtle: oklch(95% 0.03 25);
-    --color-info-subtle: oklch(95% 0.02 240);
+    /* --- Space --- */
+    --space-section: var(--space-2xl);   /* block padding of a band: 72 → 160px */
+    /* --space-gutter is the 1.x knob: the page edge on BOTH sides together.
+       Each side gets half of it, never less than 3vi (--page-edge). */
+    --space-gutter: clamp(2.5rem, 1rem + 6.6667vi, 7rem);   /* 40 → 112px, so 20 → 56px a side */
+    --container-content: 80rem;
+    --rail: 0rem;   /* start-side label track of .content-grid; widen it to hang labels */
 
+    /* --- Motion --- (speed per element: data-motion="reduced|slow|fast") */
+    --motion-base: 320ms;
 
-    /* === SHADOW COLOR ===
-       Uses theme dark for natural shadows */
-    --shadow-color: var(--theme-dark);
-    --shadow-opacity: 0.08;
+    /* The inverse band's paint, resolved here on purpose (a band cannot
+       resolve its own background from its flipped roles). */
+    --band-inverse: light-dark(
+      oklch(from var(--neutral-tint) 0.17 c h),
+      oklch(from var(--neutral-tint) 0.09 c h)
+    );
+  }
 
+  :root {
+    font-synthesis: none;
+    font-kerning: normal;
+    font-optical-sizing: auto;
 
     /* ========================================
-       TYPOGRAPHY SYSTEM
-       Fluid scales that breathe
+       TYPOGRAPHY
        ======================================== */
 
-    /* Font stacks */
     --font-system: system-ui, -apple-system, "Segoe UI", Roboto,
                    "Helvetica Neue", Arial, sans-serif;
     --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino,
                   Georgia, serif;
-    --font-mono: ui-monospace, "SF Mono", "Cascadia Code",
-                 "Source Code Pro", Menlo, monospace;
-
-    /* Base size - flows smoothly with viewport */
-    --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
-
-    /* Fluid type scale — each size has its own clamp() range.
-       Larger sizes compress more on small screens, expand more on large.
-       This preserves typographic hierarchy at every viewport width.
-       Calculated for 320px → 1440px fluid range. */
-    --font-size-xs: clamp(0.75rem, 0.73rem + 0.09vw, 0.8125rem);
-    --font-size-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
-    --font-size-md: var(--font-size-base);
-    --font-size-lg: clamp(1.125rem, 1.05rem + 0.36vw, 1.25rem);
+    --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
+
+    /* The scale: one generator, one knob. Fluid from 360px to 1440px, flat
+       outside. Phones use min(1.25, --type-ratio), desktops --type-ratio.
+       Every value keeps a rem term, so zoom works (WCAG 1.4.4). Steps 0-4
+       stay within max <= 2.5 × min; 5 and 6 are display-only.
+
+       Resolved at the default ratio 1.414 (px; phones use 1.25):
+         token      360px   1440px  used for
+         --step--2   13      13     label voice, legal
+         --step--1   14      14     caption, meta, TOC
+         --step-0    17      20     body
+         --step-1    21.3    28.3   lede, h3, card title, blockquote
+         --step-2    26.6    40     h2 in prose
+         --step-3    33.2    56.5   section heading, pull quote
+         --step-4    41.5    80     h1, stat numeral, display floor
+         --step-5    51.9    113    large display
+         --step-6    64.8    160    the biggest display
+       At --type-ratio 1.25 the 1440px column is 20/25/31.3/39.1/48.8/61/76.3.
+       Do not register these (@property): they hold vi and must stay unresolved. */
+    --_r: min(1.25, var(--type-ratio));     /* phone ratio; never above the desktop one */
+    --_lo: var(--text-min);                 /* body at 360px, in rem */
+    --_hi: var(--text-max);                 /* body at 1440px, in rem */
+    --_t: calc((100vi - 22.5rem) / 67.5);   /* 0 at 360px, 1rem at 1440px */
+    --step--2: 0.8125rem;
+    --step--1: 0.875rem;
+    --step-0: clamp(calc(var(--_lo) * 1rem), calc(var(--_lo) * 1rem + (var(--_hi) - var(--_lo)) * var(--_t)), calc(var(--_hi) * 1rem));
+    --step-1: clamp(
+      calc(var(--_lo) * pow(var(--_r), 1) * 1rem),
+      calc(var(--_lo) * pow(var(--_r), 1) * 1rem + (var(--_hi) * pow(var(--type-ratio), 1) - var(--_lo) * pow(var(--_r), 1)) * var(--_t)),
+      calc(var(--_hi) * pow(var(--type-ratio), 1) * 1rem));
+    --step-2: clamp(
+      calc(var(--_lo) * pow(var(--_r), 2) * 1rem),
+      calc(var(--_lo) * pow(var(--_r), 2) * 1rem + (var(--_hi) * pow(var(--type-ratio), 2) - var(--_lo) * pow(var(--_r), 2)) * var(--_t)),
+      calc(var(--_hi) * pow(var(--type-ratio), 2) * 1rem));
+    --step-3: clamp(
+      calc(var(--_lo) * pow(var(--_r), 3) * 1rem),
+      calc(var(--_lo) * pow(var(--_r), 3) * 1rem + (var(--_hi) * pow(var(--type-ratio), 3) - var(--_lo) * pow(var(--_r), 3)) * var(--_t)),
+      calc(var(--_hi) * pow(var(--type-ratio), 3) * 1rem));
+    --step-4: clamp(
+      calc(var(--_lo) * pow(var(--_r), 4) * 1rem),
+      calc(var(--_lo) * pow(var(--_r), 4) * 1rem + (var(--_hi) * pow(var(--type-ratio), 4) - var(--_lo) * pow(var(--_r), 4)) * var(--_t)),
+      calc(var(--_hi) * pow(var(--type-ratio), 4) * 1rem));
+    --step-5: clamp(
+      calc(var(--_lo) * pow(var(--_r), 5) * 1rem),
+      calc(var(--_lo) * pow(var(--_r), 5) * 1rem + (var(--_hi) * pow(var(--type-ratio), 5) - var(--_lo) * pow(var(--_r), 5)) * var(--_t)),
+      calc(var(--_hi) * pow(var(--type-ratio), 5) * 1rem));
+    --step-6: clamp(
+      calc(var(--_lo) * pow(var(--_r), 6) * 1rem),
+      calc(var(--_lo) * pow(var(--_r), 6) * 1rem + (var(--_hi) * pow(var(--type-ratio), 6) - var(--_lo) * pow(var(--_r), 6)) * var(--_t)),
+      calc(var(--_hi) * pow(var(--type-ratio), 6) * 1rem));
+
+    /* Legacy names, still read by consumers. xs-lg follow the new scale;
+       xl-5xl keep their 1.x values so UI and admin text does not drift
+       (headings use --step-*). */
+    --font-size-xs: var(--step--2);
+    --font-size-sm: var(--step--1);
+    --font-size-base: var(--step-0);
+    --font-size-lg: clamp(1.1875rem, 1.125rem + 0.2778vi, 1.375rem);
     --font-size-xl: clamp(1.25rem, 1.12rem + 0.63vw, 1.5rem);
     --font-size-2xl: clamp(1.5rem, 1.29rem + 1.04vw, 1.875rem);
     --font-size-3xl: clamp(1.75rem, 1.43rem + 1.61vw, 2.375rem);
     --font-size-4xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
     --font-size-5xl: clamp(2.25rem, 1.5rem + 3.75vw, 3.75rem);
 
-    /* Line heights - Room to breathe */
     --leading-none: 1;
     --leading-tight: 1.2;
     --leading-snug: 1.35;
-    --leading-normal: 1.6;
-    --leading-relaxed: 1.75;
-    --leading-loose: 2;
+    --leading-normal: 1.65;
+    --leading-relaxed: 1.8;
+    --leading-body: 1.6;
+    --leading-heading: calc(1em + 0.2rem);   /* tightens as size grows: 1.11 at 28px, 1.02 at 160px */
 
-    /* Letter spacing */
     --tracking-tight: -0.025em;
-    --tracking-normal: 0;
-    --tracking-wide: 0.025em;
+    --tracking-normal: -0.01em;
+    --tracking-wide: 0.04em;
     --tracking-wider: 0.05em;
+    --tracking-display: -0.03em;
+    --tracking-heading: -0.015em;
+    --tracking-caps: 0.14em;
 
-    /* Font weights */
-    --weight-light: 300;
+    --weight-light: 350;
     --weight-normal: 400;
     --weight-medium: 500;
     --weight-semibold: 600;
     --weight-bold: 700;
+    --_dark-weight: 0;   /* 30 in dark mode and on dark bands: thin strokes survive light-on-dark */
 
 
     /* ========================================
-       SPACING SYSTEM
-       Fibonacci-inspired for natural rhythm
+       SPACING
+       Fixed 4px steps for components; fluid steps (360 → 1440px) for layout.
        ======================================== */
 
-    --space-0: 0;
-    --space-px: 1px;
     --space-0-5: 0.125rem;   /* 2px */
     --space-1: 0.25rem;      /* 4px */
     --space-1-5: 0.375rem;   /* 6px */
@@ -177,131 +229,82 @@
     --space-20: 5rem;        /* 80px */
     --space-24: 6rem;        /* 96px */
 
-    /* Semantic spacing */
-    --space-gutter: var(--space-5);
-    --space-section: var(--space-16);
+    --space-xs: clamp(0.5rem, 0.4583rem + 0.1852vi, 0.625rem);    /*  8 → 10 */
+    --space-s: clamp(0.75rem, 0.6667rem + 0.3704vi, 1rem);        /* 12 → 16 */
+    --space-m: clamp(1.25rem, 1.0833rem + 0.7407vi, 1.75rem);     /* 20 → 28 */
+    --space-l: clamp(2rem, 1.6667rem + 1.4815vi, 3rem);           /* 32 → 48 */
+    --space-xl: clamp(3rem, 2.3333rem + 2.963vi, 5rem);           /* 48 → 80 */
+    --space-2xl: clamp(4.5rem, 2.6667rem + 8.1481vi, 10rem);      /* 72 → 160 */
+    /* Per side, everywhere: half the gutter knob, with a 3vi floor (so at
+       1440px a gutter under ~86px total has no effect). */
+    --page-edge: max(var(--space-gutter) / 2, 3vi);
 
 
     /* ========================================
-       CONTAINER SYSTEM
-       Content width constraints
+       CONTAINERS
        ======================================== */
 
-    --container-xs: 20rem;     /* 320px - Narrow text */
-    --container-sm: 32rem;     /* 512px - Comfortable reading */
-    --container-md: 48rem;     /* 768px - Articles */
-    --container-lg: 64rem;     /* 1024px - Wide content */
-    --container-xl: 80rem;     /* 1280px - Full layouts */
-    --container-2xl: 96rem;    /* 1536px - Ultra wide */
+    --container-sm: 32rem;     /* 512px */
+    --container-md: 48rem;     /* 768px */
+    --container-lg: 64rem;     /* 1024px */
+    --container-xl: 80rem;     /* 1280px */
+    --container-2xl: 96rem;    /* 1536px */
+    --container-prose: var(--measure);
 
-    /* Optimal reading width */
-    --container-prose: 65ch;
 
-
-    /* ========================================
-       ANIMATION TOKENS
-       Smooth, unhurried, like flowing water
-
-       The "NSW Ratio" (0.73) creates proportional harmony.
-       Base duration × 0.73 = fast, × 1.37 = slow
-       This creates a golden-ratio-like relationship between speeds.
-       ======================================== */
-
-    /* Base timing - the heartbeat of all motion */
-    --motion-base: 467ms;  /* ~0.5s feels distinctly fluid */
-
-    /* Durations - Proportionally related via NSW ratio (0.73) */
-    --duration-instant: 137ms;                              /* Micro-interactions */
-    --duration-fast: calc(var(--motion-base) * 0.73);       /* ~341ms - Quick feedback */
-    --duration-normal: var(--motion-base);                  /* ~467ms - Standard transitions */
-    --duration-slow: calc(var(--motion-base) * 1.37);       /* ~640ms - Deliberate motion */
-    --duration-slower: calc(var(--motion-base) * 1.73);     /* ~808ms - Emphasis */
-    --duration-slowest: calc(var(--motion-base) * 2.37);    /* ~1107ms - Grand gestures */
-
-    /* Easing - Natural, organic movement */
-    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
-    --ease-in: cubic-bezier(0.4, 0, 1, 1);
-    --ease-out: cubic-bezier(0, 0, 0.2, 1);
-    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-
-    /* Fluid motion - like water flowing, unhurried */
+    /* MOTION: the durations are in their own rule below (data-motion). */
     --ease-fluid: cubic-bezier(0.33, 0, 0.2, 1);
-    --ease-fluid-in: cubic-bezier(0.55, 0, 1, 0.45);
-    --ease-fluid-out: cubic-bezier(0, 0.55, 0.45, 1);
-
-    /* Gentle settle - like a leaf landing on still water */
     --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
 
 
     /* ========================================
-       MOTION INTENSITY - Water Themes
-       Scale motion from calm to dynamic
-       Usage: <html data-motion="trickling">
+       RADIUS SCALE
+       The steps follow the knobs; --radius-full stays for true circles
+       (avatars, radio buttons, dots, spinners).
        ======================================== */
 
-    /* Note: --motion-scale and --motion-instant/fast/normal/slow removed (unused).
-       Components use the --duration-* and --motion-base system instead. */
+    --radius-sm: var(--radius-control);
+    --radius-md: var(--radius-control);
+    --radius-lg: var(--radius-card);
+    --radius-xl: var(--radius-card);
+    --radius-full: 9999px;
 
-
-    /* ========================================
-       BORDERS & RADII
-       Soft edges, never harsh
-       ======================================== */
-
-    --radius-none: 0;
-    --radius-sm: 0.25rem;      /* 4px - Subtle */
-    --radius-md: 0.5rem;       /* 8px - Default */
-    --radius-lg: 0.75rem;      /* 12px - Prominent */
-    --radius-xl: 1rem;         /* 16px - Cards */
-    --radius-2xl: 1.5rem;      /* 24px - Modals */
-    --radius-full: 9999px;     /* Pills */
-
-    --border-width: 1px;
-    --border-width-thick: 2px;
+    --border-width-thick: calc(var(--border-width) * 2);
+    /* Every focus outline: var(--focus-ring-width) solid var(--color-focus).
+       Only the width is a token: the colour must resolve where it is used,
+       so a band that re-points --color-focus (accent-strong) is followed. */
+    --focus-ring-width: 2px;
 
 
     /* ========================================
-       SHADOWS & ELEVATION
-       Using theme color for natural shadows
+       SHADOWS
+       --shadow-style picks the family: each step is a soft (blurred) part
+       scaled by --_soft plus a hard (offset) part scaled by --_hard, so
+       0 (the v2 default) turns both off, 1 is soft only and 2 is hard only.
        ======================================== */
 
-    --shadow-xs:
-      0 1px 2px oklch(from var(--shadow-color) l c h / 0.04),
-      0 1px 3px oklch(from var(--shadow-color) l c h / 0.06);
-
-    --shadow-sm:
-      0 2px 4px oklch(from var(--shadow-color) l c h / 0.04),
-      0 3px 6px oklch(from var(--shadow-color) l c h / 0.06);
+    --_soft: clamp(0, min(var(--shadow-style), 2 - var(--shadow-style)), 1);
+    --_hard: clamp(0, var(--shadow-style) - 1, 1);
+    --shadow-color: oklch(from var(--neutral-tint) 0.22 calc(c * 7) h);
+    --_hard-2: calc(var(--shadow-offset) * var(--_hard));
 
+    /* v2 reads only --shadow-md (the elevated card; compare.css), so
+       --shadow-style changes only that. The other 1.x steps had no reader
+       in core and were removed (base v2): --shadow-xs, --shadow-sm,
+       --shadow-lg, --shadow-xl, --shadow-glow, --_hard-1, --_hard-3. A page
+       that still reads one gets no shadow, as it did at --shadow-style 0. */
     --shadow-md:
-      0 4px 8px oklch(from var(--shadow-color) l c h / 0.04),
-      0 6px 12px oklch(from var(--shadow-color) l c h / 0.08);
-
-    --shadow-lg:
-      0 8px 16px oklch(from var(--shadow-color) l c h / 0.04),
-      0 12px 24px oklch(from var(--shadow-color) l c h / 0.08);
-
-    --shadow-xl:
-      0 16px 32px oklch(from var(--shadow-color) l c h / 0.06),
-      0 24px 48px oklch(from var(--shadow-color) l c h / 0.1);
-
-    /* Inset shadow for depth */
-    --shadow-inset: inset 0 2px 4px oklch(from var(--shadow-color) l c h / 0.06);
-
-    /* Glow for focus states */
-    --shadow-glow: 0 0 0 3px color-mix(in oklch, var(--accent) 30%, transparent);
-
-    /* Offset shadow for rapids/brutalist theme */
-    --shadow-offset: 4px 4px 0 oklch(0 0 0 / 0.12);
-    --shadow-offset-hover: 6px 6px 0 oklch(0 0 0 / 0.15);
-
-    /* Rating color (stars, reviews) */
-    --color-rating: oklch(75% 0.18 85);
+      0 4px 8px oklch(from var(--shadow-color) l c h / calc(0.04 * var(--_soft))),
+      0 8px 20px oklch(from var(--shadow-color) l c h / calc(0.07 * var(--_soft))),
+      var(--_hard-2) var(--_hard-2) 0 var(--_hard-color);
+    --_hard-color: light-dark(
+      oklch(from var(--neutral-tint) 0.18 c h),
+      oklch(from var(--neutral-tint) 0.45 c h)
+    );
 
 
     /* ========================================
-       Z-INDEX SCALE
-       Predictable stacking
+       Z-INDEX
        ======================================== */
 
     --z-base: 0;
@@ -314,2103 +317,250 @@
     --z-toast: 1500;
     --z-tooltip: 1600;
     --z-max: 9999;
-
-
-    /* Note: --opacity-* scale removed (unused).
-       Opacity values are applied inline where needed. */
   }
 
 
   /* ========================================
-     DARK MODE
-     Simply invert the semantic mappings
+     COLOUR ROLES: THE ROLE SCOPE
+     Every role is declared here, once. To add a dark surface later, add its
+     selector here and to the band rule below; nothing else changes.
      ======================================== */
 
-  @media (prefers-color-scheme: dark) {
-    :root {
-      /* Base dark mode: subtle cool tint (not pure black) */
-      --color-text: oklch(92% 0.01 220);
-      --color-text-muted: oklch(65% 0.01 220);
-      --color-text-subtle: oklch(50% 0.01 220);
-
-      --color-background: oklch(13% 0.02 230);
-      --color-surface: oklch(17% 0.02 230);
-      --color-surface-raised: oklch(21% 0.02 230);
-
-      --color-border: oklch(25% 0.025 230);
-      --color-border-subtle: oklch(20% 0.02 230);
-
-      /* Deeper shadows in dark mode */
-      --shadow-opacity: 0.25;
-
-      /* Slightly brighter feedback colors for dark backgrounds */
-      --color-success: oklch(65% 0.15 145);
-      --color-warning: oklch(75% 0.15 70);
-      --color-error: oklch(65% 0.18 25);
-      --color-info: oklch(65% 0.12 240);
-
-      /* Darker subtle backgrounds */
-      --color-success-subtle: oklch(20% 0.04 145);
-      --color-warning-subtle: oklch(20% 0.05 70);
-      --color-error-subtle: oklch(20% 0.04 25);
-      --color-info-subtle: oklch(20% 0.03 240);
-
-      /* Stronger offset shadows for dark backgrounds */
-      --shadow-offset: 4px 4px 0 oklch(0% 0 0 / 0.4);
-      --shadow-offset-hover: 6px 6px 0 oklch(0% 0 0 / 0.5);
-    }
-  }
-
-  /* Manual dark mode override (base — presets override below) */
-  [data-theme="dark"] {
-    --color-text: oklch(92% 0.01 220);
-    --color-text-muted: oklch(65% 0.01 220);
-    --color-text-subtle: oklch(50% 0.01 220);
-
-    --color-background: oklch(13% 0.02 230);
-    --color-surface: oklch(17% 0.02 230);
-    --color-surface-raised: oklch(21% 0.02 230);
-
-    --color-border: oklch(25% 0.025 230);
-    --color-border-subtle: oklch(20% 0.02 230);
-
-    --shadow-opacity: 0.25;
-
-    --color-success: oklch(65% 0.15 145);
-    --color-warning: oklch(75% 0.15 70);
-    --color-error: oklch(65% 0.18 25);
-    --color-info: oklch(65% 0.12 240);
-
-    --color-success-subtle: oklch(20% 0.04 145);
-    --color-warning-subtle: oklch(20% 0.05 70);
-    --color-error-subtle: oklch(20% 0.04 25);
-    --color-info-subtle: oklch(20% 0.03 240);
-
-    --shadow-offset: 4px 4px 0 oklch(0% 0 0 / 0.4);
-    --shadow-offset-hover: 6px 6px 0 oklch(0% 0 0 / 0.5);
-  }
-
-  /* Manual light mode override */
-  [data-theme="light"] {
-    --color-text: var(--gray-15);
-    --color-text-muted: var(--gray-40);
-    --color-text-subtle: var(--gray-55);
-
-    --color-background: var(--white);
-    --color-surface: var(--gray-98);
-    --color-surface-raised: var(--white);
-
-    --color-border: var(--gray-85);
-    --color-border-subtle: var(--gray-90);
+  :root,
+  :is(.section, section)[data-bg="inverse"],
+  .hero[data-theme="dark"],
+  .site-footer[data-dark],
+  .nav:not([data-bg="plain"], [data-variant="transparent"]), .nav[data-bg="inverse"] {
+    --black: oklch(0% 0 0);
+    --white: oklch(100% 0 0);
 
-    --shadow-opacity: 0.08;
-  }
+    /* Dark: lifted to L 0.78 with the chroma capped, so a deep accent
+       reads as a dusty tint of itself, not salmon. */
+    --accent-ink: light-dark(
+      oklch(from var(--accent) min(l, 0.45) c h),
+      oklch(from var(--accent) max(l, 0.78) min(c, 0.08) h)
+    );
+
+    --color-text: light-dark(
+      oklch(from var(--neutral-tint) 0.17 c h),
+      oklch(from var(--neutral-tint) 0.93 c h)
+    );
+    --color-text-muted: light-dark(
+      oklch(from var(--neutral-tint) 0.44 c h),
+      oklch(from var(--neutral-tint) 0.74 c h)
+    );
+    --color-text-subtle: light-dark(
+      oklch(from var(--neutral-tint) 0.48 c h),
+      oklch(from var(--neutral-tint) 0.68 c h)
+    );
+
+    --color-background: light-dark(
+      oklch(from var(--neutral-tint) 0.99 calc(c * 0.75) h),
+      oklch(from var(--neutral-tint) 0.145 calc(c * 1.5) h)
+    );
+    --color-surface: light-dark(
+      oklch(from var(--neutral-tint) 0.955 c h),
+      oklch(from var(--neutral-tint) 0.19 calc(c * 1.5) h)
+    );
+    --color-surface-raised: light-dark(
+      oklch(from var(--neutral-tint) 1 calc(c * 0.4) h),
+      oklch(from var(--neutral-tint) 0.22 calc(c * 1.5) h)
+    );
+
+    /* --color-border is decoration (hairlines); --color-border-strong is ink:
+       rules that mean something, and field edges. */
+    --color-border: light-dark(
+      oklch(from var(--neutral-tint) 0.86 c h),
+      oklch(from var(--neutral-tint) 0.30 calc(c * 1.75) h)
+    );
+    --color-border-subtle: light-dark(
+      oklch(from var(--neutral-tint) 0.92 calc(c * 0.75) h),
+      oklch(from var(--neutral-tint) 0.22 calc(c * 1.5) h)
+    );
+    --color-border-strong: light-dark(
+      oklch(from var(--neutral-tint) 0.17 c h),
+      oklch(from var(--neutral-tint) 0.93 c h)
+    );
+
+    /* A warm wash, not a pink: 7% (oklab: an oklch mix takes the
+       near-neutral hue path; blue + warm paper gave olive). */
+    --accent-subtle: color-mix(in oklab, var(--accent) 7%, var(--color-background));
+    /* Hover moves the fill away from its text: darker under white text,
+       lighter under dark text. */
+    --accent-hover: oklch(from var(--accent) calc(l - 0.06 + 0.12 * clamp(0, (l - 0.575) * 1000, 1)) c h);
+
+    /* The fill of a primary action (button, nav CTA). Light: the accent.
+       Dark: only an accent darker than L 0.5 is lifted, to 0.5, so it
+       stands off the near-black page and stays deep (0.62 turned oxblood
+       salmon and moved every brand at 0.45-0.6). Its text is --on-accent
+       in both schemes: white clears 4.5:1 on any hue at L 0.5, and an
+       accent the lift leaves alone keeps the text its theme chose. */
+    --accent-fill: light-dark(var(--accent), oklch(from var(--accent) max(l, 0.5) c h));
+    --on-accent-fill: var(--on-accent);
+    --accent-fill-hover: oklch(from var(--accent-fill) calc(l - 0.06 + 0.12 * clamp(0, (l - 0.575) * 1000, 1)) c h);
+
+    --color-focus: var(--accent-ink);
+    --color-selection: var(--accent-subtle);
 
+    /* Feedback. The plain colour is for text and icons (it clears 4.5:1 on
+       the page); -fill is a solid background, -on its text; -subtle a tint. */
+    --color-success: light-dark(oklch(45% 0.13 145), oklch(78% 0.14 145));
+    --color-warning: light-dark(oklch(48% 0.11 70), oklch(82% 0.13 80));
+    --color-error: light-dark(oklch(48% 0.17 25), oklch(76% 0.13 25));
+    --color-info: light-dark(oklch(46% 0.12 240), oklch(78% 0.10 240));
 
-  /* ========================================
-     PRESET-SPECIFIC DARK MODE
-     Each preset uses deep colors from its palette
-     instead of generic black/gray.
-     "Dark" = majority deep color, not black.
-     ======================================== */
+    --color-success-fill: oklch(48% 0.13 145);
+    --color-warning-fill: oklch(80% 0.15 80);
+    --color-error-fill: oklch(52% 0.19 25);
+    --color-info-fill: oklch(50% 0.12 240);
 
-  /* --- STILL: Deep cool slate ---
-     Mono palette, hue 250. Quiet, disciplined dark. */
-  [data-motion="still"][data-theme="dark"],
-  [data-theme="dark"] [data-motion="still"],
-  [data-theme="dark"]:root[data-motion="still"] {
-    --color-background: oklch(12% 0.015 250);
-    --color-surface: oklch(16% 0.015 250);
-    --color-surface-raised: oklch(20% 0.015 250);
-    --color-text: oklch(88% 0.01 250);
-    --color-text-muted: oklch(65% 0.01 250);
-    --color-text-subtle: oklch(50% 0.01 250);
-    --color-border: oklch(25% 0.02 250);
-    --color-border-subtle: oklch(20% 0.015 250);
-  }
+    --color-success-on: var(--white);
+    --color-warning-on: oklch(20% 0.03 70);
+    --color-error-on: var(--white);
+    --color-info-on: var(--white);
 
-  /* --- SERENE: Warm deep taupe ---
-     Morandi palette, hue 60. Like a dimly lit gallery. */
-  [data-motion="serene"][data-theme="dark"],
-  [data-theme="dark"] [data-motion="serene"],
-  [data-theme="dark"]:root[data-motion="serene"] {
-    --color-background: oklch(13% 0.015 60);
-    --color-surface: oklch(17% 0.02 60);
-    --color-surface-raised: oklch(21% 0.02 60);
-    --color-text: oklch(88% 0.01 60);
-    --color-text-muted: oklch(65% 0.01 60);
-    --color-text-subtle: oklch(50% 0.01 60);
-    --color-border: oklch(25% 0.015 60);
-    --color-border-subtle: oklch(20% 0.015 60);
-  }
+    --color-success-subtle: light-dark(oklch(95% 0.03 145), oklch(24% 0.05 145));
+    --color-warning-subtle: light-dark(oklch(95% 0.04 70), oklch(24% 0.05 70));
+    --color-error-subtle: light-dark(oklch(95% 0.03 25), oklch(24% 0.05 25));
+    --color-info-subtle: light-dark(oklch(95% 0.02 240), oklch(24% 0.04 240));
 
-  /* --- STREAM: Deep teal-gray ---
-     Subtle palette, hue 200. Modern, cool, techy. */
-  [data-motion="stream"][data-theme="dark"],
-  [data-theme="dark"] [data-motion="stream"],
-  [data-theme="dark"]:root[data-motion="stream"] {
-    --color-background: oklch(12% 0.02 200);
-    --color-surface: oklch(16% 0.02 200);
-    --color-surface-raised: oklch(20% 0.02 200);
-    --color-text: oklch(90% 0.01 200);
-    --color-text-muted: oklch(65% 0.01 200);
-    --color-text-subtle: oklch(50% 0.01 200);
-    --color-border: oklch(24% 0.02 200);
-    --color-border-subtle: oklch(19% 0.02 200);
-  }
+    --color-rating: oklch(75% 0.18 85);   /* star glyphs; decorative, paired with text */
 
-  /* --- FLOWING: Deep ocean blue (default) ---
-     Fluid palette, hue 230. Like deep water at dusk. */
-  [data-motion="flowing"][data-theme="dark"],
-  [data-theme="dark"] [data-motion="flowing"],
-  [data-theme="dark"]:root[data-motion="flowing"],
-  [data-theme="dark"]:root:not([data-motion]) {
-    --color-background: oklch(13% 0.025 230);
-    --color-surface: oklch(17% 0.025 230);
-    --color-surface-raised: oklch(21% 0.025 230);
-    --color-text: oklch(92% 0.01 220);
-    --color-text-muted: oklch(68% 0.01 220);
-    --color-text-subtle: oklch(52% 0.01 220);
-    --color-border: oklch(25% 0.03 230);
-    --color-border-subtle: oklch(20% 0.025 230);
   }
 
-  /* --- CASCADE: Deep lavender ---
-     Pastel palette, hue 280. Warm purple twilight. */
-  [data-motion="cascade"][data-theme="dark"],
-  [data-theme="dark"] [data-motion="cascade"],
-  [data-theme="dark"]:root[data-motion="cascade"] {
-    --color-background: oklch(14% 0.02 280);
-    --color-surface: oklch(18% 0.025 280);
-    --color-surface-raised: oklch(22% 0.025 280);
-    --color-text: oklch(90% 0.01 280);
-    --color-text-muted: oklch(66% 0.01 280);
-    --color-text-subtle: oklch(50% 0.01 280);
-    --color-border: oklch(26% 0.02 280);
-    --color-border-subtle: oklch(21% 0.02 280);
+  /* The dark bands: the scheme and the weight boost only. The paint and
+     the text colour are in the layouts layer (src/fluid.css, the band
+     rules); the hero and the footer paint their own. The page colour
+     follows the band's paint, so fields, rings and --accent-subtle (mixed
+     with --color-background) match the surface they sit on. */
+  :is(.section, section)[data-bg="inverse"],
+  .hero[data-theme="dark"],
+  .site-footer[data-dark] {
+    color-scheme: dark;
+    --_dark-weight: 30;
+    --color-background: var(--band-inverse);
   }
 
-  /* --- RAPIDS: Deep warm ember ---
-     Bold palette, hue 25. Smoldering, aggressive, warm. */
-  [data-motion="rapids"][data-theme="dark"],
-  [data-theme="dark"] [data-motion="rapids"],
-  [data-theme="dark"]:root[data-motion="rapids"] {
-    --color-background: oklch(11% 0.03 25);
-    --color-surface: oklch(15% 0.03 25);
-    --color-surface-raised: oklch(19% 0.03 25);
-    --color-text: oklch(92% 0.01 25);
-    --color-text-muted: oklch(67% 0.01 25);
-    --color-text-subtle: oklch(50% 0.01 25);
-    --color-border: oklch(24% 0.04 25);
-    --color-border-subtle: oklch(19% 0.03 25);
-  }
+  /* The OS decides unless the page says otherwise. */
+  :root[data-theme="light"] { color-scheme: light; }
+  :root[data-theme="dark"] { color-scheme: dark; --_dark-weight: 30; }
 
-  /* --- TSUNAMI: Deepest navy abyss ---
-     Tsunami palette, hue 250. Ocean trench depth. */
-  [data-motion="tsunami"][data-theme="dark"],
-  [data-theme="dark"] [data-motion="tsunami"],
-  [data-theme="dark"]:root[data-motion="tsunami"] {
-    --color-background: oklch(10% 0.04 250);
-    --color-surface: oklch(14% 0.04 250);
-    --color-surface-raised: oklch(18% 0.04 250);
-    --color-text: oklch(90% 0.015 200);
-    --color-text-muted: oklch(65% 0.015 200);
-    --color-text-subtle: oklch(48% 0.01 200);
-    --color-border: oklch(22% 0.05 240);
-    --color-border-subtle: oklch(17% 0.04 240);
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) { --_dark-weight: 30; }
   }
 
-
-  /* ========================================
-     HIGH CONTRAST ADJUSTMENTS
-     Respect user preferences
-     ======================================== */
-
-  @media (prefers-contrast: high) {
-    :root {
-      --color-border: var(--gray-50);
-      --color-text-muted: var(--color-text);
-    }
+  /* The nav is the page's other scheme by default, roles and all: a dark
+     bar on a light page, a light bar on a dark one (not the band paint,
+     which stays dark in dark mode). data-bg="plain" or a transparent bar
+     keeps the page's colours; data-bg="inverse" still forces it. */
+  .nav:not([data-bg="plain"], [data-variant="transparent"]), .nav[data-bg="inverse"] {
+    color-scheme: dark;
+    --_dark-weight: 30;
+    /* Plain text and icons in the bar follow its ink (nav.css). */
+    color: var(--nav-ink, var(--color-text));
+    /* A band's button inversion (accent-strong) is not the bar's. */
+    --_btn-color: initial;
+    --_btn-bg: initial;
+    --_btn-bg-hover: initial;
   }
+  :root[data-theme="dark"] :is(.nav:not([data-bg="plain"], [data-variant="transparent"]), .nav[data-bg="inverse"]) { color-scheme: light; --_dark-weight: 0; }
 
-
-  /* ========================================
-     REDUCED MOTION
-     Respect user preferences
-     ======================================== */
-
-  @media (prefers-reduced-motion: reduce) {
-    :root {
-      --duration-instant: 0ms;
-      --duration-fast: 0ms;
-      --duration-normal: 0ms;
-      --duration-slow: 0ms;
-      --duration-slower: 0ms;
-      --duration-slowest: 0ms;
-      --motion-scale: 0;
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) :is(.nav:not([data-bg="plain"], [data-variant="transparent"]), .nav[data-bg="inverse"]) { color-scheme: light; --_dark-weight: 0; }
+  }
+
+  /* Legacy floor. The roles derive from the knobs with relative colour
+     (Safari 18, Firefox 128, Chrome 119). An older browser cannot compute
+     them and would lose text and surface colours, so it gets plain light
+     values with the default tint instead: readable, not themed. Dark bands
+     go light with no paint. */
+  @supports not (color: oklch(from red min(l, 0.5) c h)) {
+    :root,
+    :root[data-theme],
+    :is(.section, section)[data-bg="inverse"],
+    .hero[data-theme="dark"],
+    .site-footer[data-dark],
+    :root :is(.nav:not([data-bg="plain"], [data-variant="transparent"]), .nav[data-bg="inverse"]) {
+      color-scheme: light;
+      --color-text: oklch(17% 0.01 75);
+      --color-text-muted: oklch(44% 0.01 75);
+      --color-text-subtle: oklch(48% 0.01 75);
+      --color-background: oklch(99% 0.0075 75);
+      --color-surface: oklch(95.5% 0.01 75);
+      --color-surface-raised: oklch(100% 0.004 75);
+      --color-border: oklch(86% 0.01 75);
+      --color-border-subtle: oklch(92% 0.0075 75);
+      --color-border-strong: oklch(17% 0.01 75);
+      --accent-ink: color-mix(in oklch, var(--accent) 45%, var(--color-text));
+      --on-accent: var(--white);   /* a site with a light accent sets --on-accent itself */
+      --accent-hover: color-mix(in oklch, var(--accent) 85%, var(--black));
+      --accent-fill: var(--accent);
+      --on-accent-fill: var(--on-accent);
+      --accent-fill-hover: var(--accent-hover);
+      --_dark-weight: 0;
+    }
+
+    :is(.section, section)[data-bg="inverse"],
+    .hero[data-theme="dark"],
+    .site-footer[data-dark] {
+      --band-inverse: var(--color-background);
+      background: none;
     }
   }
 
 
   /* ========================================
-     MOTION INTENSITY PRESETS - Water Themes
-     Apply to root: <html data-motion="flowing">
-
-     Each level defines:
-     - Timing (durations)
-     - Easing (curves)
-     - Direction (page transitions)
-     - Character (how elements move)
-     ======================================== */
-
-  /* === STILL: Instant, no animation ===
-     Like perfectly still water - no movement at all.
-     For users who prefer no motion or maximum performance.
-     Layout: Swiss design, structured, grid-based, minimal decoration.
-     Character: Precise, no-nonsense, Müller-Brockmann. */
-  :root[data-motion="still"],
-  [data-motion="still"] {
-    --motion-scale: 0;
-    --duration-instant: 0ms;
-    --duration-fast: 0ms;
-    --duration-normal: 0ms;
-    --duration-slow: 0ms;
-    --duration-slower: 0ms;
-    --duration-slowest: 0ms;
-    --ease-fluid: linear;
-    --ease-settle: linear;
-
-    /* Typography: tight, precise, functional */
-    --leading-normal: 1.5;
-    --leading-tight: 1.15;
-    --tracking-normal: 0;
-    --tracking-wide: 0.05em;
-
-    /* Layout: Swiss design, precise, grid-focused, compact */
-    --space-section: var(--space-12);
-    --space-gutter: var(--space-5);
-    --container-content: var(--container-lg);
-
-    /* Sharp corners — zero radius across the board */
-    --radius-sm: 0;
-    --radius-md: 2px;
-    --radius-lg: 2px;
-    --radius-xl: 4px;
-    --radius-2xl: 4px;
-    --radius-card: 0;
-    --radius-button: 0;
-    --radius-input: 2px;
-
-    /* Flat, crisp — no soft shadows, only sharp lines */
-    --shadow-xs: none;
-    --shadow-sm: none;
-    --shadow-md: 0 1px 2px oklch(from var(--shadow-color) l c h / 0.1);
-    --shadow-lg: 0 2px 4px oklch(from var(--shadow-color) l c h / 0.1);
-    --shadow-xl: 0 3px 6px oklch(from var(--shadow-color) l c h / 0.12);
-
-    /* Thicker borders — structure through lines, not shadows */
-    --border-width: 1.5px;
-    --border-width-thick: 3px;
-  }
-
-  /* === SERENE: Ken Burns effect ===
-     Like gazing at a reflection in still water.
-     Very slow crossfades, gentle zoom on images.
-     Meditative, contemplative motion.
-     Layout: Generous whitespace, classical proportions, soft edges.
-     Character: Classical, literary, spa-like, timeless. */
-  :root[data-motion="serene"],
-  [data-motion="serene"] {
-    --motion-scale: 0.3;
-    --duration-instant: 200ms;
-    --duration-fast: 600ms;
-    --duration-normal: 1000ms;
-    --duration-slow: 1500ms;
-    --duration-slower: 2000ms;
-    --duration-slowest: 3000ms;
-    --ease-fluid: cubic-bezier(0.25, 0.1, 0.25, 1); /* Very gentle */
-    --ease-settle: cubic-bezier(0.25, 0.1, 0.25, 1);
-    /* Ken Burns zoom amount for images */
-    --kenburns-scale: 1.05;
-
-    /* Typography: generous, literary, breathable */
-    --leading-normal: 1.8;
-    --leading-relaxed: 2;
-    --tracking-normal: 0.01em;
-    --tracking-wide: 0.08em;
-
-    /* Layout: Editorial, soft rounded corners, NOT full width */
-    --space-section: var(--space-24);
-    --space-gutter: var(--space-10);
-    --container-prose: 38rem;
-    --container-content: var(--container-md);  /* Narrower content */
-    --container-xl: var(--container-lg);        /* Constrain max width */
-
-    /* Soft, pillowy corners — cloud-like */
-    --radius-sm: 8px;
-    --radius-md: 16px;
-    --radius-lg: 24px;
-    --radius-xl: 32px;
-    --radius-2xl: 40px;
-    --radius-card: 24px;
-    --radius-button: 9999px;  /* Pill buttons */
-    --radius-input: 16px;
-
-    /* Whisper-soft diffuse shadows — barely visible depth */
-    --shadow-xs: 0 2px 8px oklch(from var(--shadow-color) l c h / 0.02);
-    --shadow-sm: 0 4px 12px oklch(from var(--shadow-color) l c h / 0.03);
-    --shadow-md: 0 8px 24px oklch(from var(--shadow-color) l c h / 0.05);
-    --shadow-lg: 0 16px 48px oklch(from var(--shadow-color) l c h / 0.06);
-    --shadow-xl: 0 24px 64px oklch(from var(--shadow-color) l c h / 0.07);
-
-    /* Thin, delicate borders */
-    --border-width: 1px;
-    --border-width-thick: 1.5px;
-  }
-
-  /* === TRICKLING: Minimal, quick motion ===
-     Like a small brook - slight movement, nothing dramatic.
-     Quick, subtle feedback for interactions.
-     Layout: Compact, efficient, subtle styling.
-     Character: Understated, utility-first, developer-friendly. */
-  :root[data-motion="trickling"],
-  [data-motion="trickling"] {
-    --motion-scale: 0.5;
-    --duration-fast: 100ms;
-    --duration-normal: 175ms;
-    --duration-slow: 250ms;
-    --ease-fluid: cubic-bezier(0.4, 0, 0.2, 1);
-
-    /* Typography: compact, efficient */
-    --leading-normal: 1.55;
-    --tracking-normal: 0;
-
-    /* Layout: Understated, efficient use of space */
-    --space-section: var(--space-12);
-    --space-gutter: var(--space-5);
-    --container-content: var(--container-lg);
-
-    /* Small, subtle radius — functional */
-    --radius-sm: 3px;
-    --radius-md: 6px;
-    --radius-lg: 8px;
-    --radius-xl: 12px;
-    --radius-2xl: 16px;
-    --radius-card: 8px;
-    --radius-button: 6px;
-    --radius-input: 6px;
-
-    /* Minimal shadows — only when needed */
-    --shadow-xs: 0 1px 2px oklch(from var(--shadow-color) l c h / 0.04);
-    --shadow-sm: 0 1px 3px oklch(from var(--shadow-color) l c h / 0.06);
-    --shadow-md: 0 2px 6px oklch(from var(--shadow-color) l c h / 0.06);
-    --shadow-lg: 0 4px 12px oklch(from var(--shadow-color) l c h / 0.08);
-  }
-
-  /* === STREAM: Horizontal flow ===
-     Like a gentle stream - content flows sideways.
-     Modern, tech-forward feel.
-     Layout: Clean lines, horizontal emphasis, full-width.
-     Character: Open, approachable, tech-forward, SaaS-like. */
-  :root[data-motion="stream"],
-  [data-motion="stream"] {
-    --motion-scale: 0.7;
-    --duration-fast: 150ms;
-    --duration-normal: 300ms;
-    --duration-slow: 450ms;
-    --ease-fluid: cubic-bezier(0.22, 1, 0.36, 1);
-    --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
-
-    /* Typography: open, readable, generous */
-    --leading-normal: 1.6;
-    --tracking-normal: 0.01em;
-
-    /* Layout: Modern, wide, clean horizontal lines */
-    --space-section: var(--space-16);
-    --space-gutter: var(--space-6);
-    --container-content: var(--container-xl);
-
-    /* Medium, consistent radius — modern SaaS feel */
-    --radius-sm: 4px;
-    --radius-md: 8px;
-    --radius-lg: 12px;
-    --radius-xl: 16px;
-    --radius-2xl: 20px;
-    --radius-card: 12px;
-    --radius-button: 8px;
-    --radius-input: 8px;
-
-    /* Subtle, diffuse shadows — glass-like depth */
-    --shadow-sm: 0 1px 3px oklch(from var(--shadow-color) l c h / 0.03);
-    --shadow-md:
-      0 2px 6px oklch(from var(--shadow-color) l c h / 0.04),
-      0 4px 16px oklch(from var(--shadow-color) l c h / 0.04);
-    --shadow-lg:
-      0 4px 12px oklch(from var(--shadow-color) l c h / 0.04),
-      0 12px 36px oklch(from var(--shadow-color) l c h / 0.06);
-  }
-
-  /* === FLOWING: Connected horizontal flow (default) ===
-     Like a gentle stream - content flows left to right.
-     Old content pushes out as new content slides in.
-     The default, balanced motion style.
-     Layout: Balanced, organic, versatile.
-     Character: Friendly, professional, the "just right" preset. */
-  :root[data-motion="flowing"],
-  [data-motion="flowing"],
-  :root:not([data-motion]) {
-    --motion-scale: 1;
-    --ease-fluid: cubic-bezier(0.33, 0, 0.2, 1);
-    --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
-
-    /* Typography: comfortable, readable */
-    --leading-normal: 1.65;
-    --tracking-normal: 0;
-
-    /* Layout: Balanced, roomy but not extravagant */
-    --space-section: var(--space-16);
-    --space-gutter: var(--space-6);
-    --container-content: var(--container-xl);
-
-    /* Organic rounded corners */
-    --radius-sm: 6px;
-    --radius-md: 10px;
-    --radius-lg: 14px;
-    --radius-xl: 18px;
-    --radius-2xl: 24px;
-    --radius-card: 14px;
-    --radius-button: 10px;
-    --radius-input: 10px;
-
-    /* Layered, organic shadows */
-    --shadow-sm:
-      0 2px 4px oklch(from var(--shadow-color) l c h / 0.04),
-      0 4px 8px oklch(from var(--shadow-color) l c h / 0.04);
-    --shadow-md:
-      0 4px 8px oklch(from var(--shadow-color) l c h / 0.04),
-      0 8px 16px oklch(from var(--shadow-color) l c h / 0.06);
-    --shadow-lg:
-      0 8px 16px oklch(from var(--shadow-color) l c h / 0.04),
-      0 16px 32px oklch(from var(--shadow-color) l c h / 0.08);
-  }
-
-  /* === CASCADE: Waterfall effect ===
-     Like a waterfall - content cascades down in layers.
-     Playful, friendly, staggered animations.
-     Layout: Rounded, warm, approachable, bubbly.
-     Character: Rounded, warm, Notion/Slack vibes. */
-  :root[data-motion="cascade"],
-  [data-motion="cascade"] {
-    --motion-scale: 1.2;
-    --duration-fast: 200ms;
-    --duration-normal: 350ms;
-    --duration-slow: 500ms;
-    --ease-fluid: cubic-bezier(0.34, 1.56, 0.64, 1); /* Slight bounce */
-    --ease-settle: cubic-bezier(0.22, 1.2, 0.36, 1);
-
-    /* Typography: round, friendly, slightly loose */
-    --leading-normal: 1.7;
-    --tracking-normal: 0.01em;
-
-    /* Layout: Friendly, bubbly, generous gaps */
-    --space-section: var(--space-16);
-    --space-gutter: var(--space-6);
-    --container-content: var(--container-xl);
-
-    /* Maximum roundness — bubble shapes */
-    --radius-sm: 8px;
-    --radius-md: 16px;
-    --radius-lg: 24px;
-    --radius-xl: 32px;
-    --radius-2xl: 48px;
-    --radius-card: 20px;
-    --radius-button: 9999px;  /* Pill buttons */
-    --radius-input: 12px;
-
-    /* Soft, colorful shadows — warm and friendly */
-    --shadow-xs: 0 2px 6px oklch(from var(--shadow-color) l c h / 0.05);
-    --shadow-sm: 0 3px 8px oklch(from var(--shadow-color) l c h / 0.06);
-    --shadow-md: 0 4px 12px oklch(from var(--shadow-color) l c h / 0.08);
-    --shadow-lg: 0 8px 24px oklch(from var(--shadow-color) l c h / 0.12);
-    --shadow-xl: 0 16px 40px oklch(from var(--shadow-color) l c h / 0.14);
-  }
-
-  /* === RAPIDS: Vertical spring effect ===
-     Like rushing water - new content rushes in from top,
-     accelerates, then pulls the old content away.
-     Energetic, bouncy, with overshoot.
-     Layout: Compact, bold, athletic.
-     Character: Athletic, bold, Stripe/Vercel energy. */
-  :root[data-motion="rapids"],
-  [data-motion="rapids"] {
-    --motion-scale: 1.5;
-    --duration-fast: 250ms;
-    --duration-normal: 450ms;
-    --duration-slow: 650ms;
-    --ease-fluid: cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy overshoot */
-    --ease-settle: cubic-bezier(0.22, 1.4, 0.36, 1); /* Spring settle */
-    /* Stagger delay for layered effect */
-    --rapids-stagger: 80ms;
-
-    /* Typography: tight, condensed, punchy */
-    --leading-normal: 1.45;
-    --leading-tight: 1.1;
-    --tracking-normal: -0.01em;
-    --tracking-wide: 0.08em;
-
-    /* Layout: Tight, punchy, high-energy, full-width */
-    --space-section: var(--space-12);
-    --space-gutter: var(--space-4);
-    --container-content: var(--container-2xl);
-
-    /* Small, functional radius */
-    --radius-sm: 4px;
-    --radius-md: 8px;
-    --radius-lg: 12px;
-    --radius-xl: 16px;
-    --radius-2xl: 20px;
-    --radius-card: 12px;
-    --radius-button: 8px;
-    --radius-input: 6px;
-
-    /* Hard, high-contrast shadows — strong depth */
-    --shadow-xs: 0 1px 2px oklch(from var(--shadow-color) l c h / 0.1);
-    --shadow-sm: 0 2px 4px oklch(from var(--shadow-color) l c h / 0.12);
-    --shadow-md: 0 4px 8px oklch(from var(--shadow-color) l c h / 0.15);
-    --shadow-lg: 0 8px 16px oklch(from var(--shadow-color) l c h / 0.2);
-    --shadow-xl: 0 16px 32px oklch(from var(--shadow-color) l c h / 0.25);
-
-    /* Bold borders */
-    --border-width: 2px;
-    --border-width-thick: 3px;
-  }
-
-  /* === TSUNAMI: Diagonal wave crash ===
-     Maximum impact - content crashes in diagonally
-     like a wave breaking. Strong overshoot, dramatic.
-     For bold, attention-grabbing interfaces.
-     Layout: Bold, edge-to-edge, asymmetric corners.
-     Character: Imposing, cinematic, Hokusai wave. */
-  :root[data-motion="tsunami"],
-  [data-motion="tsunami"] {
-    --motion-scale: 2;
-    --duration-fast: 350ms;
-    --duration-normal: 600ms;
-    --duration-slow: 900ms;
-    --ease-fluid: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Strong overshoot */
-    --ease-settle: cubic-bezier(0.34, 1.8, 0.64, 1); /* Dramatic settle */
-
-    /* Typography: bold, wide-set, commanding */
-    --leading-normal: 1.5;
-    --leading-tight: 1.05;
-    --tracking-normal: 0;
-    --tracking-wide: 0.15em;
-
-    /* Layout: Bold, edge-to-edge, maximum impact */
-    --space-section: var(--space-20);
-    --space-gutter: var(--space-6);
-    --container-content: 100%;  /* Full width */
-    --container-xl: 100%;
-
-    /* Asymmetric corners: ONE rounded, THREE sharp */
-    --radius-sm: 0;
-    --radius-md: 0;
-    --radius-lg: 0;
-    --radius-xl: 0;
-    --radius-2xl: 0;
-    --radius-card: 0;
-    --radius-button: 0;
-    --radius-input: 0;
-    /* Special asymmetric radius for cards/containers */
-    --radius-asymmetric: 0 24px 0 0;  /* Only top-right rounded */
-    --radius-asymmetric-alt: 24px 0 0 0;  /* Only top-left rounded */
-    --radius-asymmetric-lg: 0 48px 0 0;
-
-    /* Dramatic, heavy shadows — cinematic depth */
-    --shadow-xs: 0 2px 4px oklch(from var(--shadow-color) l c h / 0.1);
-    --shadow-sm: 0 4px 8px oklch(from var(--shadow-color) l c h / 0.12);
-    --shadow-md: 0 8px 24px oklch(from var(--shadow-color) l c h / 0.2);
-    --shadow-lg: 0 16px 48px oklch(from var(--shadow-color) l c h / 0.25);
-    --shadow-xl: 0 24px 64px oklch(from var(--shadow-color) l c h / 0.3);
-
-    /* Heavy borders — structural, bold */
-    --border-width: 2px;
-    --border-width-thick: 4px;
-  }
-
-
-  /* ========================================
-     PAGE TRANSITIONS - View Transitions API
-     Each motion style has its own transition
+     USER PREFERENCES
      ======================================== */
 
-  /* Enable cross-document view transitions */
-  @view-transition {
-    navigation: auto;
-  }
-
-  /* --- Keyframes library --- */
-
-  /* Fade */
-  @keyframes fade-out {
-    to { opacity: 0; }
-  }
-
-  @keyframes fade-in {
-    from { opacity: 0; }
-  }
-
-  /* Horizontal slide (Flowing) - Smooth L→R with organic ease */
-  @keyframes flowing-out {
-    0% {
-      transform: translateX(0);
-      opacity: 1;
-    }
-    /* Gentle start */
-    30% {
-      transform: translateX(15%);
-      opacity: 0.9;
-    }
-    /* Peak momentum */
-    60% {
-      transform: translateX(50%);
-      opacity: 0.6;
-    }
-    /* Slow, organic finish */
-    100% {
-      transform: translateX(100%);
-      opacity: 0;
-    }
-  }
-
-  @keyframes flowing-in {
-    0% {
-      transform: translateX(-100%);
-      opacity: 0;
-    }
-    /* Gentle start from left */
-    30% {
-      transform: translateX(-50%);
-      opacity: 0.4;
-    }
-    /* Peak momentum */
-    60% {
-      transform: translateX(-15%);
-      opacity: 0.8;
-    }
-    /* Slow, organic settle - ease out gently */
-    85% {
-      transform: translateX(-3%);
-      opacity: 0.95;
-    }
-    100% {
-      transform: translateX(0);
-      opacity: 1;
-    }
-  }
-
-  /* Rapids: Content rushes toward you (zoom out), new loads behind */
-  @keyframes rapids-old {
-    0% {
-      transform: scale(1);
-      opacity: 1;
-    }
-    /* Begins to rush toward viewer */
-    30% {
-      transform: scale(1.3);
-      opacity: 0.9;
-    }
-    /* Rushes past - expanding rapidly */
-    60% {
-      transform: scale(2);
-      opacity: 0.5;
-    }
-    /* Exits view quickly */
-    100% {
-      transform: scale(3);
-      opacity: 0;
-    }
-  }
-
-  @keyframes rapids-new {
-    0% {
-      /* Starts behind, smaller */
-      transform: scale(0.5);
-      opacity: 0;
-    }
-    /* Quickly becomes visible */
-    20% {
-      transform: scale(0.7);
-      opacity: 0.5;
-    }
-    /* Rushes into place */
-    60% {
-      transform: scale(0.95);
-      opacity: 0.9;
-    }
-    /* Final position - direct */
-    100% {
-      transform: scale(1);
-      opacity: 1;
-    }
-  }
-
-  /* Tsunami: Wave arc - comes from left, rises up 10%, then sweeps down at angle */
-  @keyframes wave-out {
-    0% {
-      transform: translate(0, 0) scale(1);
-      opacity: 1;
-    }
-    /* Rise up - wave building */
-    25% {
-      transform: translate(5%, -10%) scale(1.02);
-      opacity: 1;
-    }
-    /* Peak of wave arc */
-    45% {
-      transform: translate(15%, -12%) rotate(-2deg) scale(1.03);
-      opacity: 0.9;
-    }
-    /* Sweeping down and away at angle */
-    70% {
-      transform: translate(40%, 15%) rotate(-5deg) scale(0.95);
-      opacity: 0.5;
-    }
-    100% {
-      /* Exit at angle */
-      transform: translate(80%, 40%) rotate(-8deg) scale(0.85);
-      opacity: 0;
-    }
-  }
-
-  @keyframes wave-in {
-    0% {
-      /* Starting from left, below horizon */
-      transform: translate(-100%, 20%) scale(0.9);
-      opacity: 0;
-    }
-    /* Rising up as it comes in */
-    30% {
-      transform: translate(-40%, -8%) scale(0.98);
-      opacity: 0.6;
-    }
-    /* Cresting - peak of wave */
-    50% {
-      transform: translate(-10%, -12%) scale(1.02);
-      opacity: 0.9;
-    }
-    /* Coming down from peak */
-    70% {
-      transform: translate(5%, -5%) scale(1.01);
-      opacity: 1;
-    }
-    /* Settling with slight overshoot */
-    85% {
-      transform: translate(-2%, 2%) scale(1);
-      opacity: 1;
-    }
-    100% {
-      transform: translate(0, 0) scale(1);
-      opacity: 1;
-    }
-  }
-
-  /* Ken Burns zoom (Serene) */
-  @keyframes kenburns-out {
-    from { transform: scale(1); opacity: 1; }
-    to { transform: scale(var(--kenburns-scale, 1.05)); opacity: 0; }
-  }
-
-  @keyframes kenburns-in {
-    from { transform: scale(var(--kenburns-scale, 1.05)); opacity: 0; }
-    to { transform: scale(1); opacity: 1; }
-  }
-
-
-  /* --- Default transition (Flowing) --- */
-  /* Smooth left-to-right with organic ease-in-out */
-  ::view-transition-old(root) {
-    animation: var(--duration-slower) cubic-bezier(0.4, 0, 0.2, 1) both flowing-out;
-  }
-
-  ::view-transition-new(root) {
-    animation: var(--duration-slower) cubic-bezier(0.4, 0, 0.2, 1) both flowing-in;
-  }
-
-
-  /* --- Still: Instant cut --- */
-  :root[data-motion="still"] {
-    &::view-transition-old(root),
-    &::view-transition-new(root) {
-      animation: none;
-    }
-  }
-
-
-  /* --- Serene: Slow crossfade (Ken Burns) --- */
-  :root[data-motion="serene"] {
-    &::view-transition-old(root) {
-      animation: var(--duration-slowest) var(--ease-fluid) both kenburns-out;
-    }
-
-    &::view-transition-new(root) {
-      animation: var(--duration-slowest) var(--ease-fluid) both kenburns-in;
-    }
-  }
-
-
-  /* --- Trickling: Quick subtle fade --- */
-  :root[data-motion="trickling"] {
-    &::view-transition-old(root) {
-      animation: var(--duration-slow) var(--ease-fluid) both fade-out;
-    }
-
-    &::view-transition-new(root) {
-      animation: var(--duration-slow) var(--ease-fluid) both fade-in;
-    }
-  }
-
-
-  /* --- Rapids: Fluid dynamics effect ---
-     New content pushes up from bottom, overlaps old briefly,
-     friction slows it, then it gains traction and pulls old content away */
-  :root[data-motion="rapids"] {
-    &::view-transition-old(root) {
-      animation: var(--duration-slowest) cubic-bezier(0.4, 0, 0.6, 1) both rapids-old;
-    }
-
-    &::view-transition-new(root) {
-      animation: var(--duration-slowest) cubic-bezier(0.2, 0, 0.4, 1) both rapids-new;
-    }
-  }
-
-
-  /* --- Tsunami: Diagonal wave crash --- */
-  :root[data-motion="tsunami"] {
-    &::view-transition-old(root) {
-      animation: var(--duration-slower) var(--ease-settle) both wave-out;
-    }
-
-    &::view-transition-new(root) {
-      animation: var(--duration-slower) var(--ease-fluid) both wave-in;
+  @media (prefers-contrast: more) {
+    :root,
+    :is(.section, section)[data-bg="inverse"],
+    .hero[data-theme="dark"],
+    .site-footer[data-dark],
+    .nav:not([data-bg="plain"], [data-variant="transparent"]), .nav[data-bg="inverse"] {
+      --color-border: var(--color-border-strong);
+      --color-text-muted: var(--color-text);
+      --color-text-subtle: var(--color-text);
     }
   }
 
-
   /* ========================================
-     ADDITIONAL PRESETS
-     Same HTML, completely different visual identity.
+     MOTION
+     Every duration derives from --motion-base (fast ×0.73, slow ×1.37),
+     times a speed (--_motion) set per page or section by data-motion:
+     <html data-motion="slow"> or <section data-motion="fast">.
+       reduced  0 (all durations 0ms)
+       slow     1.5× (deliberate)
+       fast     0.5× (snappy)
+     Timing only; prefers-reduced-motion always wins. The durations are
+     declared again on each [data-motion] element: a custom property
+     inherits its resolved value, so a speed set lower down needs them
+     recomputed where it is set.
      ======================================== */
 
-  /* === BRUTALIST: Raw, uncompromising, technical ===
-     Monospace typography, zero decoration, grid-locked.
-     Inspired by Swiss design and brutalist architecture.
-     For: Developer portfolios, tech products, manifestos */
-  :root[data-motion="brutalist"],
-  [data-motion="brutalist"] {
-    /* No motion - instant, mechanical */
-    --motion-scale: 0;
-    --duration-instant: 0ms;
-    --duration-fast: 0ms;
-    --duration-normal: 0ms;
-    --duration-slow: 0ms;
-    --duration-slower: 0ms;
-    --duration-slowest: 0ms;
-    --ease-fluid: linear;
-    --ease-settle: linear;
-
-    /* Typography: Space Mono — geometric, raw, industrial */
-    --font-body: 'Space Mono', var(--font-mono);
-    --font-heading: 'Space Mono', var(--font-mono);
-    --font-ui: 'Space Mono', var(--font-mono);
-    --leading-normal: 1.5;
-    --leading-tight: 1.3;
-    --tracking-normal: -0.02em;
-
-    /* Layout: Narrow, focused, dense */
-    --space-section: var(--space-8);
-    --space-gutter: var(--space-3);
-    --container-content: 600px;
-    --container-prose: 55ch;
-
-    /* Zero radius - sharp edges only */
-    --radius-none: 0;
-    --radius-sm: 0;
-    --radius-md: 0;
-    --radius-lg: 0;
-    --radius-xl: 0;
-    --radius-2xl: 0;
-    --radius-full: 0;
-    --radius-card: 0;
-    --radius-button: 0;
-    --radius-input: 0;
-
-    /* High-contrast borders, no soft shadows */
-    --border-width: 2px;
-    --border-width-thick: 4px;
-    --shadow-xs: none;
-    --shadow-sm: none;
-    --shadow-md: 4px 4px 0 var(--color-border);
-    --shadow-lg: 8px 8px 0 var(--color-border);
-    --shadow-xl: 12px 12px 0 var(--color-border);
-
-    /* High contrast colors */
-    --color-text: var(--black);
-    --color-background: var(--white);
-    --color-border: var(--black);
-    --color-border-subtle: var(--gray-30);
-    --accent: var(--black);
-  }
-
-  /* Brutalist dark mode */
-  [data-motion="brutalist"][data-theme="dark"],
-  [data-theme="dark"] [data-motion="brutalist"] {
-    --color-text: var(--white);
-    --color-background: var(--black);
-    --color-border: var(--white);
-    --color-border-subtle: var(--gray-70);
-    --accent: var(--white);
-    --shadow-md: 4px 4px 0 var(--color-border);
-    --shadow-lg: 8px 8px 0 var(--color-border);
-  }
-
-
-  /* === EDITORIAL: Luxurious, literary, contemplative ===
-     Serif typography, generous whitespace, classical proportions.
-     Inspired by high-end magazines and book design.
-     For: Magazines, blogs, luxury brands, essays */
-  :root[data-motion="editorial"],
-  [data-motion="editorial"] {
-    /* Very slow, contemplative motion */
-    --motion-scale: 0.2;
-    --duration-instant: 300ms;
-    --duration-fast: 800ms;
-    --duration-normal: 1200ms;
-    --duration-slow: 2000ms;
-    --duration-slower: 3000ms;
-    --duration-slowest: 4000ms;
-    --ease-fluid: cubic-bezier(0.25, 0.1, 0.25, 1);
-    --ease-settle: cubic-bezier(0.25, 0.1, 0.25, 1);
-
-    /* Typography: Playfair Display + Libre Baskerville — magazine editorial */
-    --font-body: 'Libre Baskerville', var(--font-serif);
-    --font-heading: 'Playfair Display', var(--font-serif);
-    --font-ui: var(--font-system);
-    --leading-normal: 1.85;
-    --leading-relaxed: 2;
-    --tracking-normal: 0.01em;
-    --tracking-wide: 0.1em;
-
-    /* Layout: Narrow column, extreme whitespace */
-    --space-section: 8rem;
-    --space-gutter: var(--space-12);
-    --container-content: 38rem;
-    --container-prose: 32rem;
-    --container-xl: 48rem;
-
-    /* Soft, subtle radius */
-    --radius-sm: 2px;
-    --radius-md: 4px;
-    --radius-lg: 6px;
-    --radius-xl: 8px;
-    --radius-2xl: 12px;
-    --radius-card: 4px;
-    --radius-button: 2px;
-    --radius-input: 4px;
-
-    /* No shadows - flat, clean, sophisticated */
-    --shadow-xs: none;
-    --shadow-sm: none;
-    --shadow-md: none;
-    --shadow-lg: none;
-    --shadow-xl: none;
-
-    /* Muted, warm color palette */
-    --color-text: oklch(25% 0.02 50);
-    --color-text-muted: oklch(45% 0.02 50);
-    --color-background: oklch(98% 0.01 60);
-    --color-surface: oklch(96% 0.015 60);
-    --color-border: oklch(85% 0.02 60);
-    --color-border-subtle: oklch(90% 0.015 60);
-    --accent: oklch(40% 0.08 30);
-  }
-
-  /* Editorial dark mode - ink on paper feel */
-  [data-motion="editorial"][data-theme="dark"],
-  [data-theme="dark"] [data-motion="editorial"] {
-    --color-text: oklch(90% 0.01 60);
-    --color-text-muted: oklch(70% 0.01 60);
-    --color-background: oklch(12% 0.01 60);
-    --color-surface: oklch(15% 0.015 60);
-    --color-border: oklch(25% 0.02 60);
-    --accent: oklch(70% 0.06 40);
-  }
-
-
-  /* === NEON: Electric, futuristic, high-energy ===
-     Geometric sans-serif, dark backgrounds, glowing accents.
-     Inspired by cyberpunk, gaming, night clubs.
-     For: Gaming, tech startups, entertainment, events */
-  :root[data-motion="neon"],
-  [data-motion="neon"] {
-    /* Fast, snappy, energetic motion */
-    --motion-scale: 1.8;
-    --duration-instant: 80ms;
-    --duration-fast: 150ms;
-    --duration-normal: 280ms;
-    --duration-slow: 400ms;
-    --duration-slower: 550ms;
-    --duration-slowest: 750ms;
-    --ease-fluid: cubic-bezier(0.34, 1.56, 0.64, 1);
-    --ease-settle: cubic-bezier(0.22, 1.6, 0.36, 1);
-
-    /* Typography: Orbitron + Exo 2 — cyberpunk, futuristic */
-    --font-body: 'Exo 2', var(--font-system);
-    --font-heading: 'Orbitron', var(--font-system);
-    --font-ui: 'Exo 2', var(--font-system);
-    --leading-normal: 1.5;
-    --leading-tight: 1.15;
-    --tracking-normal: 0;
-    --tracking-wide: 0.15em;
-
-    /* Layout: Wide, immersive, edge-to-edge */
-    --space-section: var(--space-20);
-    --space-gutter: var(--space-6);
-    --container-content: 100%;
-    --container-xl: 100%;
-
-    /* Full pill shapes */
-    --radius-sm: 9999px;
-    --radius-md: 9999px;
-    --radius-lg: 9999px;
-    --radius-xl: 9999px;
-    --radius-2xl: 9999px;
-    --radius-card: 24px;
-    --radius-button: 9999px;
-    --radius-input: 9999px;
-
-    /* Glowing shadows */
-    --shadow-xs: 0 0 8px var(--accent);
-    --shadow-sm: 0 0 12px var(--accent);
-    --shadow-md: 0 0 20px var(--accent), 0 0 40px color-mix(in oklch, var(--accent) 50%, transparent);
-    --shadow-lg: 0 0 30px var(--accent), 0 0 60px color-mix(in oklch, var(--accent) 50%, transparent);
-    --shadow-xl: 0 0 40px var(--accent), 0 0 80px color-mix(in oklch, var(--accent) 40%, transparent);
-    --shadow-glow: 0 0 0 2px var(--accent), 0 0 20px var(--accent);
-
-    /* Dark by default with neon accent */
-    --color-text: oklch(95% 0 0);
-    --color-text-muted: oklch(70% 0.02 280);
-    --color-background: oklch(8% 0.02 280);
-    --color-surface: oklch(12% 0.03 280);
-    --color-surface-raised: oklch(16% 0.03 280);
-    --color-border: oklch(25% 0.05 280);
-    --color-border-subtle: oklch(18% 0.04 280);
-
-    /* Electric neon accent */
-    --accent: oklch(70% 0.25 320);
-    --accent-subtle: oklch(20% 0.15 320);
-    --accent-hover: oklch(80% 0.28 320);
-    --accent-active: oklch(60% 0.22 320);
+  :root,
+  [data-motion] {
+    --duration-fast: calc(var(--motion-base) * 0.73 * var(--_motion, 1));
+    --duration-normal: calc(var(--motion-base) * var(--_motion, 1));
+    --duration-slow: calc(var(--motion-base) * 1.37 * var(--_motion, 1));
+    --duration-slower: calc(var(--motion-base) * 1.73 * var(--_motion, 1));
   }
 
-  /* Neon "light mode" - inverted but still vibrant */
-  [data-motion="neon"][data-theme="light"],
-  [data-theme="light"] [data-motion="neon"] {
-    --color-text: oklch(15% 0.02 280);
-    --color-background: oklch(98% 0.01 280);
-    --color-surface: oklch(95% 0.02 280);
-    --accent: oklch(55% 0.30 320);
-    --shadow-md: 0 0 15px color-mix(in oklch, var(--accent) 40%, transparent);
-    --shadow-lg: 0 0 25px color-mix(in oklch, var(--accent) 50%, transparent);
-  }
-
-
-  /* --- Signature Preset Page Transitions --- */
+  [data-motion="reduced"] { --_motion: 0; }
+  [data-motion="slow"] { --_motion: 1.5; }
+  [data-motion="fast"] { --_motion: 0.5; }
 
-  /* Brutalist: Hard cut, no transition */
-  :root[data-motion="brutalist"] {
-    &::view-transition-old(root),
-    &::view-transition-new(root) {
-      animation: none;
-    }
-  }
-
-  /* Editorial: Very slow crossfade */
-  @keyframes editorial-fade-out {
-    from { opacity: 1; }
-    to { opacity: 0; }
-  }
-
-  @keyframes editorial-fade-in {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
-
-  :root[data-motion="editorial"] {
-    &::view-transition-old(root) {
-      animation: 1.5s cubic-bezier(0.25, 0.1, 0.25, 1) both editorial-fade-out;
-    }
-
-    &::view-transition-new(root) {
-      animation: 1.5s cubic-bezier(0.25, 0.1, 0.25, 1) both editorial-fade-in;
-    }
-  }
-
-  /* Neon: Fast glitch/flash effect */
-  @keyframes neon-out {
-    0% { opacity: 1; transform: scale(1); filter: brightness(1); }
-    50% { opacity: 0.8; transform: scale(1.02); filter: brightness(2); }
-    100% { opacity: 0; transform: scale(1.05); filter: brightness(0); }
-  }
-
-  @keyframes neon-in {
-    0% { opacity: 0; transform: scale(0.95); filter: brightness(0); }
-    30% { opacity: 0.5; transform: scale(0.98); filter: brightness(2); }
-    60% { opacity: 0.9; transform: scale(1.01); filter: brightness(1.5); }
-    100% { opacity: 1; transform: scale(1); filter: brightness(1); }
-  }
-
-  :root[data-motion="neon"] {
-    &::view-transition-old(root) {
-      animation: 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both neon-out;
-    }
-
-    &::view-transition-new(root) {
-      animation: 350ms cubic-bezier(0.22, 1.6, 0.36, 1) both neon-in;
-    }
-  }
-
-
-  /* Respect reduced motion preference */
   @media (prefers-reduced-motion: reduce) {
-    ::view-transition-old(root),
-    ::view-transition-new(root) {
-      animation: none;
-    }
+    :root,
+    [data-motion] { --_motion: 0; }
   }
-}
-
-
-/* ========================================
-   COLOR PRESETS
-   Ready-to-use accent color themes
-   Apply via: <html data-accent="coral">
-   ======================================== */
-
-/* Default - Sophisticated neutral gray */
-[data-accent="default"],
-:root:not([data-accent]) {
-  --accent: var(--gray-40);
-}
-
-/* Coral - Warm, vibrant energy */
-[data-accent="coral"] {
-  --accent: oklch(65% 0.18 25);
-  --accent-subtle: oklch(95% 0.04 25);
-  --accent-hover: oklch(55% 0.20 25);
-  --accent-active: oklch(45% 0.18 25);
-}
-
-/* Vapor - Soft, ethereal purple */
-[data-accent="vapor"] {
-  --accent: oklch(55% 0.15 300);
-  --accent-subtle: oklch(95% 0.03 300);
-  --accent-hover: oklch(45% 0.17 300);
-  --accent-active: oklch(40% 0.15 300);
-}
-
-/* Tide - Ocean blue-green */
-[data-accent="tide"] {
-  --accent: oklch(55% 0.12 200);
-  --accent-subtle: oklch(95% 0.025 200);
-  --accent-hover: oklch(45% 0.14 200);
-  --accent-active: oklch(40% 0.12 200);
-}
-
-/* Forest - Deep natural green */
-[data-accent="forest"] {
-  --accent: oklch(50% 0.12 145);
-  --accent-subtle: oklch(95% 0.025 145);
-  --accent-hover: oklch(40% 0.14 145);
-  --accent-active: oklch(35% 0.12 145);
-}
-
-/* Sunset - Golden warmth */
-[data-accent="sunset"] {
-  --accent: oklch(70% 0.16 55);
-  --accent-subtle: oklch(95% 0.035 55);
-  --accent-hover: oklch(60% 0.18 55);
-  --accent-active: oklch(55% 0.16 55);
-}
-
-/* Midnight - Deep sophisticated blue */
-[data-accent="midnight"] {
-  --accent: oklch(45% 0.12 260);
-  --accent-subtle: oklch(95% 0.025 260);
-  --accent-hover: oklch(35% 0.14 260);
-  --accent-active: oklch(30% 0.12 260);
-}
-
-
-/* ========================================
-   SUBDUED MODE (Low Contrast)
-   Reduces contrast for gentler viewing.
-   Each preset gets its own tinted subdued variant
-   that maintains color character at lower contrast.
-   Apply via: <html data-contrast="subdued">
-   ======================================== */
-
-/* --- Base subdued: neutral fallback --- */
-[data-contrast="subdued"] {
-  --color-text: oklch(35% 0.01 250);
-  --color-text-muted: oklch(48% 0.01 250);
-  --color-text-subtle: oklch(58% 0.01 250);
-  --color-background: oklch(96% 0.005 250);
-  --color-surface: oklch(93% 0.005 250);
-  --color-surface-raised: oklch(98% 0.005 250);
-  --color-border: oklch(82% 0.01 250);
-  --color-border-subtle: oklch(87% 0.01 250);
-  /* Mute accents globally */
-  --accent-subtle: color-mix(in oklch, var(--accent) 10%, var(--color-background));
-}
-
-[data-theme="dark"][data-contrast="subdued"] {
-  --color-text: oklch(75% 0.01 230);
-  --color-text-muted: oklch(55% 0.01 230);
-  --color-text-subtle: oklch(45% 0.01 230);
-  --color-background: oklch(16% 0.015 230);
-  --color-surface: oklch(20% 0.015 230);
-  --color-surface-raised: oklch(24% 0.015 230);
-  --color-border: oklch(30% 0.02 230);
-  --color-border-subtle: oklch(25% 0.015 230);
-}
-
-
-/* --- STILL subdued: Cool gray, muted slate ---
-   Hue 250, very low chroma. Whisper-quiet. */
-[data-motion="still"][data-contrast="subdued"],
-[data-contrast="subdued"] [data-motion="still"],
-[data-contrast="subdued"]:root[data-motion="still"] {
-  --color-text: oklch(35% 0.01 250);
-  --color-text-muted: oklch(48% 0.01 250);
-  --color-text-subtle: oklch(58% 0.008 250);
-  --color-background: oklch(96% 0.005 250);
-  --color-surface: oklch(93% 0.005 250);
-  --color-surface-raised: oklch(98% 0.005 250);
-  --color-border: oklch(82% 0.01 250);
-  --color-border-subtle: oklch(87% 0.008 250);
-}
-
-[data-theme="dark"][data-motion="still"][data-contrast="subdued"],
-[data-theme="dark"][data-contrast="subdued"] [data-motion="still"],
-[data-theme="dark"][data-contrast="subdued"]:root[data-motion="still"] {
-  --color-text: oklch(75% 0.01 250);
-  --color-text-muted: oklch(55% 0.008 250);
-  --color-text-subtle: oklch(45% 0.008 250);
-  --color-background: oklch(15% 0.01 250);
-  --color-surface: oklch(19% 0.01 250);
-  --color-surface-raised: oklch(23% 0.01 250);
-  --color-border: oklch(28% 0.015 250);
-  --color-border-subtle: oklch(23% 0.01 250);
-}
-
-
-/* --- SERENE subdued: Warm taupe cream ---
-   Hue 60, low chroma. Like aged linen. */
-[data-motion="serene"][data-contrast="subdued"],
-[data-contrast="subdued"] [data-motion="serene"],
-[data-contrast="subdued"]:root[data-motion="serene"] {
-  --color-text: oklch(35% 0.015 60);
-  --color-text-muted: oklch(48% 0.012 60);
-  --color-text-subtle: oklch(58% 0.01 60);
-  --color-background: oklch(96% 0.01 60);
-  --color-surface: oklch(93% 0.012 65);
-  --color-surface-raised: oklch(98% 0.008 60);
-  --color-border: oklch(82% 0.015 60);
-  --color-border-subtle: oklch(87% 0.01 60);
-}
-
-[data-theme="dark"][data-motion="serene"][data-contrast="subdued"],
-[data-theme="dark"][data-contrast="subdued"] [data-motion="serene"],
-[data-theme="dark"][data-contrast="subdued"]:root[data-motion="serene"] {
-  --color-text: oklch(75% 0.01 60);
-  --color-text-muted: oklch(55% 0.01 60);
-  --color-text-subtle: oklch(45% 0.008 60);
-  --color-background: oklch(16% 0.012 60);
-  --color-surface: oklch(20% 0.015 60);
-  --color-surface-raised: oklch(24% 0.015 60);
-  --color-border: oklch(30% 0.015 60);
-  --color-border-subtle: oklch(25% 0.012 60);
-}
-
-
-/* --- TRICKLING subdued: Neutral gray-blue ---
-   Hue 190, minimal chroma. Understated, efficient. */
-[data-motion="trickling"][data-contrast="subdued"],
-[data-contrast="subdued"] [data-motion="trickling"],
-[data-contrast="subdued"]:root[data-motion="trickling"] {
-  --color-text: oklch(35% 0.01 190);
-  --color-text-muted: oklch(48% 0.008 190);
-  --color-text-subtle: oklch(58% 0.006 190);
-  --color-background: oklch(96% 0.006 190);
-  --color-surface: oklch(93% 0.008 190);
-  --color-surface-raised: oklch(98% 0.004 190);
-  --color-border: oklch(82% 0.01 190);
-  --color-border-subtle: oklch(87% 0.008 190);
-}
-
-[data-theme="dark"][data-motion="trickling"][data-contrast="subdued"],
-[data-theme="dark"][data-contrast="subdued"] [data-motion="trickling"],
-[data-theme="dark"][data-contrast="subdued"]:root[data-motion="trickling"] {
-  --color-text: oklch(75% 0.008 190);
-  --color-text-muted: oklch(55% 0.006 190);
-  --color-text-subtle: oklch(45% 0.006 190);
-  --color-background: oklch(15% 0.012 190);
-  --color-surface: oklch(19% 0.012 190);
-  --color-surface-raised: oklch(23% 0.012 190);
-  --color-border: oklch(28% 0.018 190);
-  --color-border-subtle: oklch(23% 0.012 190);
-}
-
-
-/* --- STREAM subdued: Cool teal mist ---
-   Hue 200, low chroma. Modern, soft tech. */
-[data-motion="stream"][data-contrast="subdued"],
-[data-contrast="subdued"] [data-motion="stream"],
-[data-contrast="subdued"]:root[data-motion="stream"] {
-  --color-text: oklch(35% 0.012 200);
-  --color-text-muted: oklch(48% 0.01 200);
-  --color-text-subtle: oklch(58% 0.008 200);
-  --color-background: oklch(96% 0.008 200);
-  --color-surface: oklch(93% 0.01 200);
-  --color-surface-raised: oklch(98% 0.006 200);
-  --color-border: oklch(82% 0.012 200);
-  --color-border-subtle: oklch(87% 0.01 200);
-}
-
-[data-theme="dark"][data-motion="stream"][data-contrast="subdued"],
-[data-theme="dark"][data-contrast="subdued"] [data-motion="stream"],
-[data-theme="dark"][data-contrast="subdued"]:root[data-motion="stream"] {
-  --color-text: oklch(75% 0.01 200);
-  --color-text-muted: oklch(55% 0.008 200);
-  --color-text-subtle: oklch(45% 0.008 200);
-  --color-background: oklch(15% 0.015 200);
-  --color-surface: oklch(19% 0.015 200);
-  --color-surface-raised: oklch(23% 0.015 200);
-  --color-border: oklch(28% 0.02 200);
-  --color-border-subtle: oklch(23% 0.015 200);
-}
-
-
-/* --- FLOWING subdued: Soft ocean blue (default) ---
-   Hue 230, low chroma. Calm water at rest. */
-[data-motion="flowing"][data-contrast="subdued"],
-[data-contrast="subdued"] [data-motion="flowing"],
-[data-contrast="subdued"]:root[data-motion="flowing"],
-[data-contrast="subdued"]:root:not([data-motion]) {
-  --color-text: oklch(35% 0.015 230);
-  --color-text-muted: oklch(48% 0.012 230);
-  --color-text-subtle: oklch(58% 0.01 230);
-  --color-background: oklch(96% 0.008 230);
-  --color-surface: oklch(93% 0.01 230);
-  --color-surface-raised: oklch(98% 0.006 230);
-  --color-border: oklch(82% 0.012 230);
-  --color-border-subtle: oklch(87% 0.01 230);
-}
-
-[data-theme="dark"][data-motion="flowing"][data-contrast="subdued"],
-[data-theme="dark"][data-contrast="subdued"] [data-motion="flowing"],
-[data-theme="dark"][data-contrast="subdued"]:root[data-motion="flowing"],
-[data-theme="dark"][data-contrast="subdued"]:root:not([data-motion]) {
-  --color-text: oklch(75% 0.01 220);
-  --color-text-muted: oklch(55% 0.008 220);
-  --color-text-subtle: oklch(45% 0.008 220);
-  --color-background: oklch(16% 0.02 230);
-  --color-surface: oklch(20% 0.02 230);
-  --color-surface-raised: oklch(24% 0.02 230);
-  --color-border: oklch(30% 0.025 230);
-  --color-border-subtle: oklch(25% 0.02 230);
-}
-
-
-/* --- CASCADE subdued: Soft lavender haze ---
-   Hue 280, low chroma. Gentle twilight. */
-[data-motion="cascade"][data-contrast="subdued"],
-[data-contrast="subdued"] [data-motion="cascade"],
-[data-contrast="subdued"]:root[data-motion="cascade"] {
-  --color-text: oklch(35% 0.012 280);
-  --color-text-muted: oklch(48% 0.01 280);
-  --color-text-subtle: oklch(58% 0.008 280);
-  --color-background: oklch(96% 0.008 280);
-  --color-surface: oklch(93% 0.01 280);
-  --color-surface-raised: oklch(98% 0.006 280);
-  --color-border: oklch(82% 0.012 280);
-  --color-border-subtle: oklch(87% 0.01 280);
-}
-
-[data-theme="dark"][data-motion="cascade"][data-contrast="subdued"],
-[data-theme="dark"][data-contrast="subdued"] [data-motion="cascade"],
-[data-theme="dark"][data-contrast="subdued"]:root[data-motion="cascade"] {
-  --color-text: oklch(75% 0.008 280);
-  --color-text-muted: oklch(55% 0.008 280);
-  --color-text-subtle: oklch(45% 0.006 280);
-  --color-background: oklch(17% 0.015 280);
-  --color-surface: oklch(21% 0.018 280);
-  --color-surface-raised: oklch(25% 0.018 280);
-  --color-border: oklch(30% 0.02 280);
-  --color-border-subtle: oklch(25% 0.015 280);
-}
-
-
-/* --- RAPIDS subdued: Warm muted ember ---
-   Hue 25, low chroma. Banked coals. */
-[data-motion="rapids"][data-contrast="subdued"],
-[data-contrast="subdued"] [data-motion="rapids"],
-[data-contrast="subdued"]:root[data-motion="rapids"] {
-  --color-text: oklch(35% 0.015 25);
-  --color-text-muted: oklch(48% 0.012 25);
-  --color-text-subtle: oklch(58% 0.01 25);
-  --color-background: oklch(96% 0.01 25);
-  --color-surface: oklch(93% 0.012 30);
-  --color-surface-raised: oklch(98% 0.008 25);
-  --color-border: oklch(82% 0.015 25);
-  --color-border-subtle: oklch(87% 0.01 25);
-}
-
-[data-theme="dark"][data-motion="rapids"][data-contrast="subdued"],
-[data-theme="dark"][data-contrast="subdued"] [data-motion="rapids"],
-[data-theme="dark"][data-contrast="subdued"]:root[data-motion="rapids"] {
-  --color-text: oklch(75% 0.01 25);
-  --color-text-muted: oklch(55% 0.008 25);
-  --color-text-subtle: oklch(45% 0.008 25);
-  --color-background: oklch(14% 0.02 25);
-  --color-surface: oklch(18% 0.02 25);
-  --color-surface-raised: oklch(22% 0.02 25);
-  --color-border: oklch(28% 0.03 25);
-  --color-border-subtle: oklch(23% 0.02 25);
-}
-
-
-/* --- TSUNAMI subdued: Deep muted navy ---
-   Hue 250, low chroma. Quiet ocean depth. */
-[data-motion="tsunami"][data-contrast="subdued"],
-[data-contrast="subdued"] [data-motion="tsunami"],
-[data-contrast="subdued"]:root[data-motion="tsunami"] {
-  --color-text: oklch(35% 0.015 250);
-  --color-text-muted: oklch(48% 0.012 250);
-  --color-text-subtle: oklch(58% 0.01 250);
-  --color-background: oklch(96% 0.008 250);
-  --color-surface: oklch(93% 0.01 250);
-  --color-surface-raised: oklch(98% 0.006 250);
-  --color-border: oklch(82% 0.012 250);
-  --color-border-subtle: oklch(87% 0.01 250);
-}
-
-[data-theme="dark"][data-motion="tsunami"][data-contrast="subdued"],
-[data-theme="dark"][data-contrast="subdued"] [data-motion="tsunami"],
-[data-theme="dark"][data-contrast="subdued"]:root[data-motion="tsunami"] {
-  --color-text: oklch(75% 0.012 200);
-  --color-text-muted: oklch(55% 0.01 200);
-  --color-text-subtle: oklch(45% 0.008 200);
-  --color-background: oklch(13% 0.03 250);
-  --color-surface: oklch(17% 0.03 250);
-  --color-surface-raised: oklch(21% 0.03 250);
-  --color-border: oklch(26% 0.04 240);
-  --color-border-subtle: oklch(21% 0.03 240);
-}
-
-
-/* --- BRUTALIST subdued: High-mid contrast ---
-   Pure achromatic. Less stark than default but still bold. */
-[data-motion="brutalist"][data-contrast="subdued"],
-[data-contrast="subdued"] [data-motion="brutalist"],
-[data-contrast="subdued"]:root[data-motion="brutalist"] {
-  --color-text: oklch(20% 0 0);
-  --color-text-muted: oklch(40% 0 0);
-  --color-text-subtle: oklch(55% 0 0);
-  --color-background: oklch(95% 0 0);
-  --color-surface: oklch(92% 0 0);
-  --color-surface-raised: oklch(98% 0 0);
-  --color-border: oklch(60% 0 0);
-  --color-border-subtle: oklch(75% 0 0);
-}
-
-[data-theme="dark"][data-motion="brutalist"][data-contrast="subdued"],
-[data-theme="dark"][data-contrast="subdued"] [data-motion="brutalist"],
-[data-theme="dark"][data-contrast="subdued"]:root[data-motion="brutalist"] {
-  --color-text: oklch(80% 0 0);
-  --color-text-muted: oklch(60% 0 0);
-  --color-text-subtle: oklch(45% 0 0);
-  --color-background: oklch(10% 0 0);
-  --color-surface: oklch(15% 0 0);
-  --color-surface-raised: oklch(20% 0 0);
-  --color-border: oklch(40% 0 0);
-  --color-border-subtle: oklch(30% 0 0);
-}
-
-
-/* --- EDITORIAL subdued: Warm paper muted ---
-   Hue 50-60, low chroma. Old library ambience. */
-[data-motion="editorial"][data-contrast="subdued"],
-[data-contrast="subdued"] [data-motion="editorial"],
-[data-contrast="subdued"]:root[data-motion="editorial"] {
-  --color-text: oklch(35% 0.015 50);
-  --color-text-muted: oklch(50% 0.012 50);
-  --color-text-subtle: oklch(60% 0.01 50);
-  --color-background: oklch(96% 0.01 60);
-  --color-surface: oklch(93% 0.012 60);
-  --color-surface-raised: oklch(98% 0.008 60);
-  --color-border: oklch(82% 0.015 60);
-  --color-border-subtle: oklch(87% 0.01 60);
-}
-
-[data-theme="dark"][data-motion="editorial"][data-contrast="subdued"],
-[data-theme="dark"][data-contrast="subdued"] [data-motion="editorial"],
-[data-theme="dark"][data-contrast="subdued"]:root[data-motion="editorial"] {
-  --color-text: oklch(75% 0.008 60);
-  --color-text-muted: oklch(55% 0.008 60);
-  --color-text-subtle: oklch(45% 0.006 60);
-  --color-background: oklch(15% 0.01 60);
-  --color-surface: oklch(19% 0.012 60);
-  --color-surface-raised: oklch(23% 0.012 60);
-  --color-border: oklch(28% 0.015 60);
-  --color-border-subtle: oklch(23% 0.01 60);
-}
-
-
-/* --- NEON subdued: Muted glow ---
-   Hue 280, reduced chroma. Neon behind frosted glass. */
-[data-motion="neon"][data-contrast="subdued"],
-[data-contrast="subdued"] [data-motion="neon"],
-[data-contrast="subdued"]:root[data-motion="neon"] {
-  /* Neon defaults dark, so light subdued is unusual but supported */
-  --color-text: oklch(35% 0.015 280);
-  --color-text-muted: oklch(50% 0.012 280);
-  --color-text-subtle: oklch(60% 0.01 280);
-  --color-background: oklch(96% 0.008 280);
-  --color-surface: oklch(93% 0.01 280);
-  --color-surface-raised: oklch(98% 0.006 280);
-  --color-border: oklch(82% 0.012 280);
-  --color-border-subtle: oklch(87% 0.01 280);
-  /* Mute the glow effects */
-  --shadow-xs: none;
-  --shadow-sm: 0 0 8px color-mix(in oklch, var(--accent) 20%, transparent);
-  --shadow-md: 0 0 12px color-mix(in oklch, var(--accent) 25%, transparent);
-  --shadow-lg: 0 0 18px color-mix(in oklch, var(--accent) 25%, transparent);
-  --shadow-xl: 0 0 24px color-mix(in oklch, var(--accent) 20%, transparent);
-}
-
-/* Neon dark subdued (the more common case) */
-[data-motion="neon"][data-contrast="subdued"]:not([data-theme="light"]),
-[data-contrast="subdued"]:root[data-motion="neon"]:not([data-theme="light"]) {
-  --color-text: oklch(80% 0.01 280);
-  --color-text-muted: oklch(60% 0.015 280);
-  --color-text-subtle: oklch(45% 0.01 280);
-  --color-background: oklch(10% 0.015 280);
-  --color-surface: oklch(14% 0.02 280);
-  --color-surface-raised: oklch(18% 0.02 280);
-  --color-border: oklch(22% 0.03 280);
-  --color-border-subtle: oklch(17% 0.02 280);
-  /* Muted glow */
-  --shadow-xs: none;
-  --shadow-sm: 0 0 6px color-mix(in oklch, var(--accent) 15%, transparent);
-  --shadow-md: 0 0 10px color-mix(in oklch, var(--accent) 20%, transparent);
-  --shadow-lg: 0 0 16px color-mix(in oklch, var(--accent) 20%, transparent);
-  --shadow-xl: 0 0 22px color-mix(in oklch, var(--accent) 15%, transparent);
-}
-
-
-/* ========================================
-   COLOR PALETTES (Moods)
-   Curated color families for accent selection
-   Apply via: <html data-palette="fluid">
-   ======================================== */
-
-/* --- FLUID PALETTE ---
-   Water-inspired colors that match motion styles.
-   When motion changes, accent auto-updates (if palette is fluid).
-   Each motion style has its natural water color. */
-
-/* Motion-to-color mapping for Fluid palette */
-[data-palette="fluid"][data-motion="still"],
-[data-palette="fluid"]:not([data-motion]) {
-  --palette-accent-1: oklch(55% 0.02 250); /* Slate gray - still water */
-}
-
-[data-palette="fluid"][data-motion="serene"] {
-  --palette-accent-1: oklch(65% 0.12 195); /* Soft teal - calm lake */
-}
-
-[data-palette="fluid"][data-motion="trickling"] {
-  --palette-accent-1: oklch(70% 0.14 210); /* Light cyan - gentle stream */
-}
-
-[data-palette="fluid"][data-motion="flowing"] {
-  --palette-accent-1: oklch(60% 0.18 240); /* Medium blue - steady river */
-}
-
-[data-palette="fluid"][data-motion="rapids"] {
-  --palette-accent-1: oklch(55% 0.15 200); /* Deep teal - whitewater */
-}
-
-[data-palette="fluid"][data-motion="tsunami"] {
-  --palette-accent-1: oklch(40% 0.15 260); /* Deep navy - Hokusai wave */
-}
-
-/* Fluid palette swatches (all 6 water colors) */
-[data-palette="fluid"] {
-  --palette-1: oklch(55% 0.02 250); /* Still - Slate */
-  --palette-2: oklch(65% 0.12 195); /* Serene - Soft teal */
-  --palette-3: oklch(70% 0.14 210); /* Trickling - Light cyan */
-  --palette-4: oklch(60% 0.18 240); /* Flowing - Medium blue */
-  --palette-5: oklch(55% 0.15 200); /* Rapids - Deep teal */
-  --palette-6: oklch(40% 0.15 260); /* Tsunami - Deep navy */
-}
-
-
-/* --- MORANDI PALETTE ---
-   Muted, sophisticated colors inspired by Giorgio Morandi.
-   Desaturated, elegant, timeless. */
-[data-palette="morandi"] {
-  --palette-1: oklch(65% 0.04 50);  /* Dusty rose */
-  --palette-2: oklch(70% 0.03 90);  /* Sage mist */
-  --palette-3: oklch(55% 0.05 230); /* Slate blue */
-  --palette-4: oklch(60% 0.04 60);  /* Clay */
-  --palette-5: oklch(75% 0.02 100); /* Soft moss */
-  --palette-6: oklch(50% 0.04 280); /* Dusty lavender */
-}
-
-
-/* --- BOLD PALETTE ---
-   Vibrant, saturated colors that pop.
-   High energy, confident, attention-grabbing. */
-[data-palette="bold"] {
-  --palette-1: oklch(60% 0.25 25);  /* Electric coral */
-  --palette-2: oklch(55% 0.22 300); /* Vivid purple */
-  --palette-3: oklch(70% 0.20 145); /* Lime green */
-  --palette-4: oklch(65% 0.25 45);  /* Hot orange */
-  --palette-5: oklch(50% 0.20 260); /* Royal blue */
-  --palette-6: oklch(55% 0.25 340); /* Magenta */
-}
-
-
-/* --- PASTEL PALETTE ---
-   Soft, light colors with gentle saturation.
-   Calming, approachable, friendly. */
-[data-palette="pastel"] {
-  --palette-1: oklch(85% 0.08 350); /* Baby pink */
-  --palette-2: oklch(88% 0.06 200); /* Powder blue */
-  --palette-3: oklch(90% 0.07 100); /* Mint cream */
-  --palette-4: oklch(87% 0.08 80);  /* Buttercream */
-  --palette-5: oklch(85% 0.07 280); /* Lavender mist */
-  --palette-6: oklch(88% 0.06 165); /* Seafoam */
-}
-
-
-/* --- EARTH PALETTE ---
-   Natural, warm tones from the earth.
-   Grounded, organic, trustworthy. */
-[data-palette="earth"] {
-  --palette-1: oklch(50% 0.10 55);  /* Terracotta */
-  --palette-2: oklch(45% 0.08 145); /* Forest green */
-  --palette-3: oklch(55% 0.12 70);  /* Amber */
-  --palette-4: oklch(40% 0.06 40);  /* Espresso */
-  --palette-5: oklch(60% 0.05 85);  /* Sand */
-  --palette-6: oklch(50% 0.08 180); /* Teal stone */
-}
-
-
-/* --- MONO PALETTE ---
-   Single hue variations in blue-gray.
-   Clean, professional, focused. */
-[data-palette="mono"] {
-  --palette-1: oklch(30% 0.03 250); /* Deep */
-  --palette-2: oklch(40% 0.03 250); /* Dark */
-  --palette-3: oklch(50% 0.03 250); /* Medium */
-  --palette-4: oklch(60% 0.03 250); /* Light */
-  --palette-5: oklch(70% 0.02 250); /* Lighter */
-  --palette-6: oklch(80% 0.02 250); /* Lightest */
-}
-
-
-/* --- 80s PALETTE ---
-   Retro 80s neon and synth-wave vibes.
-   Electric, nostalgic, bold. */
-[data-palette="80s"] {
-  --palette-1: oklch(60% 0.28 330); /* Hot pink */
-  --palette-2: oklch(70% 0.22 190); /* Electric cyan */
-  --palette-3: oklch(55% 0.25 290); /* Purple neon */
-  --palette-4: oklch(75% 0.18 100); /* Lime */
-  --palette-5: oklch(65% 0.22 50);  /* Sunset orange */
-  --palette-6: oklch(50% 0.20 260); /* Electric blue */
-}
-
-
-/* --- MATRIX PALETTE ---
-   Terminal/coding aesthetic.
-   Dark, digital, hacker vibes. */
-[data-palette="matrix"] {
-  --palette-1: oklch(70% 0.25 145); /* Matrix green */
-  --palette-2: oklch(60% 0.20 145); /* Dark terminal */
-  --palette-3: oklch(55% 0.18 180); /* Cyan terminal */
-  --palette-4: oklch(45% 0.15 145); /* Deep code */
-  --palette-5: oklch(65% 0.12 100); /* Phosphor */
-  --palette-6: oklch(50% 0.08 200); /* Cold steel */
-}
-
-
-/* --- SUBTLE PALETTE ---
-   Trending soft feminine palettes (Etsy/IG aesthetic).
-   Brown, teal, gold - softened and subdued. */
-[data-palette="subtle"] {
-  --palette-1: oklch(55% 0.08 50);  /* Warm taupe */
-  --palette-2: oklch(50% 0.10 180); /* Muted teal */
-  --palette-3: oklch(65% 0.12 75);  /* Soft gold */
-  --palette-4: oklch(60% 0.06 30);  /* Blush brown */
-  --palette-5: oklch(70% 0.05 90);  /* Cream sage */
-  --palette-6: oklch(45% 0.08 200); /* Deep sea */
-}
-
-
-/* --- TSUNAMI PALETTE ---
-   The dark, powerful side of a roaring wave.
-   Deep midnight blues, dark teals, ocean depths.
-   Dramatic, intense, commanding. */
-[data-palette="tsunami"] {
-  --palette-1: oklch(25% 0.08 250); /* Midnight abyss */
-  --palette-2: oklch(30% 0.12 220); /* Deep ocean teal */
-  --palette-3: oklch(35% 0.10 200); /* Dark sea */
-  --palette-4: oklch(45% 0.15 210); /* Storm teal */
-  --palette-5: oklch(55% 0.12 195); /* Cresting wave */
-  --palette-6: oklch(20% 0.06 260); /* Ocean trench */
-}
-
-
-/* --- BRUTALIST PALETTE ---
-   High-contrast, stark, minimal color.
-   Black, white, and one brutal accent.
-   Raw, uncompromising, typographic. */
-[data-palette="brutalist"] {
-  --palette-1: oklch(0% 0 0);       /* Pure black */
-  --palette-2: oklch(100% 0 0);     /* Pure white */
-  --palette-3: oklch(50% 0 0);      /* True gray */
-  --palette-4: oklch(60% 0.25 25);  /* Warning red */
-  --palette-5: oklch(25% 0 0);      /* Near black */
-  --palette-6: oklch(75% 0 0);      /* Light gray */
-}
-
-
-/* --- EDITORIAL PALETTE ---
-   Warm, muted, sophisticated colors.
-   Ink tones, paper textures, literary feel.
-   Timeless, elegant, understated. */
-[data-palette="editorial"] {
-  --palette-1: oklch(40% 0.08 30);  /* Dried ink */
-  --palette-2: oklch(55% 0.06 50);  /* Warm sepia */
-  --palette-3: oklch(65% 0.04 70);  /* Aged paper */
-  --palette-4: oklch(35% 0.05 200); /* Slate blue */
-  --palette-5: oklch(70% 0.03 90);  /* Parchment */
-  --palette-6: oklch(45% 0.07 150); /* Verdigris */
-}
-
-
-/* --- NEON PALETTE ---
-   Electric, vibrant, cyberpunk colors.
-   Glowing accents on dark backgrounds.
-   Futuristic, bold, attention-grabbing. */
-[data-palette="neon"] {
-  --palette-1: oklch(70% 0.25 320); /* Hot magenta */
-  --palette-2: oklch(75% 0.22 190); /* Electric cyan */
-  --palette-3: oklch(80% 0.20 100); /* Lime green */
-  --palette-4: oklch(65% 0.28 290); /* Violet */
-  --palette-5: oklch(75% 0.18 50);  /* Orange glow */
-  --palette-6: oklch(60% 0.25 250); /* Blue electric */
-}
-
-
-/* ========================================
-   APPLY PALETTE ACCENT
-   When data-palette is set, use palette colors
-   ======================================== */
-
-/* Map swatch selection to accent */
-[data-palette][data-accent="1"] { --accent: var(--palette-1); }
-[data-palette][data-accent="2"] { --accent: var(--palette-2); }
-[data-palette][data-accent="3"] { --accent: var(--palette-3); }
-[data-palette][data-accent="4"] { --accent: var(--palette-4); }
-[data-palette][data-accent="5"] { --accent: var(--palette-5); }
-[data-palette][data-accent="6"] { --accent: var(--palette-6); }
-
-/* Auto-derive accent variants from selected palette color */
-[data-palette] {
-  --accent-subtle: color-mix(in oklch, var(--accent) 15%, var(--color-background));
-  --accent-hover: color-mix(in oklch, var(--accent) 85%, var(--theme-dark));
-  --accent-active: color-mix(in oklch, var(--accent) 70%, var(--theme-dark));
-}
-
-/* Fluid palette: auto-select accent based on motion */
-[data-palette="fluid"]:not([data-accent]) {
-  --accent: var(--palette-accent-1);
-}
-
-/* Default accent fallbacks for each palette (when no explicit accent selected) */
-[data-palette="morandi"]:not([data-accent]) { --accent: var(--palette-2); }  /* Sage mist */
-[data-palette="bold"]:not([data-accent]) { --accent: var(--palette-1); }     /* Electric coral */
-[data-palette="pastel"]:not([data-accent]) { --accent: var(--palette-2); }   /* Powder blue */
-[data-palette="earth"]:not([data-accent]) { --accent: var(--palette-1); }    /* Terracotta */
-[data-palette="mono"]:not([data-accent]) { --accent: var(--palette-3); }     /* Medium gray */
-[data-palette="80s"]:not([data-accent]) { --accent: var(--palette-1); }      /* Hot pink */
-[data-palette="matrix"]:not([data-accent]) { --accent: var(--palette-1); }   /* Matrix green */
-[data-palette="subtle"]:not([data-accent]) { --accent: var(--palette-2); }   /* Muted teal */
-[data-palette="tsunami"]:not([data-accent]) { --accent: var(--palette-4); }  /* Storm teal */
-[data-palette="brutalist"]:not([data-accent]) { --accent: var(--palette-1); } /* Pure black */
-[data-palette="editorial"]:not([data-accent]) { --accent: var(--palette-1); } /* Dried ink */
-[data-palette="neon"]:not([data-accent]) { --accent: var(--palette-1); }      /* Hot magenta */
-
-
-/* ========================================
-   THEMED SURFACE & SECTION COLORS
-   Tinted backgrounds derived from palette
-   ======================================== */
-
-/* Base themed surfaces - derived from accent */
-[data-palette] {
-  /* Subtle tint for alternating sections */
-  --surface-tinted: color-mix(in oklch, var(--accent) 8%, var(--color-background));
-  --surface-accent: color-mix(in oklch, var(--accent) 15%, var(--color-background));
-  --section-alt: color-mix(in oklch, var(--accent) 5%, var(--color-background));
-}
-
-/* Mono: use gray tints instead of colored */
-[data-palette="mono"] {
-  --surface-tinted: oklch(from var(--color-background) calc(l - 0.03) 0.01 250);
-  --surface-accent: oklch(from var(--color-background) calc(l - 0.06) 0.02 250);
-  --section-alt: oklch(from var(--color-background) calc(l - 0.02) 0.01 250);
-}
-
-/* Pastel: lighter tints since colors are already soft */
-[data-palette="pastel"] {
-  --surface-tinted: color-mix(in oklch, var(--accent) 12%, var(--color-background));
-  --surface-accent: color-mix(in oklch, var(--accent) 20%, var(--color-background));
-}
-
-/* Bold/80s: stronger presence */
-[data-palette="bold"],
-[data-palette="80s"] {
-  --surface-tinted: color-mix(in oklch, var(--accent) 10%, var(--color-background));
-  --surface-accent: color-mix(in oklch, var(--accent) 18%, var(--color-background));
-}
-
-
-/* ========================================
-   DUOTONE IMAGE FILTERS
-   Theme-aware image color overlays
-   ======================================== */
-
-/* Duotone colors per palette */
-[data-palette="fluid"] {
-  --duotone-dark: oklch(0.30 0.08 220);
-  --duotone-light: oklch(0.70 0.12 200);
-}
-
-[data-palette="morandi"] {
-  --duotone-dark: oklch(0.35 0.04 60);
-  --duotone-light: oklch(0.75 0.04 80);
-}
-
-[data-palette="bold"] {
-  --duotone-dark: oklch(0.30 0.15 25);
-  --duotone-light: oklch(0.65 0.20 30);
-}
-
-[data-palette="pastel"] {
-  --duotone-dark: oklch(0.50 0.08 200);
-  --duotone-light: oklch(0.88 0.06 180);
-}
-
-[data-palette="earth"] {
-  --duotone-dark: oklch(0.30 0.08 55);
-  --duotone-light: oklch(0.60 0.10 70);
-}
-
-[data-palette="mono"] {
-  --duotone-dark: oklch(0.25 0.02 250);
-  --duotone-light: oklch(0.70 0.02 250);
-}
-
-[data-palette="80s"] {
-  --duotone-dark: oklch(0.25 0.20 300);
-  --duotone-light: oklch(0.65 0.25 330);
-}
-
-[data-palette="matrix"] {
-  --duotone-dark: oklch(0.15 0.10 145);
-  --duotone-light: oklch(0.60 0.22 145);
-}
-
-[data-palette="subtle"] {
-  --duotone-dark: oklch(0.35 0.06 180);
-  --duotone-light: oklch(0.65 0.08 170);
-}
-
-[data-palette="tsunami"] {
-  --duotone-dark: oklch(0.15 0.10 250);
-  --duotone-light: oklch(0.40 0.12 210);
-}
-
-[data-palette="brutalist"] {
-  --duotone-dark: oklch(0 0 0);
-  --duotone-light: oklch(1 0 0);
-}
-
-[data-palette="editorial"] {
-  --duotone-dark: oklch(0.30 0.04 50);
-  --duotone-light: oklch(0.80 0.03 60);
-}
-
-[data-palette="neon"] {
-  --duotone-dark: oklch(0.10 0.15 280);
-  --duotone-light: oklch(0.70 0.25 320);
-}
-
-
-/* ========================================
-   PALETTE BACKGROUND TOKENS
-   Light/Dark/Neutral for visual hierarchy
-   ======================================== */
-
-/* Base backgrounds - subtle variations from palette */
-[data-palette] {
-  --bg-light: color-mix(in oklch, var(--palette-5) 8%, var(--color-background));
-  --bg-neutral: color-mix(in oklch, var(--palette-3) 12%, var(--color-background));
-  --bg-dark: color-mix(in oklch, var(--palette-1) 15%, var(--color-background));
-}
-
-/* Mono: gray scale backgrounds */
-[data-palette="mono"] {
-  --bg-light: oklch(from var(--color-background) calc(l - 0.02) 0.01 250);
-  --bg-neutral: oklch(from var(--color-background) calc(l - 0.05) 0.02 250);
-  --bg-dark: oklch(from var(--color-background) calc(l - 0.10) 0.02 250);
-}
-
-/* Bold: stronger colored backgrounds */
-[data-palette="bold"] {
-  --bg-light: color-mix(in oklch, var(--palette-3) 10%, var(--color-background));
-  --bg-neutral: color-mix(in oklch, var(--palette-5) 15%, var(--color-background));
-  --bg-dark: color-mix(in oklch, var(--palette-1) 18%, var(--color-background));
-}
-
-/* Matrix: dark terminal feel */
-[data-palette="matrix"] {
-  --bg-light: color-mix(in oklch, var(--palette-1) 5%, var(--color-background));
-  --bg-neutral: color-mix(in oklch, var(--palette-4) 12%, var(--color-background));
-  --bg-dark: color-mix(in oklch, var(--palette-6) 20%, var(--color-background));
-}
-
-/* Tsunami: deep ocean layers */
-[data-palette="tsunami"] {
-  --bg-light: color-mix(in oklch, var(--palette-5) 15%, var(--color-background));
-  --bg-neutral: color-mix(in oklch, var(--palette-3) 25%, var(--color-background));
-  --bg-dark: color-mix(in oklch, var(--palette-1) 35%, var(--color-background));
-}
-
-
-/* ========================================
-   THEME-SPECIFIC SECTION COLORS
-   Alternating backgrounds per motion style
-   ======================================== */
-
-/* Still: Clean white/near-white with subtle gray alternation */
-[data-motion="still"] {
-  --section-1: var(--color-background);
-  --section-2: oklch(from var(--color-background) calc(l - 0.02) 0.01 250);
-  --section-3: var(--color-background);
-  --section-accent: oklch(from var(--color-background) calc(l - 0.04) 0.02 250);
-}
-
-/* Serene: Warm cream tones, editorial feel */
-[data-motion="serene"] {
-  --section-1: oklch(from var(--color-background) l 0.01 60);
-  --section-2: oklch(from var(--color-background) calc(l - 0.02) 0.02 70);
-  --section-3: oklch(from var(--color-background) l 0.015 50);
-  --section-accent: color-mix(in oklch, var(--accent) 8%, var(--color-background));
-}
-
-/* Stream: Cool, minimal alternation */
-[data-motion="stream"] {
-  --section-1: var(--color-background);
-  --section-2: color-mix(in oklch, var(--accent) 4%, var(--color-background));
-  --section-3: var(--color-background);
-  --section-accent: color-mix(in oklch, var(--accent) 10%, var(--color-background));
-}
-
-/* Flowing: Balanced, water-inspired blues */
-[data-motion="flowing"] {
-  --section-1: var(--color-background);
-  --section-2: color-mix(in oklch, var(--accent) 6%, var(--color-background));
-  --section-3: oklch(from var(--color-background) calc(l - 0.01) 0.02 220);
-  --section-accent: color-mix(in oklch, var(--accent) 12%, var(--color-background));
-}
-
-/* Cascade: Soft pastel alternation */
-[data-motion="cascade"] {
-  --section-1: var(--color-background);
-  --section-2: color-mix(in oklch, var(--accent) 8%, var(--color-background));
-  --section-3: oklch(from var(--color-background) l 0.03 180);
-  --section-accent: color-mix(in oklch, var(--accent) 15%, var(--color-background));
-}
-
-/* Rapids: Bold, energetic color bands using palette backgrounds */
-[data-motion="rapids"] {
-  --section-1: var(--bg-light);
-  --section-2: var(--bg-neutral);
-  --section-3: var(--color-background);
-  --section-accent: var(--bg-dark);
-}
-
-/* Tsunami: Dramatic deep ocean sections with strong hierarchy */
-[data-motion="tsunami"] {
-  --section-1: var(--bg-neutral);
-  --section-2: var(--bg-dark);
-  --section-3: var(--bg-light);
-  --section-accent: color-mix(in oklch, var(--accent) 30%, var(--bg-dark));
-}
-
-/* Brutalist: Stark black/white alternation, no softness */
-[data-motion="brutalist"] {
-  --section-1: var(--color-background);
-  --section-2: var(--color-border);
-  --section-3: var(--color-background);
-  --section-accent: var(--color-text);
-}
-
-/* Editorial: Warm, subtle cream variations */
-[data-motion="editorial"] {
-  --section-1: oklch(98% 0.01 60);
-  --section-2: oklch(96% 0.015 65);
-  --section-3: oklch(97% 0.01 55);
-  --section-accent: oklch(94% 0.02 50);
-}
-
-/* Neon: Dark sections with subtle purple variation */
-[data-motion="neon"] {
-  --section-1: oklch(8% 0.02 280);
-  --section-2: oklch(10% 0.03 290);
-  --section-3: oklch(6% 0.02 270);
-  --section-accent: oklch(15% 0.08 320);
-}
-
 
-/* ========================================
-   FULL THEME OVERRIDES
-   Themes that customize entire color palette
-   Apply via: <html data-theme="ocean">
-   ======================================== */
 
-/*
-[data-theme="ocean"] {
-  --theme-dark: oklch(15% 0.03 230);
-  --theme-light: oklch(98% 0.01 230);
-  --accent: oklch(50% 0.15 230);
+  /* PAGE TRANSITIONS are opt-in and not in this file. A site that wants
+     cross-document transitions adds, in its own stylesheet:
+       @media (prefers-reduced-motion: no-preference) {
+         @view-transition { navigation: auto; }
+       }
+     and gets the browser's own short cross-fade. */
 }
-*/