@gradeui/ui 3.2.0 → 4.0.0

package/styles/globals.css

@@ -684,6 +684,7 @@
   --surface-alpha-translucent: 0.82;
   --surface-alpha-glass: 0.58;
   --surface-alpha-glass-strong: 0.42;
+  --surface-alpha-frosted: 0.92; /* near-opaque, just a whisper of the page behind */
 
   /* -- Atomic blurs -- */
   --surface-blur-subtle: 6px;
@@ -699,6 +700,7 @@
   --surface-translucent: oklch(var(--card) / var(--surface-alpha-translucent));
   --surface-glass: oklch(var(--card) / var(--surface-alpha-glass));
   --surface-glass-strong: oklch(var(--card) / var(--surface-alpha-glass-strong));
+  --surface-frosted: oklch(var(--card) / var(--surface-alpha-frosted));
 
   /* ============================================
      AURA SYSTEM
@@ -773,6 +775,8 @@
      ---------------------------------------- */
   --background: 0.985 0.0018 85;          /* neutral 50 */
   --foreground: 0.170 0.0048 85;          /* neutral 950 */
+  --bg-base: 0.985 0.0018 85;             /* stable mirror for scope-inverse */
+  --fg-base: 0.170 0.0048 85;
   --card: 1 0 0;                            /* pure white */
   --card-foreground: 0.170 0.0048 85;
   --popover: 1 0 0;
@@ -1008,6 +1012,8 @@
      ---------------------------------------- */
   --background: 0.170 0.0048 85;
   --foreground: 0.985 0.0018 85;
+  --bg-base: 0.170 0.0048 85;
+  --fg-base: 0.985 0.0018 85;
   --card: 0.245 0.0096 85;                  /* neutral 900 */
   --card-foreground: 0.985 0.0018 85;
   --popover: 0.245 0.0096 85;
@@ -1087,6 +1093,7 @@
   --surface-alpha-translucent: 0.74;
   --surface-alpha-glass: 0.48;
   --surface-alpha-glass-strong: 0.32;
+  --surface-alpha-frosted: 0.88;
   --surface-edge-alpha: 0.06;
 
   /* Code surface tokens — dark mode mirror. Background sits a touch
@@ -1123,6 +1130,8 @@
 :root[data-grade-theme="energy"] {
   --background: 0.985 0.0012 175;           /* neutral 50 */
   --foreground: 0.170 0.0032 175;           /* neutral 950 */
+  --bg-base: 0.985 0.0012 175;
+  --fg-base: 0.170 0.0032 175;
   --card: 1 0 0;
   --card-foreground: 0.170 0.0032 175;
   --popover: 1 0 0;
@@ -1147,6 +1156,8 @@
 .dark[data-grade-theme="energy"] {
   --background: 0.170 0.0032 175;
   --foreground: 0.985 0.0012 175;
+  --bg-base: 0.170 0.0032 175;
+  --fg-base: 0.985 0.0012 175;
   --card: 0.245 0.0064 175;
   --card-foreground: 0.985 0.0012 175;
   --popover: 0.245 0.0064 175;
@@ -1523,6 +1534,17 @@
   box-shadow: var(--surface-edge);
 }
 
+/* Frosted — near-opaque (≈0.92) but keeps the strong blur, so it reads almost
+   solid with just a halo of the page behind. The most solid of the blurred
+   surfaces; above this, reach for `solid`. */
+.gds-surface-frosted {
+  background-color: var(--surface-frosted);
+  backdrop-filter: blur(var(--surface-blur-strong));
+  -webkit-backdrop-filter: blur(var(--surface-blur-strong));
+  border: 1px solid oklch(var(--border) / 0.4);
+  box-shadow: var(--surface-edge);
+}
+
 /* ============================================
    AURA — RING (pulsing outer halo)
    ============================================
@@ -1725,22 +1747,15 @@
 }
 
 /* ============================================
-   MAP MARKER LIFT — every pin gets a border
+   MAP MARKER — intentionally unstyled
    ============================================
-   Map tiles are external imagery and don't follow the theme, so marker
-   content (Badge price pins, numbered markers, avatars) can melt into
-   them — illegible dark-on-dark pins were the symptom. Guarantee the
-   lift at the DS level: every DIRECT child of a MapMarker's content
-   wrapper gets a 1px border + ambient shadow from the mode-aware
-   `--gds-map-marker-*` pair (light hairline on dark tiles, dark line
-   on light). Being unlayered, this wins over a Badge's own
-   border-transparent utility — deliberate: the border is the floor,
-   not a suggestion. Backgrounds/text are NOT touched; content keeps
-   its own surface tokens. */
-[data-gds-part="map-marker-content"] > * {
-  border: 1px solid var(--gds-map-marker-border);
-  box-shadow: var(--gds-map-marker-shadow);
-}
+   Marker content (Badge price pins, numbered markers, avatars, custom pin
+   types) is the CONSUMER's design. The DS used to force a 1px border + ambient
+   shadow on every direct child of a marker as a legibility "floor", but that's
+   too opinionated for a primitive — it imposed a look on content you supply.
+   Removed. The mode-aware `--gds-map-marker-border` / `--gds-map-marker-shadow`
+   tokens remain defined, and `.gds-map-label` (below) still gives text a halo,
+   so legibility on busy tiles is OPT-IN, not mandatory. */
 
 /* Floating map label halo — put this class on a text element inside a
    MapMarker to give it a mode-aware outline (white on light tiles,
@@ -2072,6 +2087,569 @@ html[data-gds-streaming] body * {
   }
 }
 
+@layer utilities {
+  /* Colour SCOPES (STUDIO-COLOR.md) — a local colour mode, the same idea as
+     light/dark but scoped to a wrapper and focused on surfaces.
+     Apply `scope-inverse` (etc.) to any element and it becomes a mini themed
+     region: it re-points the SURFACE family of tokens — page background, card,
+     popover, muted, border, and every foreground — at the named pair, so the
+     whole subtree re-tones (a dark band with light text, cards that sit on the
+     band instead of glaring white). Descendants keep using the ordinary tokens
+     (bg-background / text-foreground / bg-card); only what they resolve to
+     changes. It deliberately leaves the ACTION colours (--primary / --accent /
+     --secondary / --destructive) untouched, so a CTA stays branded and vivid
+     on top of the band.
+     `inverse` reads --fg-base / --bg-base (stable literal mirrors of the page
+     ink/paper that the generator emits) so the fg/bg swap can't form a custom-
+     property cycle; the other scopes read the theme's own tokens directly. */
+  .scope-default,
+  .scope-inverse,
+  .scope-brand,
+  .scope-accent,
+  .scope-muted,
+  .scope-card {
+    background-color: oklch(var(--background));
+    color: oklch(var(--foreground));
+  }
+  /* default = identity: paints the page tokens as-is, no overrides. */
+  .scope-inverse {
+    --background: var(--fg-base);
+    --foreground: var(--bg-base);
+    --card: var(--fg-base);
+    --card-foreground: var(--bg-base);
+    --popover: var(--fg-base);
+    --popover-foreground: var(--bg-base);
+    --muted: var(--fg-base);
+    --muted-foreground: var(--bg-base);
+    --border: var(--bg-base);
+    --input: var(--bg-base);
+  }
+  .scope-brand {
+    --background: var(--primary);
+    --foreground: var(--primary-foreground);
+    --card: var(--primary);
+    --card-foreground: var(--primary-foreground);
+    --popover: var(--primary);
+    --popover-foreground: var(--primary-foreground);
+    --muted: var(--primary);
+    --muted-foreground: var(--primary-foreground);
+    --border: var(--primary-foreground);
+    --input: var(--primary-foreground);
+  }
+  .scope-accent {
+    --background: var(--accent);
+    --foreground: var(--accent-foreground);
+    --card: var(--accent);
+    --card-foreground: var(--accent-foreground);
+    --popover: var(--accent);
+    --popover-foreground: var(--accent-foreground);
+    --muted: var(--accent);
+    --muted-foreground: var(--accent-foreground);
+    --border: var(--accent-foreground);
+    --input: var(--accent-foreground);
+  }
+  .scope-muted {
+    --background: var(--muted);
+    --card: var(--muted);
+    --popover: var(--muted);
+    /* foreground + muted-foreground stay the page's: already tuned to read on
+       a muted surface. */
+  }
+  .scope-card {
+    --background: var(--card);
+    --foreground: var(--card-foreground);
+    --popover: var(--card);
+    --popover-foreground: var(--card-foreground);
+    --muted-foreground: var(--card-foreground);
+  }
+}
+
+/* ============================================
+   EXPRESSIVE colour layer — see STUDIO-EXPRESSIVE.md
+   A highlight layer for painting whole SECTIONS, deliberately louder than the
+   neutral product chrome (marketing bands, feature cards, promo strips).
+   Orthogonal to the surface scopes above: it does NOT touch --primary/--accent,
+   so it stacks on top of any theme. Two attributes resolve a section's colour:
+     data-expressive="accent1..5"   picks one of 5 accent slots
+     data-expressive-tier="…"       picks one of 4 tiers (default: light)
+   …landing an accessible pair on --gds-expressive-bg / --gds-expressive-fg,
+   which the `.expressive` helper paints. Values mirror the Figma "Expressive"
+   collection (accent1..5 = rose, orange, amber, yellow, olive). The accents are
+   fixed ramps today; the generator will later write them from one hue per slot
+   — the token shape stays identical. Tiers use ramp steps 100/300/700/900. */
+:root {
+  --gds-expressive-accent1-100: #ffe9e6; --gds-expressive-accent1-300: #ffaaa2; --gds-expressive-accent1-700: #8b181d; --gds-expressive-accent1-900: #3f0b0b;
+  --gds-expressive-accent2-100: #ffeae0; --gds-expressive-accent2-300: #ffae89; --gds-expressive-accent2-700: #822c00; --gds-expressive-accent2-900: #3c1100;
+  --gds-expressive-accent3-100: #ffecd8; --gds-expressive-accent3-300: #f6b575; --gds-expressive-accent3-700: #743b00; --gds-expressive-accent3-900: #331900;
+  --gds-expressive-accent4-100: #fdefd2; --gds-expressive-accent4-300: #e5bf6d; --gds-expressive-accent4-700: #634600; --gds-expressive-accent4-900: #2d1d00;
+  --gds-expressive-accent5-100: #f4f2d4; --gds-expressive-accent5-300: #cfc871; --gds-expressive-accent5-700: #544e00; --gds-expressive-accent5-900: #252100;
+}
+
+/* accent slot → generic step vars */
+[data-expressive="accent1"] { --exp-100: var(--gds-expressive-accent1-100); --exp-300: var(--gds-expressive-accent1-300); --exp-700: var(--gds-expressive-accent1-700); --exp-900: var(--gds-expressive-accent1-900); }
+[data-expressive="accent2"] { --exp-100: var(--gds-expressive-accent2-100); --exp-300: var(--gds-expressive-accent2-300); --exp-700: var(--gds-expressive-accent2-700); --exp-900: var(--gds-expressive-accent2-900); }
+[data-expressive="accent3"] { --exp-100: var(--gds-expressive-accent3-100); --exp-300: var(--gds-expressive-accent3-300); --exp-700: var(--gds-expressive-accent3-700); --exp-900: var(--gds-expressive-accent3-900); }
+[data-expressive="accent4"] { --exp-100: var(--gds-expressive-accent4-100); --exp-300: var(--gds-expressive-accent4-300); --exp-700: var(--gds-expressive-accent4-700); --exp-900: var(--gds-expressive-accent4-900); }
+[data-expressive="accent5"] { --exp-100: var(--gds-expressive-accent5-100); --exp-300: var(--gds-expressive-accent5-300); --exp-700: var(--gds-expressive-accent5-700); --exp-900: var(--gds-expressive-accent5-900); }
+
+/* tier → which steps become bg / fg (default = light) */
+[data-expressive] { --gds-expressive-bg: var(--exp-300); --gds-expressive-fg: var(--exp-900); }
+[data-expressive][data-expressive-tier="superlight"] { --gds-expressive-bg: var(--exp-100); --gds-expressive-fg: var(--exp-900); }
+[data-expressive][data-expressive-tier="light"]      { --gds-expressive-bg: var(--exp-300); --gds-expressive-fg: var(--exp-900); }
+[data-expressive][data-expressive-tier="dark"]       { --gds-expressive-bg: var(--exp-700); --gds-expressive-fg: var(--exp-100); }
+[data-expressive][data-expressive-tier="superdark"]  { --gds-expressive-bg: var(--exp-900); --gds-expressive-fg: var(--exp-100); }
+
+/* the surface helper a section wears: paints the resolved expressive pair */
+.expressive { background-color: var(--gds-expressive-bg); color: var(--gds-expressive-fg); }
+
+/* ============================================
+   REVEAL — scroll-in motion for sections (and any element). Token-driven:
+   reuses the DS transition durations + eases (above), adds a reveal distance.
+   An element with `data-reveal` starts hidden/offset; an IntersectionObserver
+   in the consumer adds `.in-view` to animate it in. Entirely disabled under
+   prefers-reduced-motion (the hidden state lives inside the media query, so
+   content is always visible if motion is off or JS never runs). */
+:root {
+  --gds-reveal-distance: 1.25rem;
+  --gds-reveal-duration: var(--gds-transition-slower); /* 500ms */
+  --gds-reveal-ease: var(--gds-ease-out);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  [data-reveal] {
+    opacity: 0;
+    transform: translateY(var(--gds-reveal-distance));
+    transition:
+      opacity var(--gds-reveal-duration) var(--gds-reveal-ease),
+      transform var(--gds-reveal-duration) var(--gds-reveal-ease);
+    will-change: opacity, transform;
+  }
+  [data-reveal="fade"] { transform: none; }
+  [data-reveal="fade-down"] { transform: translateY(calc(-1 * var(--gds-reveal-distance))); }
+  [data-reveal="fade-left"] { transform: translateX(var(--gds-reveal-distance)); }
+  [data-reveal="fade-right"] { transform: translateX(calc(-1 * var(--gds-reveal-distance))); }
+  [data-reveal].in-view {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* ============================================
+   TYPE SCALE — scoped, switchable, fluid (mobile → desktop)
+   ============================================
+   Two scales, one fluid ramp. Pick a mobile + a desktop scale and the whole
+   --text-* ramp (Tailwind 2xs…7xl + semantic display/h1…body) interpolates
+   between them by viewport, CLAMPED to the mobile floor and desktop ceiling
+   (the clamp lives on --ts-fluid: 0→1, so values never exceed either end):
+     data-type-scale-mobile="minor-third"  data-type-scale-desktop="perfect-fifth"
+   Shorthand (flat): data-type-scale="major-third" (sets both). Assign to :root,
+   a page, or any element — composes via the cascade like the colour scopes.
+
+   ASYMMETRIC by design: steps go UP at the chosen ratio but DOWN capped at
+   major-third, so a dramatic display scale keeps sm/xs/2xs readable instead of
+   shrinking body/caption text into the floor. Generated from @gradeui/core. */
+
+[data-type-scale-mobile="minor-second"] {
+  --tsm-2xs: 0.823rem;
+  --tsm-xs: 0.878rem;
+  --tsm-sm: 0.937rem;
+  --tsm-base: 1rem;
+  --tsm-lg: 1.067rem;
+  --tsm-xl: 1.138rem;
+  --tsm-2xl: 1.215rem;
+  --tsm-3xl: 1.296rem;
+  --tsm-4xl: 1.383rem;
+  --tsm-5xl: 1.476rem;
+  --tsm-6xl: 1.575rem;
+  --tsm-7xl: 1.68rem;
+}
+[data-type-scale-desktop="minor-second"] {
+  --tsd-2xs: 0.823rem;
+  --tsd-xs: 0.878rem;
+  --tsd-sm: 0.937rem;
+  --tsd-base: 1rem;
+  --tsd-lg: 1.067rem;
+  --tsd-xl: 1.138rem;
+  --tsd-2xl: 1.215rem;
+  --tsd-3xl: 1.296rem;
+  --tsd-4xl: 1.383rem;
+  --tsd-5xl: 1.476rem;
+  --tsd-6xl: 1.575rem;
+  --tsd-7xl: 1.68rem;
+}
+[data-type-scale="minor-second"] {
+  --tsm-2xs: 0.823rem; --tsd-2xs: 0.823rem;
+  --tsm-xs: 0.878rem; --tsd-xs: 0.878rem;
+  --tsm-sm: 0.937rem; --tsd-sm: 0.937rem;
+  --tsm-base: 1rem; --tsd-base: 1rem;
+  --tsm-lg: 1.067rem; --tsd-lg: 1.067rem;
+  --tsm-xl: 1.138rem; --tsd-xl: 1.138rem;
+  --tsm-2xl: 1.215rem; --tsd-2xl: 1.215rem;
+  --tsm-3xl: 1.296rem; --tsd-3xl: 1.296rem;
+  --tsm-4xl: 1.383rem; --tsd-4xl: 1.383rem;
+  --tsm-5xl: 1.476rem; --tsd-5xl: 1.476rem;
+  --tsm-6xl: 1.575rem; --tsd-6xl: 1.575rem;
+  --tsm-7xl: 1.68rem; --tsd-7xl: 1.68rem;
+}
+
+[data-type-scale-mobile="major-second"] {
+  --tsm-2xs: 0.702rem;
+  --tsm-xs: 0.79rem;
+  --tsm-sm: 0.889rem;
+  --tsm-base: 1rem;
+  --tsm-lg: 1.125rem;
+  --tsm-xl: 1.266rem;
+  --tsm-2xl: 1.424rem;
+  --tsm-3xl: 1.602rem;
+  --tsm-4xl: 1.802rem;
+  --tsm-5xl: 2.027rem;
+  --tsm-6xl: 2.281rem;
+  --tsm-7xl: 2.566rem;
+}
+[data-type-scale-desktop="major-second"] {
+  --tsd-2xs: 0.702rem;
+  --tsd-xs: 0.79rem;
+  --tsd-sm: 0.889rem;
+  --tsd-base: 1rem;
+  --tsd-lg: 1.125rem;
+  --tsd-xl: 1.266rem;
+  --tsd-2xl: 1.424rem;
+  --tsd-3xl: 1.602rem;
+  --tsd-4xl: 1.802rem;
+  --tsd-5xl: 2.027rem;
+  --tsd-6xl: 2.281rem;
+  --tsd-7xl: 2.566rem;
+}
+[data-type-scale="major-second"] {
+  --tsm-2xs: 0.702rem; --tsd-2xs: 0.702rem;
+  --tsm-xs: 0.79rem; --tsd-xs: 0.79rem;
+  --tsm-sm: 0.889rem; --tsd-sm: 0.889rem;
+  --tsm-base: 1rem; --tsd-base: 1rem;
+  --tsm-lg: 1.125rem; --tsd-lg: 1.125rem;
+  --tsm-xl: 1.266rem; --tsd-xl: 1.266rem;
+  --tsm-2xl: 1.424rem; --tsd-2xl: 1.424rem;
+  --tsm-3xl: 1.602rem; --tsd-3xl: 1.602rem;
+  --tsm-4xl: 1.802rem; --tsd-4xl: 1.802rem;
+  --tsm-5xl: 2.027rem; --tsd-5xl: 2.027rem;
+  --tsm-6xl: 2.281rem; --tsd-6xl: 2.281rem;
+  --tsm-7xl: 2.566rem; --tsd-7xl: 2.566rem;
+}
+
+[data-type-scale-mobile="minor-third"] {
+  --tsm-2xs: 0.625rem;
+  --tsm-xs: 0.694rem;
+  --tsm-sm: 0.833rem;
+  --tsm-base: 1rem;
+  --tsm-lg: 1.2rem;
+  --tsm-xl: 1.44rem;
+  --tsm-2xl: 1.728rem;
+  --tsm-3xl: 2.074rem;
+  --tsm-4xl: 2.488rem;
+  --tsm-5xl: 2.986rem;
+  --tsm-6xl: 3.583rem;
+  --tsm-7xl: 4.3rem;
+}
+[data-type-scale-desktop="minor-third"] {
+  --tsd-2xs: 0.625rem;
+  --tsd-xs: 0.694rem;
+  --tsd-sm: 0.833rem;
+  --tsd-base: 1rem;
+  --tsd-lg: 1.2rem;
+  --tsd-xl: 1.44rem;
+  --tsd-2xl: 1.728rem;
+  --tsd-3xl: 2.074rem;
+  --tsd-4xl: 2.488rem;
+  --tsd-5xl: 2.986rem;
+  --tsd-6xl: 3.583rem;
+  --tsd-7xl: 4.3rem;
+}
+[data-type-scale="minor-third"] {
+  --tsm-2xs: 0.625rem; --tsd-2xs: 0.625rem;
+  --tsm-xs: 0.694rem; --tsd-xs: 0.694rem;
+  --tsm-sm: 0.833rem; --tsd-sm: 0.833rem;
+  --tsm-base: 1rem; --tsd-base: 1rem;
+  --tsm-lg: 1.2rem; --tsd-lg: 1.2rem;
+  --tsm-xl: 1.44rem; --tsd-xl: 1.44rem;
+  --tsm-2xl: 1.728rem; --tsd-2xl: 1.728rem;
+  --tsm-3xl: 2.074rem; --tsd-3xl: 2.074rem;
+  --tsm-4xl: 2.488rem; --tsd-4xl: 2.488rem;
+  --tsm-5xl: 2.986rem; --tsd-5xl: 2.986rem;
+  --tsm-6xl: 3.583rem; --tsd-6xl: 3.583rem;
+  --tsm-7xl: 4.3rem; --tsd-7xl: 4.3rem;
+}
+
+[data-type-scale-mobile="major-third"] {
+  --tsm-2xs: 0.625rem;
+  --tsm-xs: 0.64rem;
+  --tsm-sm: 0.8rem;
+  --tsm-base: 1rem;
+  --tsm-lg: 1.25rem;
+  --tsm-xl: 1.563rem;
+  --tsm-2xl: 1.953rem;
+  --tsm-3xl: 2.441rem;
+  --tsm-4xl: 3.052rem;
+  --tsm-5xl: 3.815rem;
+  --tsm-6xl: 4.768rem;
+  --tsm-7xl: 5.96rem;
+}
+[data-type-scale-desktop="major-third"] {
+  --tsd-2xs: 0.625rem;
+  --tsd-xs: 0.64rem;
+  --tsd-sm: 0.8rem;
+  --tsd-base: 1rem;
+  --tsd-lg: 1.25rem;
+  --tsd-xl: 1.563rem;
+  --tsd-2xl: 1.953rem;
+  --tsd-3xl: 2.441rem;
+  --tsd-4xl: 3.052rem;
+  --tsd-5xl: 3.815rem;
+  --tsd-6xl: 4.768rem;
+  --tsd-7xl: 5.96rem;
+}
+[data-type-scale="major-third"] {
+  --tsm-2xs: 0.625rem; --tsd-2xs: 0.625rem;
+  --tsm-xs: 0.64rem; --tsd-xs: 0.64rem;
+  --tsm-sm: 0.8rem; --tsd-sm: 0.8rem;
+  --tsm-base: 1rem; --tsd-base: 1rem;
+  --tsm-lg: 1.25rem; --tsd-lg: 1.25rem;
+  --tsm-xl: 1.563rem; --tsd-xl: 1.563rem;
+  --tsm-2xl: 1.953rem; --tsd-2xl: 1.953rem;
+  --tsm-3xl: 2.441rem; --tsd-3xl: 2.441rem;
+  --tsm-4xl: 3.052rem; --tsd-4xl: 3.052rem;
+  --tsm-5xl: 3.815rem; --tsd-5xl: 3.815rem;
+  --tsm-6xl: 4.768rem; --tsd-6xl: 4.768rem;
+  --tsm-7xl: 5.96rem; --tsd-7xl: 5.96rem;
+}
+
+[data-type-scale-mobile="perfect-fourth"] {
+  --tsm-2xs: 0.625rem;
+  --tsm-xs: 0.64rem;
+  --tsm-sm: 0.8rem;
+  --tsm-base: 1rem;
+  --tsm-lg: 1.333rem;
+  --tsm-xl: 1.777rem;
+  --tsm-2xl: 2.369rem;
+  --tsm-3xl: 3.157rem;
+  --tsm-4xl: 4.209rem;
+  --tsm-5xl: 5.61rem;
+  --tsm-6xl: 7.478rem;
+  --tsm-7xl: 9.969rem;
+}
+[data-type-scale-desktop="perfect-fourth"] {
+  --tsd-2xs: 0.625rem;
+  --tsd-xs: 0.64rem;
+  --tsd-sm: 0.8rem;
+  --tsd-base: 1rem;
+  --tsd-lg: 1.333rem;
+  --tsd-xl: 1.777rem;
+  --tsd-2xl: 2.369rem;
+  --tsd-3xl: 3.157rem;
+  --tsd-4xl: 4.209rem;
+  --tsd-5xl: 5.61rem;
+  --tsd-6xl: 7.478rem;
+  --tsd-7xl: 9.969rem;
+}
+[data-type-scale="perfect-fourth"] {
+  --tsm-2xs: 0.625rem; --tsd-2xs: 0.625rem;
+  --tsm-xs: 0.64rem; --tsd-xs: 0.64rem;
+  --tsm-sm: 0.8rem; --tsd-sm: 0.8rem;
+  --tsm-base: 1rem; --tsd-base: 1rem;
+  --tsm-lg: 1.333rem; --tsd-lg: 1.333rem;
+  --tsm-xl: 1.777rem; --tsd-xl: 1.777rem;
+  --tsm-2xl: 2.369rem; --tsd-2xl: 2.369rem;
+  --tsm-3xl: 3.157rem; --tsd-3xl: 3.157rem;
+  --tsm-4xl: 4.209rem; --tsd-4xl: 4.209rem;
+  --tsm-5xl: 5.61rem; --tsd-5xl: 5.61rem;
+  --tsm-6xl: 7.478rem; --tsd-6xl: 7.478rem;
+  --tsm-7xl: 9.969rem; --tsd-7xl: 9.969rem;
+}
+
+[data-type-scale-mobile="augmented-fourth"] {
+  --tsm-2xs: 0.625rem;
+  --tsm-xs: 0.64rem;
+  --tsm-sm: 0.8rem;
+  --tsm-base: 1rem;
+  --tsm-lg: 1.414rem;
+  --tsm-xl: 1.999rem;
+  --tsm-2xl: 2.827rem;
+  --tsm-3xl: 3.998rem;
+  --tsm-4xl: 5.653rem;
+  --tsm-5xl: 7.993rem;
+  --tsm-6xl: 11.302rem;
+  --tsm-7xl: 15.981rem;
+}
+[data-type-scale-desktop="augmented-fourth"] {
+  --tsd-2xs: 0.625rem;
+  --tsd-xs: 0.64rem;
+  --tsd-sm: 0.8rem;
+  --tsd-base: 1rem;
+  --tsd-lg: 1.414rem;
+  --tsd-xl: 1.999rem;
+  --tsd-2xl: 2.827rem;
+  --tsd-3xl: 3.998rem;
+  --tsd-4xl: 5.653rem;
+  --tsd-5xl: 7.993rem;
+  --tsd-6xl: 11.302rem;
+  --tsd-7xl: 15.981rem;
+}
+[data-type-scale="augmented-fourth"] {
+  --tsm-2xs: 0.625rem; --tsd-2xs: 0.625rem;
+  --tsm-xs: 0.64rem; --tsd-xs: 0.64rem;
+  --tsm-sm: 0.8rem; --tsd-sm: 0.8rem;
+  --tsm-base: 1rem; --tsd-base: 1rem;
+  --tsm-lg: 1.414rem; --tsd-lg: 1.414rem;
+  --tsm-xl: 1.999rem; --tsd-xl: 1.999rem;
+  --tsm-2xl: 2.827rem; --tsd-2xl: 2.827rem;
+  --tsm-3xl: 3.998rem; --tsd-3xl: 3.998rem;
+  --tsm-4xl: 5.653rem; --tsd-4xl: 5.653rem;
+  --tsm-5xl: 7.993rem; --tsd-5xl: 7.993rem;
+  --tsm-6xl: 11.302rem; --tsd-6xl: 11.302rem;
+  --tsm-7xl: 15.981rem; --tsd-7xl: 15.981rem;
+}
+
+[data-type-scale-mobile="perfect-fifth"] {
+  --tsm-2xs: 0.625rem;
+  --tsm-xs: 0.64rem;
+  --tsm-sm: 0.8rem;
+  --tsm-base: 1rem;
+  --tsm-lg: 1.5rem;
+  --tsm-xl: 2.25rem;
+  --tsm-2xl: 3.375rem;
+  --tsm-3xl: 5.063rem;
+  --tsm-4xl: 7.594rem;
+  --tsm-5xl: 11.391rem;
+  --tsm-6xl: 17.086rem;
+  --tsm-7xl: 25.629rem;
+}
+[data-type-scale-desktop="perfect-fifth"] {
+  --tsd-2xs: 0.625rem;
+  --tsd-xs: 0.64rem;
+  --tsd-sm: 0.8rem;
+  --tsd-base: 1rem;
+  --tsd-lg: 1.5rem;
+  --tsd-xl: 2.25rem;
+  --tsd-2xl: 3.375rem;
+  --tsd-3xl: 5.063rem;
+  --tsd-4xl: 7.594rem;
+  --tsd-5xl: 11.391rem;
+  --tsd-6xl: 17.086rem;
+  --tsd-7xl: 25.629rem;
+}
+[data-type-scale="perfect-fifth"] {
+  --tsm-2xs: 0.625rem; --tsd-2xs: 0.625rem;
+  --tsm-xs: 0.64rem; --tsd-xs: 0.64rem;
+  --tsm-sm: 0.8rem; --tsd-sm: 0.8rem;
+  --tsm-base: 1rem; --tsd-base: 1rem;
+  --tsm-lg: 1.5rem; --tsd-lg: 1.5rem;
+  --tsm-xl: 2.25rem; --tsd-xl: 2.25rem;
+  --tsm-2xl: 3.375rem; --tsd-2xl: 3.375rem;
+  --tsm-3xl: 5.063rem; --tsd-3xl: 5.063rem;
+  --tsm-4xl: 7.594rem; --tsd-4xl: 7.594rem;
+  --tsm-5xl: 11.391rem; --tsd-5xl: 11.391rem;
+  --tsm-6xl: 17.086rem; --tsd-6xl: 17.086rem;
+  --tsm-7xl: 25.629rem; --tsd-7xl: 25.629rem;
+}
+
+[data-type-scale-mobile="golden-ratio"] {
+  --tsm-2xs: 0.625rem;
+  --tsm-xs: 0.64rem;
+  --tsm-sm: 0.8rem;
+  --tsm-base: 1rem;
+  --tsm-lg: 1.618rem;
+  --tsm-xl: 2.618rem;
+  --tsm-2xl: 4.236rem;
+  --tsm-3xl: 6.854rem;
+  --tsm-4xl: 11.089rem;
+  --tsm-5xl: 17.942rem;
+  --tsm-6xl: 29.03rem;
+  --tsm-7xl: 46.971rem;
+}
+[data-type-scale-desktop="golden-ratio"] {
+  --tsd-2xs: 0.625rem;
+  --tsd-xs: 0.64rem;
+  --tsd-sm: 0.8rem;
+  --tsd-base: 1rem;
+  --tsd-lg: 1.618rem;
+  --tsd-xl: 2.618rem;
+  --tsd-2xl: 4.236rem;
+  --tsd-3xl: 6.854rem;
+  --tsd-4xl: 11.089rem;
+  --tsd-5xl: 17.942rem;
+  --tsd-6xl: 29.03rem;
+  --tsd-7xl: 46.971rem;
+}
+[data-type-scale="golden-ratio"] {
+  --tsm-2xs: 0.625rem; --tsd-2xs: 0.625rem;
+  --tsm-xs: 0.64rem; --tsd-xs: 0.64rem;
+  --tsm-sm: 0.8rem; --tsd-sm: 0.8rem;
+  --tsm-base: 1rem; --tsd-base: 1rem;
+  --tsm-lg: 1.618rem; --tsd-lg: 1.618rem;
+  --tsm-xl: 2.618rem; --tsd-xl: 2.618rem;
+  --tsm-2xl: 4.236rem; --tsd-2xl: 4.236rem;
+  --tsm-3xl: 6.854rem; --tsd-3xl: 6.854rem;
+  --tsm-4xl: 11.089rem; --tsd-4xl: 11.089rem;
+  --tsm-5xl: 17.942rem; --tsd-5xl: 17.942rem;
+  --tsm-6xl: 29.03rem; --tsd-6xl: 29.03rem;
+  --tsm-7xl: 46.971rem; --tsd-7xl: 46.971rem;
+}
+
+[data-type-scale], [data-type-scale-mobile], [data-type-scale-desktop] {
+  --ts-fluid: clamp(0, calc((100vw - 20rem) / 60rem), 1);
+  --text-2xs: calc(var(--tsm-2xs, var(--tsd-2xs)) + (var(--tsd-2xs, var(--tsm-2xs)) - var(--tsm-2xs, var(--tsd-2xs))) * var(--ts-fluid));
+  --text-xs: calc(var(--tsm-xs, var(--tsd-xs)) + (var(--tsd-xs, var(--tsm-xs)) - var(--tsm-xs, var(--tsd-xs))) * var(--ts-fluid));
+  --text-sm: calc(var(--tsm-sm, var(--tsd-sm)) + (var(--tsd-sm, var(--tsm-sm)) - var(--tsm-sm, var(--tsd-sm))) * var(--ts-fluid));
+  --text-base: calc(var(--tsm-base, var(--tsd-base)) + (var(--tsd-base, var(--tsm-base)) - var(--tsm-base, var(--tsd-base))) * var(--ts-fluid));
+  --text-lg: calc(var(--tsm-lg, var(--tsd-lg)) + (var(--tsd-lg, var(--tsm-lg)) - var(--tsm-lg, var(--tsd-lg))) * var(--ts-fluid));
+  --text-xl: calc(var(--tsm-xl, var(--tsd-xl)) + (var(--tsd-xl, var(--tsm-xl)) - var(--tsm-xl, var(--tsd-xl))) * var(--ts-fluid));
+  --text-2xl: calc(var(--tsm-2xl, var(--tsd-2xl)) + (var(--tsd-2xl, var(--tsm-2xl)) - var(--tsm-2xl, var(--tsd-2xl))) * var(--ts-fluid));
+  --text-3xl: calc(var(--tsm-3xl, var(--tsd-3xl)) + (var(--tsd-3xl, var(--tsm-3xl)) - var(--tsm-3xl, var(--tsd-3xl))) * var(--ts-fluid));
+  --text-4xl: calc(var(--tsm-4xl, var(--tsd-4xl)) + (var(--tsd-4xl, var(--tsm-4xl)) - var(--tsm-4xl, var(--tsd-4xl))) * var(--ts-fluid));
+  --text-5xl: calc(var(--tsm-5xl, var(--tsd-5xl)) + (var(--tsd-5xl, var(--tsm-5xl)) - var(--tsm-5xl, var(--tsd-5xl))) * var(--ts-fluid));
+  --text-6xl: calc(var(--tsm-6xl, var(--tsd-6xl)) + (var(--tsd-6xl, var(--tsm-6xl)) - var(--tsm-6xl, var(--tsd-6xl))) * var(--ts-fluid));
+  --text-7xl: calc(var(--tsm-7xl, var(--tsd-7xl)) + (var(--tsd-7xl, var(--tsm-7xl)) - var(--tsm-7xl, var(--tsd-7xl))) * var(--ts-fluid));
+  --text-display: var(--text-6xl);
+  --text-h1: var(--text-4xl);
+  --text-h2: var(--text-3xl);
+  --text-h3: var(--text-2xl);
+  --text-h4: var(--text-xl);
+  --text-h5: var(--text-lg);
+  --text-body-lg: var(--text-lg);
+  --text-h6: var(--text-base);
+  --text-body: var(--text-base);
+  --text-body-sm: var(--text-sm);
+}
+
+/* ============================================
+   SIZE SCALE — scoped, switchable, fluid (mobile → desktop)
+   ============================================
+   Same engine as the type scale, for SPACING. Re-points Tailwind's --spacing
+   base, so EVERY spacing utility (gap-*, p-*, m-*, size-*) re-pitches at once —
+   one knob for a page or section's whole density. Pick a mobile density + a
+   desktop density; --spacing interpolates between them by viewport, clamped.
+   Shorthand data-size-scale="comfortable" sets both (flat). Levels are density
+   presets (the --spacing base unit), not modular ratios — spacing is a linear
+   grid. Composes via the cascade like the type scale; drop data-size-scale=
+   "compact" on an embedded table/UI mockup to tighten just that region. */
+[data-size-scale-mobile="compact"]      { --ssm: 0.2rem; }
+[data-size-scale-mobile="cozy"]         { --ssm: 0.225rem; }
+[data-size-scale-mobile="comfortable"]  { --ssm: 0.25rem; }
+[data-size-scale-mobile="spacious"]     { --ssm: 0.3rem; }
+[data-size-scale-mobile="expansive"]    { --ssm: 0.35rem; }
+[data-size-scale-desktop="compact"]     { --ssd: 0.2rem; }
+[data-size-scale-desktop="cozy"]        { --ssd: 0.225rem; }
+[data-size-scale-desktop="comfortable"] { --ssd: 0.25rem; }
+[data-size-scale-desktop="spacious"]    { --ssd: 0.3rem; }
+[data-size-scale-desktop="expansive"]   { --ssd: 0.35rem; }
+[data-size-scale="compact"]      { --ssm: 0.2rem;   --ssd: 0.2rem; }
+[data-size-scale="cozy"]         { --ssm: 0.225rem; --ssd: 0.225rem; }
+[data-size-scale="comfortable"]  { --ssm: 0.25rem;  --ssd: 0.25rem; }
+[data-size-scale="spacious"]     { --ssm: 0.3rem;   --ssd: 0.3rem; }
+[data-size-scale="expansive"]    { --ssm: 0.35rem;  --ssd: 0.35rem; }
+[data-size-scale], [data-size-scale-mobile], [data-size-scale-desktop] {
+  --ss-fluid: clamp(0, calc((100vw - 20rem) / 60rem), 1);
+  --spacing: calc(var(--ssm, var(--ssd)) + (var(--ssd, var(--ssm)) - var(--ssm, var(--ssd))) * var(--ss-fluid));
+}
+
 /* Keyframes */
 @keyframes fadeIn {
   from { opacity: 0; }