@fairgarden/design 0.1.0-alpha.0 → 0.1.0-alpha.2

package/utils/global.css

@@ -3,8 +3,8 @@
 
 /*
  * The design system's global entry point. Import once in the app shell:
- *   import '@fairgarden-private/design/utils/global.css'
- *   import '@fairgarden-private/design/utils/fonts'
+ *   import '@fairgarden/design/utils/global.css'
+ *   import '@fairgarden/design/utils/fonts'
  * Mode strategy: follow-OS (colors.css + theme.css + roles.css).
  */
 
@@ -26,13 +26,20 @@
     margin: 0;
   }
 
+  /*
+   * The page's scrollbar gutter is always reserved [D201], so the content
+   * never moves sideways when the scrollbar comes or goes: a popup's scroll
+   * lock hiding it, a popup or a filter changing the page's height. With
+   * overlay scrollbars nothing is reserved.
+   */
   :where(html) {
+    scrollbar-gutter: stable;
     -webkit-text-size-adjust: none;
     text-size-adjust: none;
     block-size: 100%;
     color: var(--primary12);
     background-color: var(--role-ground);
-    font-family: var(--ds-font-ui);
+    font-family: var(--fgd-font-ui);
     font-size: 100%;
     line-height: var(--font-lineheight-3);
     tab-size: 2;
@@ -111,7 +118,7 @@
     color: inherit;
     text-decoration-line: underline;
     text-decoration-color: var(--role-accent);
-    text-decoration-thickness: var(--ds-stroke-1-5);
+    text-decoration-thickness: var(--border-size-1-5);
     text-underline-offset: 0.15em;
   }
 
@@ -140,10 +147,13 @@
   }
 }
 /*
- * Tokens (§1.5): Open Props non-color primitives, used as shipped, plus every
- * --ds- system extension. --ds- never holds a color [D112]. Units [D123]:
- * text rem, tracking em, leading unitless; spacing, strokes, radii and sizes
- * px; measure ch; print pt and mm (print values: print.css).
+ * Tokens (§1.5): Open Props non-color primitives, used as shipped, plus the
+ * system's own [D193]. A step between two Open Props steps joins its scale,
+ * named by its position to the nearest quarter: --size-px-2-5 (12 px) sits
+ * halfway between --size-px-2 (8 px) and --size-px-3 (16 px). Every other
+ * FairGarden-only token takes --fgd-, and none holds a color [D112].
+ * Units [D123]: text rem, tracking em, leading unitless; spacing, strokes,
+ * radii and sizes px; measure ch; print pt and mm (print values: print.css).
  */
 @layer tokens{
 :where(html){--size-000:-.5rem;--size-00:-.25rem;--size-1:.25rem;--size-2:.5rem;--size-3:1rem;--size-4:1.25rem;--size-5:1.5rem;--size-6:1.75rem;--size-7:2rem;--size-8:3rem;--size-9:4rem;--size-10:5rem;--size-11:7.5rem;--size-12:10rem;--size-13:15rem;--size-14:20rem;--size-15:30rem;--size-px-000:-8px;--size-px-00:-4px;--size-px-1:4px;--size-px-2:8px;--size-px-3:16px;--size-px-4:20px;--size-px-5:24px;--size-px-6:28px;--size-px-7:32px;--size-px-8:48px;--size-px-9:64px;--size-px-10:80px;--size-px-11:120px;--size-px-12:160px;--size-px-13:240px;--size-px-14:320px;--size-px-15:480px;--size-fluid-1:max(.5rem,min(1vw,1rem));--size-fluid-2:max(1rem,min(2vw,1.5rem));--size-fluid-3:max(1.5rem,min(3vw,2rem));--size-fluid-4:max(2rem,min(4vw,3rem));--size-fluid-5:max(4rem,min(5vw,5rem));--size-fluid-6:max(5rem,min(7vw,7.5rem));--size-fluid-7:max(7.5rem,min(10vw,10rem));--size-fluid-8:max(10rem,min(20vw,15rem));--size-fluid-9:max(15rem,min(30vw,20rem));--size-fluid-10:max(20rem,min(40vw,30rem));--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--size-header-1:20ch;--size-header-2:25ch;--size-header-3:35ch;--size-xxs:240px;--size-xs:360px;--size-sm:480px;--size-md:768px;--size-lg:1024px;--size-xl:1440px;--size-xxl:1920px;--size-relative-000:-.5ch;--size-relative-00:-.25ch;--size-relative-1:.25ch;--size-relative-2:.5ch;--size-relative-3:1ch;--size-relative-4:1.25ch;--size-relative-5:1.5ch;--size-relative-6:1.75ch;--size-relative-7:2ch;--size-relative-8:3ch;--size-relative-9:4ch;--size-relative-10:5ch;--size-relative-11:7.5ch;--size-relative-12:10ch;--size-relative-13:15ch;--size-relative-14:20ch;--size-relative-15:30ch}
@@ -165,261 +175,337 @@
 }
 @layer tokens {
   :root {
-    /* Spacing (§1.5.10): Open Props --size-px-* plus the system steps. */
-    --ds-space-12: 12px;
-    --ds-space-40: 40px;
-    --ds-space-56: 56px;
-    --ds-space-stack: 36px; /* named exception: H2 baseline → chapter hairline */
-    --ds-space-eyebrow-rule: 14px; /* named exception [D100] */
-    --ds-space-eyebrow-content: 19px; /* named exception [D100] */
-    --ds-space-halo: var(--size-px-2);
-    --ds-space-section: var(--ds-space-56);
-    --ds-space-margin: var(--size-px-3);
-
-    /* Strokes (§1.5.7): with --border-size-1 and --border-size-2. */
-    --ds-stroke-0-75: 0.75px;
-    --ds-stroke-1-25: 1.25px;
-    --ds-stroke-1-5: 1.5px;
-    --ds-stroke-3: 3px;
-    --ds-stroke-4: 4px;
-    --ds-stroke-8: 8px;
+    /* Spacing (§1.5.10): Open Props --size-px-* plus the in-between steps. */
+    --size-px-2-5: 12px;
+    --size-px-7-5: 40px;
+    --size-px-8-5: 56px;
+    --fgd-space-stack: 36px; /* named exception: H2 baseline → chapter hairline */
+    --fgd-space-eyebrow-rule: 14px; /* named exception [D100] */
+    --fgd-space-eyebrow-content: 19px; /* named exception [D100] */
+    --fgd-space-halo: var(--size-px-2);
+    --fgd-space-section: var(--size-px-8-5);
+    --fgd-space-margin: var(--size-px-3);
+
+    /* Strokes and borders (§1.5.7): Open Props --border-size-* plus the in-between steps. */
+    --border-size-0-75: 0.75px;
+    --border-size-1-25: 1.25px;
+    --border-size-1-5: 1.5px;
+    --border-size-2-25: 3px;
+    --border-size-2-75: 4px;
+    --border-size-3-5: 8px;
 
     /* Line geometry (§1.5.8, §4.6–§4.8). */
-    --ds-dot-fine: 1px;
-    --ds-dot-fine-pitch: 3px;
-    --ds-dot: 2px;
-    --ds-dot-pitch: 5px;
-    --ds-dot-bold: 4px;
-    --ds-dot-bold-pitch: 9px;
-    --ds-dash-fine: 4px;
-    --ds-dash-fine-gap: 3px;
-    --ds-dash: 5px;
-    --ds-dash-gap: 4px;
-    --ds-double-gap: 4px;
-    --ds-double-hair-gap: 3px;
+    --fgd-dot-fine: 1px;
+    --fgd-dot-fine-pitch: 3px;
+    --fgd-dot: 2px;
+    --fgd-dot-pitch: 5px;
+    --fgd-dot-bold: 4px;
+    --fgd-dot-bold-pitch: 9px;
+    --fgd-dash-fine: 4px;
+    --fgd-dash-fine-gap: 3px;
+    --fgd-dash: 5px;
+    --fgd-dash-gap: 4px;
+    --fgd-double-gap: 4px;
+    --fgd-double-hair-gap: 3px;
 
     /* Pattern geometry (§1.5.9). */
-    --ds-speckle-grid: 16px;
-    --ds-speckle-dot: 2px;
-    --ds-sunburst-dot: 2.5px;
-    --ds-sunburst-radius: 290px;
-    --ds-sunburst-pitch: 6.5px;
-    --ds-awning-stripe: 24px;
-    --ds-dotgrid-dot: 1.5px;
-    --ds-dotgrid-pitch: 16px;
-    --ds-dotgrid-fine-dot: 1px;
-    --ds-dotgrid-fine-pitch: 8px;
-    --ds-graph-pitch: 16px;
-    --ds-ruled-pitch: 27px;
-    --ds-hatch-pitch: 6px;
-    --ds-hatch-tile: 8px;
-    --ds-dotscreen-dot: 1.25px;
-    --ds-dotscreen-dot-heavy: 2px;
-    --ds-dotscreen-pitch-1: 6px;
-    --ds-dotscreen-pitch-2: 5px;
-    --ds-dotscreen-pitch-3: 4px;
+    --fgd-speckle-grid: 16px;
+    --fgd-speckle-dot: 2px;
+    --fgd-sunburst-dot: 2.5px;
+    --fgd-sunburst-radius: 290px;
+    --fgd-sunburst-pitch: 6.5px;
+    --fgd-awning-stripe: 24px;
+    --fgd-dotgrid-dot: 1.5px;
+    --fgd-dotgrid-pitch: 16px;
+    --fgd-dotgrid-fine-dot: 1px;
+    --fgd-dotgrid-fine-pitch: 8px;
+    --fgd-graph-pitch: 16px;
+    --fgd-ruled-pitch: 27px;
+    --fgd-hatch-pitch: 6px;
+    --fgd-hatch-tile: 8px;
+    --fgd-dotscreen-dot: 1.25px;
+    --fgd-dotscreen-dot-heavy: 2px;
+    --fgd-dotscreen-pitch-1: 6px;
+    --fgd-dotscreen-pitch-2: 5px;
+    --fgd-dotscreen-pitch-3: 4px;
 
     /* Ornaments, terminals and markers (§1.5.16). */
-    --ds-ornament-dot: 5px;
-    --ds-ornament-dot-gap: 10px;
-    --ds-ornament-star: 9px;
-    --ds-zigzag-amplitude: 6px;
-    --ds-zigzag-period: 12px;
-    --ds-fringe-tick: 6px;
-    --ds-fringe-pitch: 4px;
+    --fgd-ornament-dot: 5px;
+    --fgd-ornament-dot-gap: 10px;
+    --fgd-ornament-star: 9px;
+    --fgd-zigzag-amplitude: 6px;
+    --fgd-zigzag-period: 12px;
+    --fgd-fringe-tick: 6px;
+    --fgd-fringe-pitch: 4px;
     /*
      * The hill [D189]: amplitude 4.6% of the band's width, clamped between
      * these (the max is reached at about 1391 px); crest at 0.667 × width,
      * the right end falling 30% of the rise; no horizon rule on screen.
      */
-    --ds-edge-hill-min: 12px;
-    --ds-edge-hill-max: var(--size-px-9); /* 64 px */
-    --ds-arrow-head: 6px;
-    --ds-arrow-tick: 8px;
-    --ds-mark-arm: 12px;
-    --ds-mark-overhang: 6px;
-    --ds-marker-trail: 5px;
-    --ds-marker-timeline: 8px;
-    --ds-marker-waypoint: 9px;
-    --ds-marker-current: 10px;
-
-    /* Radii (§1.5.11): with --radius-1 (2 px) and --radius-round. */
-    --ds-radius-none: 0;
-    --ds-radius-8: 8px;
-    --ds-radius-20: 20px;
+    --fgd-edge-hill-min: 12px;
+    --fgd-edge-hill-max: var(--size-px-9); /* 64 px */
+    --fgd-arrow-head: 6px;
+    --fgd-arrow-tick: 8px;
+    --fgd-mark-arm: 12px;
+    --fgd-mark-overhang: 6px;
+    --fgd-marker-trail: 5px;
+    --fgd-marker-timeline: 8px;
+    --fgd-marker-waypoint: 9px;
+    --fgd-marker-current: 10px;
+
+    /* Radii (§1.5.11): Open Props --radius-1 (2 px) and --radius-round plus these steps. */
+    --radius-0: 0;
+    --radius-2-25: 8px;
+    /* File Tabs' folder tabs, shaped as paper tabs (the source's 12 px tab radius); frames keep --radius-2-25. */
+    --radius-2-75: 12px;
+    --radius-3-25: 20px;
     /* ≈ 1/7 of the frame's width, max 64 px; the frame's parent is its container. */
-    --ds-radius-feature: min(calc(100cqi / 7), var(--size-px-9));
-    /* Conditional radii [D171]: full radius while narrower than the viewport, 0 when full-bleed. */
-    --ds-radius-conditional-8: clamp(0px, calc(100vw - 100%) * 1e5, var(--ds-radius-8));
-    --ds-radius-conditional-20: clamp(0px, calc(100vw - 100%) * 1e5, var(--ds-radius-20));
-
-    /* Type families (§1.5.5) [D159]; --ds-font-fine is set per mode (theme.css). */
-    --ds-font-display: 'Fraunces Variable', 'Source Serif 4 Variable', var(--font-old-style);
-    --ds-font-text: 'Source Serif 4 Variable', var(--font-transitional);
-    --ds-font-ui: 'Figtree Variable', var(--font-geometric-humanist);
-    --ds-font-mono: 'IBM Plex Mono', var(--font-mono);
-    --ds-font-display-settings: 'SOFT' 0, 'WONK' 0;
-    --ds-font-accent-settings: 'SOFT' 100, 'WONK' 1;
+    --fgd-radius-feature: min(calc(100cqi / 7), var(--size-px-9));
+    /* Conditional radii [D171], Open Props' --radius-conditional-* pattern: full radius while narrower than the viewport, 0 when full-bleed. */
+    --radius-conditional-2-25: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-2-25));
+    --radius-conditional-3-25: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-3-25));
+
+    /* Type families (§1.5.5) [D159]; --fgd-font-fine is set per mode (theme.css). Each webfont's metric-matched fallback follows it (utils/font-fallbacks.css) [D201]. */
+    --fgd-font-display: 'Fraunces Variable', 'Fraunces Fallback', 'Source Serif 4 Variable', var(--font-old-style);
+    --fgd-font-text: 'Source Serif 4 Variable', 'Source Serif 4 Fallback', var(--font-transitional);
+    --fgd-font-ui: 'Figtree Variable', 'Figtree Fallback', var(--font-geometric-humanist);
+    --fgd-font-mono: 'IBM Plex Mono', 'IBM Plex Mono Fallback', var(--font-mono);
+    --fgd-font-display-settings: 'SOFT' 0, 'WONK' 0;
+    --fgd-font-accent-settings: 'SOFT' 100, 'WONK' 1;
 
     /* Type sizes (§1.5.6): rem, fluid from 360 px to 1024 px. */
-    --ds-font-size-display-xl: clamp(2.5625rem, calc(2.5625rem + 1.125 * (100vw - 22.5rem) / 41.5), 3.6875rem); /* 41 → 59 px */
-    --ds-font-size-display: clamp(2.125rem, calc(2.125rem + 0.9375 * (100vw - 22.5rem) / 41.5), 3.0625rem); /* 34 → 49 px */
-    --ds-font-size-h2: clamp(1.75rem, calc(1.75rem + 0.375 * (100vw - 22.5rem) / 41.5), 2.125rem); /* 28 → 34 px */
-    --ds-font-size-itemhead: clamp(1.375rem, calc(1.375rem + 0.125 * (100vw - 22.5rem) / 41.5), var(--font-size-4)); /* 22 → 24 px */
-    --ds-font-size-kicker: clamp(1.125rem, calc(1.125rem + 0.125 * (100vw - 22.5rem) / 41.5), var(--font-size-3)); /* 18 → 20 px */
-    --ds-font-size-subhead: clamp(1.125rem, calc(1.125rem + 0.0625 * (100vw - 22.5rem) / 41.5), 1.1875rem); /* 18 → 19 px */
-    --ds-font-size-lead: clamp(var(--font-size-3), calc(1.25rem + 0.125 * (100vw - 22.5rem) / 41.5), 1.375rem); /* 20 → 22 px */
-    --ds-font-size-quote: clamp(var(--font-size-4), calc(1.5rem + 0.5 * (100vw - 22.5rem) / 41.5), var(--font-size-5)); /* 24 → 32 px */
-    --ds-font-size-body: clamp(1.0625rem, calc(1.0625rem + 0.0625 * (100vw - 22.5rem) / 41.5), 1.125rem); /* 17 → 18 px */
-    --ds-font-size-body-ui: clamp(var(--font-size-1), calc(1rem + 0.0625 * (100vw - 22.5rem) / 41.5), 1.0625rem); /* 16 → 17 px */
-    --ds-font-size-marquee: clamp(1.375rem, calc(1.375rem + 0.25 * (100vw - 22.5rem) / 41.5), 1.625rem); /* 22 → 26 px */
-    --ds-font-size-button-lg: 1.0625rem; /* 17 px */
-    --ds-font-size-button: clamp(0.875rem, calc(0.875rem + 0.0625 * (100vw - 22.5rem) / 41.5), 0.9375rem); /* 14 → 15 px */
-    --ds-font-size-footnote: 0.9375rem; /* 15 px */
-    --ds-font-size-caption: 0.875rem; /* 14 px */
-    --ds-font-size-eyebrow: clamp(0.8125rem, calc(0.8125rem + 0.0625 * (100vw - 22.5rem) / 41.5), 0.875rem); /* 13 → 14 px */
-    --ds-font-size-label: 0.8125rem; /* 13 px */
-    --ds-font-size-url: 8pt; /* print only */
+    --fgd-font-size-display-xl: clamp(2.5625rem, calc(2.5625rem + 1.125 * (100vw - 22.5rem) / 41.5), 3.6875rem); /* 41 → 59 px */
+    --fgd-font-size-display: clamp(2.125rem, calc(2.125rem + 0.9375 * (100vw - 22.5rem) / 41.5), 3.0625rem); /* 34 → 49 px */
+    --fgd-font-size-h2: clamp(1.75rem, calc(1.75rem + 0.375 * (100vw - 22.5rem) / 41.5), 2.125rem); /* 28 → 34 px */
+    --fgd-font-size-itemhead: clamp(1.375rem, calc(1.375rem + 0.125 * (100vw - 22.5rem) / 41.5), var(--font-size-4)); /* 22 → 24 px */
+    --fgd-font-size-kicker: clamp(1.125rem, calc(1.125rem + 0.125 * (100vw - 22.5rem) / 41.5), var(--font-size-3)); /* 18 → 20 px */
+    --fgd-font-size-subhead: clamp(1.125rem, calc(1.125rem + 0.0625 * (100vw - 22.5rem) / 41.5), 1.1875rem); /* 18 → 19 px */
+    --fgd-font-size-lead: clamp(var(--font-size-3), calc(1.25rem + 0.125 * (100vw - 22.5rem) / 41.5), 1.375rem); /* 20 → 22 px */
+    --fgd-font-size-quote: clamp(var(--font-size-4), calc(1.5rem + 0.5 * (100vw - 22.5rem) / 41.5), var(--font-size-5)); /* 24 → 32 px */
+    --fgd-font-size-body: clamp(1.0625rem, calc(1.0625rem + 0.0625 * (100vw - 22.5rem) / 41.5), 1.125rem); /* 17 → 18 px */
+    --fgd-font-size-body-ui: clamp(var(--font-size-1), calc(1rem + 0.0625 * (100vw - 22.5rem) / 41.5), 1.0625rem); /* 16 → 17 px */
+    --fgd-font-size-marquee: clamp(1.375rem, calc(1.375rem + 0.25 * (100vw - 22.5rem) / 41.5), 1.625rem); /* 22 → 26 px */
+    --fgd-font-size-button-lg: 1.0625rem; /* 17 px */
+    --fgd-font-size-button: clamp(0.875rem, calc(0.875rem + 0.0625 * (100vw - 22.5rem) / 41.5), 0.9375rem); /* 14 → 15 px */
+    --fgd-font-size-footnote: 0.9375rem; /* 15 px */
+    --fgd-font-size-caption: 0.875rem; /* 14 px */
+    --fgd-font-size-eyebrow: clamp(0.8125rem, calc(0.8125rem + 0.0625 * (100vw - 22.5rem) / 41.5), 0.875rem); /* 13 → 14 px */
+    --fgd-font-size-label: 0.8125rem; /* 13 px */
+    --fgd-font-size-url: 8pt; /* print only */
     /* type-stat: display-xl on screen, 24 pt in print (§1.5.6, §8.8), where display-xl prints 26 pt (print.css). */
-    --ds-font-size-stat: var(--ds-font-size-display-xl);
-    --ds-lockup-accent-factor: 1.45; /* provisional: compute from font metrics [D64] */
+    --fgd-font-size-stat: var(--fgd-font-size-display-xl);
+    --fgd-lockup-accent-factor: 1.45; /* provisional: compute from font metrics [D64] */
 
     /* Leading, tracking, numerals, measure (§1.5.6). */
-    --ds-leading-display: 1;
-    --ds-leading-compact: 1.4;
-    --ds-leading-reading: 1.6;
-    --ds-tracking-tight: -0.01em;
-    --ds-numerals-prose: oldstyle-nums proportional-nums;
-    --ds-numerals-data: lining-nums tabular-nums;
-    --ds-measure-reading: 66ch;
-    --ds-measure-print: 66ch;
+    --fgd-leading-display: 1;
+    --fgd-leading-compact: 1.4;
+    --fgd-leading-reading: 1.6;
+    --font-letterspacing-0-5: -0.01em; /* between Open Props' --font-letterspacing-0 (-0.05em) and --font-letterspacing-1 (0.025em) */
+    --fgd-numerals-prose: oldstyle-nums proportional-nums;
+    --fgd-numerals-data: lining-nums tabular-nums;
+    --fgd-measure-reading: 66ch;
+    --fgd-measure-print: 66ch;
 
     /* Sizing and hit targets (§1.5.12). */
-    --ds-size-control-md: 40px;
-    --ds-size-control-xl: 56px;
-    --ds-size-hit: 44px;
-    --ds-size-icon-block: 36px;
-    --ds-size-bar-utility: 36px;
-    --ds-size-art-s: 152px;
-    --ds-size-art-l: 312px;
-    --ds-size-art-plate-wide: 640px;
-    --ds-size-thumb: 72px;
-    --ds-size-avatar-xl: 128px;
-    --ds-size-tick-minor: 6px; /* slider minor tick */
-    --ds-size-pager-dot: 10px; /* step pager position dot, outlined (§9.9) */
-    --ds-size-pager-dot-current: 12px; /* the current dot, solid (§9.9) */
+    --fgd-size-control-md: 40px;
+    --fgd-size-control-xl: 56px;
+    --fgd-size-hit: 44px;
+    /* The room a hanging File Tabs control (the code block's ⋮) needs past its host's edge: its 20 px ear and clearance; hosts leave it free and unclipped (§9.13). */
+    --fgd-size-file-tabs-control: var(--size-px-5);
+    --fgd-size-icon-block: 36px;
+    /* The logo mark in a lockup, a prominent mark sized to the header bar: 40 px, 48 px from --lg-n-above, 32 px below --xs-n-below (§1.5.12). */
+    --fgd-size-logo: var(--fgd-size-control-md);
+    --fgd-size-bar-utility: 36px;
+    --fgd-size-art-s: 152px;
+    --fgd-size-art-l: 312px;
+    --fgd-size-art-plate-wide: 640px;
+    --fgd-size-thumb: 72px;
+    --fgd-size-avatar-xl: 128px;
+    --fgd-size-tick-minor: 6px; /* slider minor tick */
+    --fgd-size-pager-dot: 10px; /* step pager position dot, outlined (§9.9) */
+    --fgd-size-pager-dot-current: 12px; /* the current dot, solid (§9.9) */
 
     /* Overlay panels (§10.1, §9.7, §10.16). JS mirrors: utils/tokens.ts. */
-    --ds-size-tooltip: 280px; /* tooltip max width */
-    --ds-size-overlay-max: 360px; /* anchored panel max width (popover, preview card, select list) */
-    --ds-size-menu-min: 200px; /* menu min width */
-    --ds-popup-offset: var(--size-px-2); /* 8 px, panel to trigger */
-    --ds-popup-clearance: var(--size-px-3); /* 16 px, panel to viewport edge (base --ds-space-margin) */
+    --fgd-size-tooltip: 280px; /* tooltip max width */
+    --fgd-size-overlay-max: 360px; /* anchored panel max width (popover, preview card, select list) */
+    --fgd-size-menu-min: 200px; /* menu min width */
+    --fgd-popup-offset: var(--size-px-2); /* 8 px, panel to trigger */
+    --fgd-popup-clearance: var(--size-px-3); /* 16 px, panel to viewport edge (base --fgd-space-margin) */
 
     /*
      * Table density (§8.2, §1.5.16) [D83, D169]: cell padding, the minimum
      * row pitch and the row-rule switch, so a Ground's data-density reaches
-     * every Table inside it (the density sets below). --ds-table-row-rule is
+     * every Table inside it (the density sets below). --fgd-table-row-rule is
      * the width of the --role-rule row rule that replaces the --role-hairline
-     * one: 0 while padding holds --ds-space-12, --border-size-1 when compact.
+     * one: 0 while padding holds --size-px-2-5, --border-size-1 when compact.
      */
-    --ds-table-pad-block: var(--ds-space-12);
-    --ds-table-pad-inline: var(--size-px-3);
-    --ds-table-row-min: 0px;
-    --ds-table-row-rule: 0px;
+    --fgd-table-pad-block: var(--size-px-2-5);
+    --fgd-table-pad-inline: var(--size-px-3);
+    --fgd-table-row-min: 0px;
+    --fgd-table-row-rule: 0px;
 
     /* Containers (§1.5.13): with --size-sm (480 px) and --size-content-2. */
-    --ds-container-content: 1120px;
-    --ds-container-wide: 1360px;
+    --fgd-container-content: 1120px;
+    --fgd-container-wide: 1360px;
 
     /* Focus (§1.5.14): 2 px ring at a 2 px offset, color --primary12. */
-    --ds-focus-width: var(--border-size-2);
-    --ds-focus-offset: var(--border-size-2);
+    --fgd-focus-width: var(--border-size-2);
+    --fgd-focus-offset: var(--border-size-2);
 
     /* Motion (§1.5.15): with --ease-out-3. */
-    --ds-duration-instant: 0ms;
-    --ds-duration-quick: 120ms;
-    --ds-duration-disclosure: 200ms;
-    --ds-delay-tooltip: 500ms;
-    --ds-duration-toast: 6s;
+    --fgd-duration-instant: 0ms;
+    --fgd-duration-quick: 120ms;
+    --fgd-duration-disclosure: 200ms;
+    --fgd-delay-tooltip: 500ms;
+    --fgd-duration-toast: 6s;
+    /*
+     * The expanding box's View Transitions morph (a field-like trigger into
+     * its dialog). Open runs --fgd-duration-expand on --fgd-ease-expand;
+     * close runs --fgd-duration-disclosure, so it stays the faster. The ease
+     * is a critically damped spring (stiffness 0.3, damping 1) sampled as
+     * linear() stops, its one undershoot stop clipped to 0 so the curve
+     * never leaves [0, 1]: no overshoot. JS mirror: utils/tokens.ts.
+     */
+    --fgd-duration-expand: 333ms;
+    /*
+     * The anchored morph's close (the outline morph, §9.17) [D204]: an alias
+     * of --fgd-duration-disclosure (200 ms), so the Morph tier owns its own
+     * name and a close is never slower than its open. The outline morph reads
+     * it, --fgd-duration-expand and --fgd-ease-expand from the trigger at each
+     * open and close; 0ms turns the morph off. JS mirror: utils/tokens.ts.
+     */
+    --fgd-duration-collapse: var(--fgd-duration-disclosure);
+    /*
+     * The modal morph (the outline morph on Dialog, Alert Dialog and the
+     * drawer's sheets, §9.17) [D206]: the same curve, stretched for the
+     * longer travel from a trigger to a panel or a full sheet; the close is
+     * 0.6 × the open, the ratio of 333 to 200. 0ms turns that morph off.
+     * JS mirror: SURFACE_DURATION_MS in utils/tokens.ts.
+     */
+    --fgd-duration-expand-surface: 400ms;
+    --fgd-duration-collapse-surface: 240ms;
+    --fgd-ease-expand: linear(
+      0,
+      0,
+      0.294,
+      0.401,
+      0.58,
+      0.706,
+      0.75,
+      0.825,
+      0.878,
+      0.896,
+      0.927,
+      0.949,
+      0.957,
+      0.97,
+      0.979,
+      0.982,
+      0.987,
+      0.991,
+      0.992,
+      0.995,
+      0.996,
+      0.998,
+      0.999,
+      0.999,
+      1
+    );
+    /*
+     * The code block's variant and JS/TS swap: the rendered code swaps after
+     * this delay while its changed lines grow or shrink over it. JS mirror
+     * (useCode's transformDelay / variantSwapDelay): utils/tokens.ts.
+     */
+    --fgd-duration-swap: 350ms;
     /* Desktop Navigation Menu hover intent [D182]; JS mirror: utils/tokens.ts. */
-    --ds-delay-nav-open: 150ms;
-    --ds-delay-nav-close: 300ms;
+    --fgd-delay-nav-open: 150ms;
+    --fgd-delay-nav-close: 300ms;
 
-    /* Media (§1.5.16): with --ratio-widescreen, --ratio-portrait, --ratio-square. */
-    --ds-ratio-photo: 3 / 2;
+    /* Media (§1.5.16): joins Open Props' --ratio-widescreen, --ratio-portrait and --ratio-square. */
+    --ratio-photo: 3 / 2;
 
     /* Print (§1.5.13, §1.5.16). */
-    --ds-print-margin-inline: 18mm;
-    --ds-print-margin-block: 20mm;
-    --ds-print-live-width: 174mm;
-    --ds-print-figure-max: 100mm;
-    --ds-print-hero-max: 60mm;
-    --ds-print-qr: 22mm;
+    --fgd-print-margin-inline: 18mm;
+    --fgd-print-margin-block: 20mm;
+    --fgd-print-live-width: 174mm;
+    --fgd-print-figure-max: 100mm;
+    --fgd-print-hero-max: 60mm;
+    --fgd-print-qr: 22mm;
     /* The trail and timeline spines in print: 0.75 pt, 3 pt dash, 2.5 pt gap (§1.5.8, §4.7.1) [D142]. */
-    --ds-print-trail-stroke: 0.75pt;
-    --ds-print-trail-dash: 3pt;
-    --ds-print-trail-gap: 2.5pt;
+    --fgd-print-trail-stroke: 0.75pt;
+    --fgd-print-trail-dash: 3pt;
+    --fgd-print-trail-gap: 2.5pt;
   }
 
   @media (min-width: 480px) {
     :root {
-      --ds-space-margin: var(--size-px-5);
+      --fgd-space-margin: var(--size-px-5);
     }
   }
 
   @media (min-width: 768px) {
     :root {
-      --ds-space-margin: var(--size-px-7);
+      --fgd-space-margin: var(--size-px-7);
+    }
+  }
+
+  @media (max-width: 359.98px) {
+    :root {
+      --fgd-size-logo: var(--size-px-7);
     }
   }
 
   @media (min-width: 1024px) {
     :root {
-      --ds-space-margin: var(--ds-space-40);
-      --ds-space-section: var(--size-px-10);
-      --ds-ruled-pitch: 29px;
+      --fgd-size-logo: var(--size-px-8);
+      --fgd-space-margin: var(--size-px-7-5);
+      --fgd-space-section: var(--size-px-10);
+      --fgd-ruled-pitch: 29px;
     }
   }
 
   /* Reduced motion: every duration is instant (§1.5.15). */
   @media (prefers-reduced-motion: reduce) {
     :root {
-      --ds-duration-quick: var(--ds-duration-instant);
-      --ds-duration-disclosure: var(--ds-duration-instant);
+      --fgd-duration-quick: var(--fgd-duration-instant);
+      --fgd-duration-disclosure: var(--fgd-duration-instant);
+      --fgd-duration-expand: var(--fgd-duration-instant);
+      --fgd-duration-expand-surface: var(--fgd-duration-instant);
+      --fgd-duration-collapse-surface: var(--fgd-duration-instant);
+      --fgd-duration-swap: var(--fgd-duration-instant);
     }
   }
 
   /* Density sets (§1.5.16), set per module, never by breakpoint (§5.8). */
   [data-density='spacious'] {
-    --ds-space-section: var(--size-px-10);
+    --fgd-space-section: var(--size-px-10);
   }
 
   /* Default and spacious keep the default table; restated so a nested module resets a compact parent. */
   [data-density='default'],
   [data-density='spacious'] {
-    --ds-table-pad-block: var(--ds-space-12);
-    --ds-table-pad-inline: var(--size-px-3);
-    --ds-table-row-min: 0px;
-    --ds-table-row-rule: 0px;
+    --fgd-table-pad-block: var(--size-px-2-5);
+    --fgd-table-pad-inline: var(--size-px-3);
+    --fgd-table-row-min: 0px;
+    --fgd-table-row-rule: 0px;
   }
 
-  /* Compact: cells --size-px-2 × --ds-space-12, rows ≥ 32 px, --role-rule row rules [D83]. */
+  /* Compact: cells --size-px-2 × --size-px-2-5, rows ≥ 32 px, --role-rule row rules [D83]. */
   [data-density='compact'] {
-    --ds-space-section: var(--size-px-7);
-    --ds-table-pad-block: var(--size-px-2);
-    --ds-table-pad-inline: var(--ds-space-12);
-    --ds-table-row-min: var(--size-px-7);
-    --ds-table-row-rule: var(--border-size-1);
+    --fgd-space-section: var(--size-px-7);
+    --fgd-table-pad-block: var(--size-px-2);
+    --fgd-table-pad-inline: var(--size-px-2-5);
+    --fgd-table-row-min: var(--size-px-7);
+    --fgd-table-row-rule: var(--border-size-1);
   }
 
   @media (min-width: 1024px) {
     [data-density='spacious'] {
-      --ds-space-section: var(--size-px-11);
+      --fgd-space-section: var(--size-px-11);
     }
 
     [data-density='compact'] {
-      --ds-space-section: var(--ds-space-40);
+      --fgd-space-section: var(--size-px-7-5);
     }
   }
 }
@@ -435,31 +521,31 @@
      * every other scope, and on the night band wherever its --role-seam turns
      * visible (dark mode), so the band shows its straight seam rule instead.
      */
-    --ds-edge-shaped: block;
+    --fgd-edge-shaped: block;
 
     /*
      * Hover underline switches [D181], `none` or `underline`, set per scope
-     * by the role maps (roles.css), like --ds-edge-shaped:
-     * - --ds-link-hover-line: `underline` where --role-link-hover is
+     * by the role maps (roles.css), like --fgd-edge-shaped:
+     * - --fgd-link-hover-line: `underline` where --role-link-hover is
      *   --primary12 (saturated fields, royal, brick, dark rose and heather),
      *   so a hover that would change only an ink also underlines;
-     * - --ds-soft-hover-line: `underline` where soft fills drop (the
+     * - --fgd-soft-hover-line: `underline` where soft fills drop (the
      *   pastels, forest, the solid fields), so the outline Button's hover
      *   takes the bare-text underline instead of its --primary3 fill.
      */
-    --ds-link-hover-line: none;
-    --ds-soft-hover-line: none;
+    --fgd-link-hover-line: none;
+    --fgd-soft-hover-line: none;
 
     /*
      * Chart sequential-cell switches (§8.7) [D125, D167], `display` values
-     * set per scope by the role maps (roles.css), like --ds-edge-shaped: a
+     * set per scope by the role maps (roles.css), like --fgd-edge-shaped: a
      * light base ground (and a `white` plate) shows the flat screen fills
-     * (--ds-series-fill: inline); every other ground shows the one-ink
-     * patterns on screen (--ds-series-pattern: inline). The odd-slot ink is
+     * (--fgd-series-fill: inline); every other ground shows the one-ink
+     * patterns on screen (--fgd-series-pattern: inline). The odd-slot ink is
      * the --role-series-odd alias.
      */
-    --ds-series-fill: inline;
-    --ds-series-pattern: none;
+    --fgd-series-fill: inline;
+    --fgd-series-pattern: none;
   }
 }
 /* Generated by scripts/build-colors.js. Do not edit. */
@@ -1403,7 +1489,7 @@
     --gray11: #b4b4b4;
     --gray12: #eeeeee;
     --gray-contrast: #fff;
-    --gray-hover: var(--gray10);
+    --gray-hover: var(--gray8);
     --green1: #0e1512;
     --green2: #121b17;
     --green3: #132d21;
@@ -1431,7 +1517,7 @@
     --indigo11: #9eb1ff;
     --indigo12: #d6e1ff;
     --indigo-contrast: #fff;
-    --indigo-hover: var(--indigo10);
+    --indigo-hover: var(--indigo8);
     --iris1: #13131e;
     --iris2: #171625;
     --iris3: #202248;
@@ -1445,7 +1531,7 @@
     --iris11: #b1a9ff;
     --iris12: #e0dffe;
     --iris-contrast: #fff;
-    --iris-hover: var(--iris10);
+    --iris-hover: var(--iris8);
     --jade1: #0d1512;
     --jade2: #121c18;
     --jade3: #0f2e22;
@@ -1487,7 +1573,7 @@
     --mauve11: #b5b2bc;
     --mauve12: #eeeef0;
     --mauve-contrast: #fff;
-    --mauve-hover: var(--mauve10);
+    --mauve-hover: var(--mauve8);
     --mint1: #0e1515;
     --mint2: #0f1b1b;
     --mint3: #092c2b;
@@ -1515,7 +1601,7 @@
     --olive11: #afb5ad;
     --olive12: #eceeec;
     --olive-contrast: #fff;
-    --olive-hover: var(--olive10);
+    --olive-hover: var(--olive8);
     --orange1: #17120e;
     --orange2: #1e160f;
     --orange3: #331e0b;
@@ -1557,7 +1643,7 @@
     --plum11: #e796f3;
     --plum12: #f4d4f4;
     --plum-contrast: #fff;
-    --plum-hover: var(--plum10);
+    --plum-hover: var(--plum8);
     --purple1: #18111b;
     --purple2: #1e1523;
     --purple3: #301c3b;
@@ -1571,7 +1657,7 @@
     --purple11: #d19dff;
     --purple12: #ecd9fa;
     --purple-contrast: #fff;
-    --purple-hover: var(--purple10);
+    --purple-hover: var(--purple8);
     --red1: #191111;
     --red2: #201314;
     --red3: #3b1219;
@@ -1613,7 +1699,7 @@
     --sage11: #adb5b2;
     --sage12: #eceeed;
     --sage-contrast: #fff;
-    --sage-hover: var(--sage10);
+    --sage-hover: var(--sage8);
     --sand1: #111110;
     --sand2: #191918;
     --sand3: #222221;
@@ -1627,7 +1713,7 @@
     --sand11: #b5b3ad;
     --sand12: #eeeeec;
     --sand-contrast: #fff;
-    --sand-hover: var(--sand10);
+    --sand-hover: var(--sand8);
     --sky1: #0d141f;
     --sky2: #111a27;
     --sky3: #112840;
@@ -1655,7 +1741,7 @@
     --slate11: #b0b4ba;
     --slate12: #edeef0;
     --slate-contrast: #fff;
-    --slate-hover: var(--slate10);
+    --slate-hover: var(--slate8);
     --teal1: #0d1514;
     --teal2: #111c1b;
     --teal3: #0d2d2a;
@@ -1697,7 +1783,7 @@
     --violet11: #baa7ff;
     --violet12: #e2ddfe;
     --violet-contrast: #fff;
-    --violet-hover: var(--violet10);
+    --violet-hover: var(--violet8);
     --yellow1: #14120b;
     --yellow2: #1b180f;
     --yellow3: #2d2305;
@@ -2216,7 +2302,7 @@
       --gray11: #b4b4b4;
       --gray12: #eeeeee;
       --gray-contrast: #fff;
-      --gray-hover: var(--gray10);
+      --gray-hover: var(--gray8);
       --green1: #0e1512;
       --green2: #121b17;
       --green3: #132d21;
@@ -2244,7 +2330,7 @@
       --indigo11: #9eb1ff;
       --indigo12: #d6e1ff;
       --indigo-contrast: #fff;
-      --indigo-hover: var(--indigo10);
+      --indigo-hover: var(--indigo8);
       --iris1: #13131e;
       --iris2: #171625;
       --iris3: #202248;
@@ -2258,7 +2344,7 @@
       --iris11: #b1a9ff;
       --iris12: #e0dffe;
       --iris-contrast: #fff;
-      --iris-hover: var(--iris10);
+      --iris-hover: var(--iris8);
       --jade1: #0d1512;
       --jade2: #121c18;
       --jade3: #0f2e22;
@@ -2300,7 +2386,7 @@
       --mauve11: #b5b2bc;
       --mauve12: #eeeef0;
       --mauve-contrast: #fff;
-      --mauve-hover: var(--mauve10);
+      --mauve-hover: var(--mauve8);
       --mint1: #0e1515;
       --mint2: #0f1b1b;
       --mint3: #092c2b;
@@ -2328,7 +2414,7 @@
       --olive11: #afb5ad;
       --olive12: #eceeec;
       --olive-contrast: #fff;
-      --olive-hover: var(--olive10);
+      --olive-hover: var(--olive8);
       --orange1: #17120e;
       --orange2: #1e160f;
       --orange3: #331e0b;
@@ -2370,7 +2456,7 @@
       --plum11: #e796f3;
       --plum12: #f4d4f4;
       --plum-contrast: #fff;
-      --plum-hover: var(--plum10);
+      --plum-hover: var(--plum8);
       --purple1: #18111b;
       --purple2: #1e1523;
       --purple3: #301c3b;
@@ -2384,7 +2470,7 @@
       --purple11: #d19dff;
       --purple12: #ecd9fa;
       --purple-contrast: #fff;
-      --purple-hover: var(--purple10);
+      --purple-hover: var(--purple8);
       --red1: #191111;
       --red2: #201314;
       --red3: #3b1219;
@@ -2426,7 +2512,7 @@
       --sage11: #adb5b2;
       --sage12: #eceeed;
       --sage-contrast: #fff;
-      --sage-hover: var(--sage10);
+      --sage-hover: var(--sage8);
       --sand1: #111110;
       --sand2: #191918;
       --sand3: #222221;
@@ -2440,7 +2526,7 @@
       --sand11: #b5b3ad;
       --sand12: #eeeeec;
       --sand-contrast: #fff;
-      --sand-hover: var(--sand10);
+      --sand-hover: var(--sand8);
       --sky1: #0d141f;
       --sky2: #111a27;
       --sky3: #112840;
@@ -2468,7 +2554,7 @@
       --slate11: #b0b4ba;
       --slate12: #edeef0;
       --slate-contrast: #fff;
-      --slate-hover: var(--slate10);
+      --slate-hover: var(--slate8);
       --teal1: #0d1514;
       --teal2: #111c1b;
       --teal3: #0d2d2a;
@@ -2510,7 +2596,7 @@
       --violet11: #baa7ff;
       --violet12: #e2ddfe;
       --violet-contrast: #fff;
-      --violet-hover: var(--violet10);
+      --violet-hover: var(--violet8);
       --yellow1: #14120b;
       --yellow2: #1b180f;
       --yellow3: #2d2305;
@@ -2913,21 +2999,21 @@
   :root,
   [data-theme='light'] {
     color-scheme: light;
-    --ds-font-fine: var(--ds-font-text);
-    --ds-muted-weight-step: 0;
+    --fgd-font-fine: var(--fgd-font-text);
+    --fgd-muted-weight-step: 0;
   }
 
   [data-theme='dark'] {
     color-scheme: dark;
-    --ds-font-fine: var(--ds-font-ui);
-    --ds-muted-weight-step: 100;
+    --fgd-font-fine: var(--fgd-font-ui);
+    --fgd-muted-weight-step: 100;
   }
 
   @media only screen and (prefers-color-scheme: dark) {
     :root:not([data-theme='light']) {
       color-scheme: dark;
-      --ds-font-fine: var(--ds-font-ui);
-      --ds-muted-weight-step: 100;
+      --fgd-font-fine: var(--fgd-font-ui);
+      --fgd-muted-weight-step: 100;
     }
   }
 }
@@ -2956,7 +3042,16 @@
  * whose rest face is --role-halo (the slider thumb): --primary3 where soft
  * fills apply, --role-halo (no change) where they drop, so the face never
  * turns the ground color [D181]. --secondary-hover is the per-scale lighter
- * neighbour (step 10 in a dark scope) that the scales module publishes.
+ * neighbour (step 10 in a dark scope; step 8 where 10 would drop a white
+ * label below 4.5:1) that the scales module publishes.
+ *
+ * Selection mark, light page grounds (§1.4.7): the secondary's own
+ * contrast ink where it carries text on step 9 (--secondary-light-mark,
+ * which each secondary scales class publishes: --yellow12 8.68 on pollen,
+ * --purple1 5.07 on heather, --indigo1 5.12 for an indigo override), else
+ * --primary12 (P12*: green, blue, orange; red's is glyph-only). So an
+ * overridden secondary never leaves --primary12 on a fill it fails, e.g.
+ * --olive12 on --indigo9 at 3.13:1 (§9.5).
  *
  * Text-bearing selection: --role-select-text / -label / -edge / -hover, for
  * a selected state that carries words (option pill, filter chip with a
@@ -2965,9 +3060,22 @@
  * only); glyph-only marks (✓, ●, thumbs) keep --role-select there
  * [decided by orchestrator; flagged for user review, §1.8].
  *
+ * Danger [D192]: destructive actions are red. --danger1…12 is the §1.5.4
+ * danger status scale (red), published on every scope so it resolves in
+ * that scope's mode. --role-danger / -label / -edge / -hover are the
+ * destructive solid Button's fill, label, edge and hover fill (the Menu's
+ * destructive highlight takes the fill and label); --role-danger-text is
+ * the danger ink on the ground (outline and text Button labels, Menu and
+ * Toast labels). Light scopes: fill --danger11 with --danger1 (5.11:1;
+ * light 9 and 10 carry no text), hover --danger12 (the lighter 10 drops
+ * the label to 4.28:1, so it takes the darker neighbour, as D181's step-10
+ * rule does). Dark scopes: fill --danger9 with --danger1 (4.75), hover
+ * --danger10 (5.57). Where red text fails (leaf, clay, royal) the label
+ * falls back to --primary12 and the red stays in the edge and glyph.
+ *
  * Charts [D125]: --role-series-odd is the odd series slots' ink,
  * --secondary11 on light base grounds (and a `white` plate) and --primary12
- * elsewhere (§8.7); the --ds-series-fill / --ds-series-pattern switches
+ * elsewhere (§8.7); the --fgd-series-fill / --fgd-series-pattern switches
  * (tokens.css) pick the sequential cells' screen fill or one-ink pattern.
  */
 @layer roles {
@@ -3058,12 +3166,36 @@
     --role-select-text-hover: var(--role-select-hover);
     /* Charts: one ink off the light base grounds (§8.7) [D125]. */
     --role-series-odd: var(--primary12);
+    /*
+     * Danger [D192]: the danger scale (red, §1.5.4), then the light map
+     * (the light page grounds and light islands): fill --danger11 with
+     * --danger1 (5.11:1), edge = fill (4.54–5.11:1 on the eight grounds),
+     * hover --danger12 (label 12.19), text --danger11 (4.54–5.11; 4.57 on
+     * the outline's --primary3 hover fill).
+     */
+    --danger1: var(--red1);
+    --danger2: var(--red2);
+    --danger3: var(--red3);
+    --danger4: var(--red4);
+    --danger5: var(--red5);
+    --danger6: var(--red6);
+    --danger7: var(--red7);
+    --danger8: var(--red8);
+    --danger9: var(--red9);
+    --danger10: var(--red10);
+    --danger11: var(--red11);
+    --danger12: var(--red12);
+    --role-danger: var(--danger11);
+    --role-danger-label: var(--danger1);
+    --role-danger-edge: var(--danger11);
+    --role-danger-hover: var(--danger12);
+    --role-danger-text: var(--danger11);
     /* Switches (tokens.css): shaped edges only on the night band in light mode [D179]. */
-    --ds-edge-shaped: none;
-    --ds-link-hover-line: none;
-    --ds-soft-hover-line: none;
-    --ds-series-fill: none;
-    --ds-series-pattern: inline;
+    --fgd-edge-shaped: none;
+    --fgd-link-hover-line: none;
+    --fgd-soft-hover-line: none;
+    --fgd-series-fill: none;
+    --fgd-series-pattern: inline;
   }
 
   /* Tone-resolved aliases [D155, D141]. */
@@ -3073,8 +3205,8 @@
     --role-status-fill: var(--secondary4);
     /* Two-ink charts: odd slots --secondary11 and the sequential screen fills, in both modes (§8.7). */
     --role-series-odd: var(--secondary11);
-    --ds-series-fill: inline;
-    --ds-series-pattern: none;
+    --fgd-series-fill: inline;
+    --fgd-series-pattern: none;
   }
 
   [data-tone='tinted'] {
@@ -3093,12 +3225,18 @@
   [data-tone='solid-dark'] {
     --role-soft-hover: var(--role-ground);
     --role-soft-hover-face: var(--role-halo);
-    --ds-soft-hover-line: underline;
+    --fgd-soft-hover-line: underline;
   }
 
   /* Dark fixed scopes: a pill fill that reaches 3:1 is its own edge. */
   [data-scheme='dark'] {
     --role-pill-edge: var(--secondary9);
+    /* Danger, dark map [D192]: fill --danger9 with --danger1 (4.75), hover --danger10 (5.57); night: edge 4.50, text 8.36. */
+    --role-danger: var(--danger9);
+    --role-danger-label: var(--danger1);
+    --role-danger-edge: var(--danger9);
+    --role-danger-hover: var(--danger10);
+    --role-danger-text: var(--danger11);
   }
 
   [data-tone='solid-light'],
@@ -3108,7 +3246,7 @@
     /* One ink [D14]: link hover is that ink plus the underline; selection hovers the inverse pair [D181]. */
     --role-link-hover: var(--primary12);
     --role-select-hover: var(--primary11);
-    --ds-link-hover-line: underline;
+    --fgd-link-hover-line: underline;
     /* The ink pill. */
     --role-pill: var(--primary12);
     --role-pill-label: var(--role-inverse);
@@ -3179,7 +3317,7 @@
     --role-grain-light: var(--primary4);
     --role-grain-dark: var(--primary1);
     /* The one seam tone separates (from a light page ground): the shaped edge may sit here [D179]. */
-    --ds-edge-shaped: block;
+    --fgd-edge-shaped: block;
   }
 
   [data-ground='forest'] {
@@ -3201,7 +3339,7 @@
     --role-grain-light: var(--primary8);
     --role-grain-dark: var(--primary6);
     --role-disabled-edge: var(--primary12); /* one text ink [D85, D115] */
-    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
   }
 
   [data-ground='leaf'] {
@@ -3220,7 +3358,7 @@
     --role-action-edge: var(--primary12);
     --role-grain-light: var(--secondary8);
     --role-grain-dark: var(--secondary10);
-    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
   }
 
   [data-ground='amber'] {
@@ -3239,7 +3377,7 @@
     --role-action-edge: var(--primary12);
     --role-grain-light: var(--secondary6);
     --role-grain-dark: var(--secondary8);
-    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
   }
 
   [data-ground='clay'] {
@@ -3258,7 +3396,7 @@
     --role-action-edge: var(--primary12);
     --role-grain-light: var(--secondary8);
     --role-grain-dark: var(--secondary10);
-    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
   }
 
   [data-ground='pink'] {
@@ -3276,7 +3414,7 @@
     --role-action-label: var(--primary1);
     --role-action-edge: var(--primary12);
     --role-grain-light: var(--secondary7);
-    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
   }
 
   [data-ground='royal'] {
@@ -3294,7 +3432,7 @@
     --role-action-label: var(--secondary-contrast);
     --role-action-edge: var(--secondary9);
     --role-grain-dark: var(--secondary7);
-    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
   }
 
   [data-ground='brick'] {
@@ -3315,7 +3453,39 @@
     --role-status-text: var(--secondary12);
     --role-grain-light: var(--secondary8);
     --role-grain-dark: var(--secondary6);
-    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
+  }
+
+  /*
+   * Danger on the fields [D192]. The fill stays the mode's red (--danger11
+   * light, --danger9 dark), which sits near the field's own lightness, so
+   * the edge steps out: --danger11 on forest (4.00) and brick (3.76),
+   * --danger12 on royal (4.47), leaf (3.94), amber (7.28), clay (4.19) and
+   * pink (5.35). Danger text is --danger12 where it reaches 4.5:1 (forest
+   * 6.16, brick 5.80, amber, pink); on leaf (3.94), clay (4.19) and royal
+   * (4.47) it is the field's one ink, --primary12, and the red stays in the
+   * edge and the glyph (≥ 3:1).
+   */
+  [data-ground='forest'],
+  [data-ground='royal'],
+  [data-ground='brick'],
+  [data-ground='leaf'],
+  [data-ground='amber'],
+  [data-ground='clay'],
+  [data-ground='pink'] {
+    --role-danger-edge: var(--danger12);
+    --role-danger-text: var(--danger12);
+  }
+
+  [data-ground='forest'],
+  [data-ground='brick'] {
+    --role-danger-edge: var(--danger11);
+  }
+
+  [data-ground='royal'],
+  [data-ground='leaf'],
+  [data-ground='clay'] {
+    --role-danger-text: var(--primary12);
   }
 
   /*
@@ -3332,7 +3502,7 @@
    */
   [data-theme='dark']:not([data-ground]) [data-ground='night'] {
     --role-seam: var(--primary12);
-    --ds-edge-shaped: none;
+    --fgd-edge-shaped: none;
   }
 
   /*
@@ -3363,7 +3533,7 @@
     --role-pill: var(--secondary9);
     --role-pill-label: var(--secondary-contrast);
     --role-pill-edge: var(--secondary9);
-    --ds-link-hover-line: none;
+    --fgd-link-hover-line: none;
   }
 
   [data-theme='dark'] [data-ground='white'][data-scheme='page'] {
@@ -3399,14 +3569,14 @@
     --role-select-text-label: var(--role-select-mark);
     --role-select-text-edge: var(--role-select-edge);
     --role-select-text-hover: var(--role-select-hover);
-    --ds-link-hover-line: none;
+    --fgd-link-hover-line: none;
   }
 
   [data-theme='dark'] [data-ground='rose'][data-scheme='page'],
   [data-theme='dark'] [data-ground='heather'][data-scheme='page'] {
     /* No text-safe accent (--red9 4.17, --purple10 3.55): links stay ink, and hover adds the underline [D176, D181]. */
     --role-link-hover: var(--primary12);
-    --ds-link-hover-line: underline;
+    --fgd-link-hover-line: underline;
   }
 
   [data-theme='dark'] [data-ground='heather'][data-scheme='page'] {
@@ -3421,6 +3591,31 @@
     --role-pill-edge: var(--primary12);
   }
 
+  /*
+   * Danger on the page grounds, dark mode [D192]: fill --danger9 with
+   * --danger1 (4.75), edge = fill (3.77–4.80 against the eight dark
+   * grounds), hover --danger10 (5.57), text --danger11 (6.99–8.92).
+   */
+  :root[data-theme='dark'],
+  [data-theme='dark'] [data-ground][data-scheme='page'] {
+    --role-danger: var(--danger9);
+    --role-danger-label: var(--danger1);
+    --role-danger-edge: var(--danger9);
+    --role-danger-hover: var(--danger10);
+    --role-danger-text: var(--danger11);
+  }
+
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']),
+    :root:not([data-theme='light']) [data-ground][data-scheme='page'] {
+      --role-danger: var(--danger9);
+      --role-danger-label: var(--danger1);
+      --role-danger-edge: var(--danger9);
+      --role-danger-hover: var(--danger10);
+      --role-danger-text: var(--danger11);
+    }
+  }
+
   @media only screen and (prefers-color-scheme: dark) {
     :root:not([data-theme='light']),
     :root:not([data-theme='light']) [data-ground='paper'][data-scheme='page'],
@@ -3443,7 +3638,7 @@
       --role-pill: var(--secondary9);
       --role-pill-label: var(--secondary-contrast);
       --role-pill-edge: var(--secondary9);
-      --ds-link-hover-line: none;
+      --fgd-link-hover-line: none;
     }
 
     :root:not([data-theme='light']) [data-ground='white'][data-scheme='page'] {
@@ -3478,14 +3673,14 @@
       --role-select-text-label: var(--role-select-mark);
       --role-select-text-edge: var(--role-select-edge);
       --role-select-text-hover: var(--role-select-hover);
-      --ds-link-hover-line: none;
+      --fgd-link-hover-line: none;
     }
 
     :root:not([data-theme='light']) [data-ground='rose'][data-scheme='page'],
     :root:not([data-theme='light']) [data-ground='heather'][data-scheme='page'] {
       /* No text-safe accent (--red9 4.17, --purple10 3.55): links stay ink, and hover adds the underline [D176, D181]. */
       --role-link-hover: var(--primary12);
-      --ds-link-hover-line: underline;
+      --fgd-link-hover-line: underline;
     }
 
     :root:not([data-theme='light']) [data-ground='heather'][data-scheme='page'] {
@@ -3502,7 +3697,7 @@
 
     :root:not([data-theme='light']) [data-ground='night'] {
       --role-seam: var(--primary12);
-      --ds-edge-shaped: none;
+      --fgd-edge-shaped: none;
     }
   }
 
@@ -3525,7 +3720,7 @@
     --role-tint: var(--primary5);
     --role-accent: var(--secondary11);
     --role-select: var(--secondary9);
-    --role-select-mark: var(--primary12);
+    --role-select-mark: var(--secondary-light-mark, var(--primary12));
     --role-select-edge: var(--secondary11);
     --role-action: var(--secondary9);
     --role-action-label: var(--secondary-contrast);
@@ -3536,7 +3731,7 @@
     --role-pill: var(--secondary9);
     --role-pill-label: var(--secondary-contrast);
     --role-pill-edge: var(--secondary11);
-    --ds-link-hover-line: none;
+    --fgd-link-hover-line: none;
   }
 
   [data-ground='white'],
@@ -3564,7 +3759,7 @@
     --role-tint: var(--primary5);
     --role-accent: var(--secondary11);
     --role-select: var(--secondary9);
-    --role-select-mark: var(--primary12);
+    --role-select-mark: var(--secondary-light-mark, var(--primary12));
     --role-select-edge: var(--secondary11);
     --role-action: var(--secondary9);
     --role-action-label: var(--secondary-contrast);
@@ -3575,15 +3770,7 @@
     --role-pill: var(--secondary9);
     --role-pill-label: var(--secondary-contrast);
     --role-pill-edge: var(--secondary11);
-    --ds-link-hover-line: none;
-  }
-
-  [data-ground='pollen'],
-  :root [data-theme='light'] [data-ground='pollen'][data-scheme='page'],
-  [data-ground='heather'],
-  :root [data-theme='light'] [data-ground='heather'][data-scheme='page'] {
-    /* Selection mark: the scale's own contrast ink (--yellow12 8.68, --purple1 5.07). */
-    --role-select-mark: var(--secondary-contrast);
+    --fgd-link-hover-line: none;
   }
 
   [data-ground='rose'],
@@ -3610,6 +3797,15 @@
     --role-select-text-hover: var(--primary11);
   }
 
+  /* Danger under a light preview wrapper: the light map again [D192]. */
+  :root [data-theme='light'] [data-ground][data-scheme='page'] {
+    --role-danger: var(--danger11);
+    --role-danger-label: var(--danger1);
+    --role-danger-edge: var(--danger11);
+    --role-danger-hover: var(--danger12);
+    --role-danger-text: var(--danger11);
+  }
+
   /*
    * The night band under a light preview wrapper keeps its light-mode seam
    * and shaped edge. Like the dark rule, only the page's mode counts, never
@@ -3617,58 +3813,182 @@
    */
   :root [data-theme='light']:not([data-ground]) [data-ground='night'] {
     --role-seam: var(--role-ground);
-    --ds-edge-shaped: block;
+    --fgd-edge-shaped: block;
   }
 }
+/*
+ * View Transitions: the expanding box's morph (foundations/expanding-box),
+ * a field-like trigger growing into its dialog and back. The
+ * `::view-transition-*` pseudo-elements carry no local class, so their rules
+ * cannot live in a CSS Module; they live here, imported once by global.css.
+ *
+ * ExpandingBox sets each piece's view-transition-name per instance (never
+ * in CSS) and gives every piece the class `fgd-xb` plus its kind
+ * (`fgd-xb-corner`, `-edge`, `-face`, `-content`, `-main`, `-end`,
+ * `-extra`, `-focus`), so these rules select by class only.
+ * startExpandingTransition marks the running morph on the root element,
+ * <html data-fgd-expanding="open|close">, and the pieces add `closing`
+ * while it reads `close`.
+ *
+ * Only group geometry animates, never opacity: the pieces' images take no
+ * animation and their old images are hidden, so each piece shows its new
+ * state from the first frame while its group travels; while the flag is
+ * set, no image in the transition (the root snapshot included) crossfades.
+ * Timing: --fgd-duration-expand on --fgd-ease-expand to open,
+ * --fgd-duration-collapse (an alias of --fgd-duration-disclosure) to close,
+ * so the close stays the faster; startExpandingTransition reads the same
+ * tokens on the trigger, and a 0 duration there applies the change at once. The
+ * focus ring's new image is held hidden for --fgd-duration-disclosure (a
+ * discrete visibility hold, not a fade), so the ring shows once the frame
+ * has landed. Under reduced motion the morph never starts.
+ */
+@layer base {
+  /*
+   * Groups: geometry only, stacked as the box paints: the face (and the
+   * ring's piece) lowest, the corners and the four edges over it, the
+   * content on top. Left to document order, the face would paint over the
+   * head corners' straight run.
+   */
+  ::view-transition-group(*.fgd-xb) {
+    z-index: var(--layer-1);
+    animation-duration: var(--fgd-duration-expand);
+    animation-timing-function: var(--fgd-ease-expand);
+  }
+
+  ::view-transition-group(*.fgd-xb-corner),
+  ::view-transition-group(*.fgd-xb-edge) {
+    z-index: var(--layer-2);
+  }
+
+  ::view-transition-group(*.fgd-xb-content),
+  ::view-transition-group(*.fgd-xb-main),
+  ::view-transition-group(*.fgd-xb-end),
+  ::view-transition-group(*.fgd-xb-extra) {
+    z-index: var(--layer-3);
+  }
+
+  ::view-transition-group(*.fgd-xb.closing) {
+    animation-duration: var(--fgd-duration-collapse);
+  }
+
+  /* Images: no crossfade. The old image is hidden; the new one shows at once. */
+  ::view-transition-old(*.fgd-xb),
+  ::view-transition-new(*.fgd-xb) {
+    animation: none;
+  }
+
+  ::view-transition-old(*.fgd-xb) {
+    display: none;
+  }
+
+  /* Content and main keep their proportions and hug the left edge. */
+  ::view-transition-new(*.fgd-xb-content),
+  ::view-transition-new(*.fgd-xb-main) {
+    block-size: 100%;
+    inline-size: fit-content;
+    object-position: left;
+  }
+
+  /* The end piece keeps its size and rides the right edge. */
+  ::view-transition-new(*.fgd-xb-end) {
+    inline-size: fit-content;
+    object-position: right;
+  }
+
+  /* The extra grows from the main piece's foot. */
+  ::view-transition-new(*.fgd-xb-extra) {
+    block-size: 100%;
+    object-position: left;
+  }
+
+  /*
+   * The four edges fill their groups, which change only in length (an edge
+   * strip keeps its thickness), so they stretch along it at a constant
+   * weight; the borderless face fills freely; corners keep their size.
+   */
+  ::view-transition-new(*.fgd-xb-face),
+  ::view-transition-new(*.fgd-xb-edge) {
+    block-size: 100%;
+  }
+
+  /* While the morph runs, nothing else crossfades either: not the root snapshot, not a stray name. */
+  :root[data-fgd-expanding]::view-transition-old(*),
+  :root[data-fgd-expanding]::view-transition-new(*) {
+    animation: none;
+  }
+
+  :root[data-fgd-expanding]::view-transition-old(*) {
+    display: none;
+  }
+
+  /* The root does not move; its group adds no time to the morph. */
+  :root[data-fgd-expanding]::view-transition-group(root) {
+    animation: none;
+  }
+
+  /* The ring hand-off: hidden while the frame travels, then shown (after the rules above, and as specific). */
+  :root[data-fgd-expanding]::view-transition-new(*.fgd-xb-focus) {
+    animation: fgd-xb-hold var(--fgd-duration-disclosure) linear;
+  }
+}
+
+@keyframes fgd-xb-hold {
+  from,
+  to {
+    visibility: hidden;
+  }
+}
+
 /*
  * The print remap (§1.11.6, §1.4.5). Print always renders light, whatever
  * the screen mode, including inside a data-theme="dark" band: steps 1–5 of
- * the role scales go white and 6–12 black; contrast inks and label aliases
- * black; halo, grounds, tints and grain white; the seam black. Browsers drop
- * backgrounds by default, so fills and decorative patterns vanish; borders
- * and inline SVG print. Modules add structural print rules only.
+ * the role scales (danger included) go white and 6–12 black, so the danger
+ * roles print black; contrast inks and label aliases black; halo, grounds,
+ * tints and grain white; the seam black. Browsers drop backgrounds by
+ * default, so fills and decorative patterns vanish; borders and inline SVG
+ * print. Modules add structural print rules only.
  */
 @layer print {
   @media print {
     @page {
-      margin: var(--ds-print-margin-block) var(--ds-print-margin-inline);
+      margin: var(--fgd-print-margin-block) var(--fgd-print-margin-inline);
     }
 
     :root {
       color-scheme: light;
-      --ds-font-fine: var(--ds-font-text);
-      --ds-muted-weight-step: 0;
+      --fgd-font-fine: var(--fgd-font-text);
+      --fgd-muted-weight-step: 0;
 
       /* Print values of the tokens (§1.5). 1 px = 0.75 pt, so most px values already map exactly. */
-      --ds-font-size-display-xl: 26pt;
-      --ds-font-size-stat: 24pt; /* type-stat (§1.5.6, §8.8); type-display-xl keeps 26 pt */
-      --ds-font-size-display: 22pt;
-      --ds-font-size-h2: 17pt;
-      --ds-font-size-itemhead: 13pt;
-      --ds-font-size-kicker: 10.5pt;
-      --ds-font-size-subhead: 11pt;
-      --ds-font-size-lead: 12pt;
-      --ds-font-size-quote: 14pt;
-      --ds-font-size-body: 10.5pt;
-      --ds-font-size-body-ui: 10pt;
-      --ds-font-size-marquee: 11pt;
-      --ds-font-size-button-lg: 10pt;
-      --ds-font-size-button: 9pt;
-      --ds-font-size-footnote: 8.5pt;
-      --ds-font-size-caption: 8.5pt;
-      --ds-font-size-eyebrow: 8pt;
-      --ds-font-size-label: 8pt;
-      --ds-leading-reading: var(--ds-leading-compact);
-      --ds-space-56: 36pt;
-      --ds-space-section: 36pt;
+      --fgd-font-size-display-xl: 26pt;
+      --fgd-font-size-stat: 24pt; /* type-stat (§1.5.6, §8.8); type-display-xl keeps 26 pt */
+      --fgd-font-size-display: 22pt;
+      --fgd-font-size-h2: 17pt;
+      --fgd-font-size-itemhead: 13pt;
+      --fgd-font-size-kicker: 10.5pt;
+      --fgd-font-size-subhead: 11pt;
+      --fgd-font-size-lead: 12pt;
+      --fgd-font-size-quote: 14pt;
+      --fgd-font-size-body: 10.5pt;
+      --fgd-font-size-body-ui: 10pt;
+      --fgd-font-size-marquee: 11pt;
+      --fgd-font-size-button-lg: 10pt;
+      --fgd-font-size-button: 9pt;
+      --fgd-font-size-footnote: 8.5pt;
+      --fgd-font-size-caption: 8.5pt;
+      --fgd-font-size-eyebrow: 8pt;
+      --fgd-font-size-label: 8pt;
+      --fgd-leading-reading: var(--fgd-leading-compact);
+      --size-px-8-5: 36pt;
+      --fgd-space-section: 36pt;
       --size-px-10: 36pt;
       --size-px-11: 48pt;
-      --ds-space-margin: 0;
-      --ds-stroke-0-75: 0.75pt;
-      --ds-stroke-1-25: 1pt;
-      --ds-stroke-1-5: 1.1pt;
-      --ds-stroke-8: 4pt;
-      --ds-measure-reading: var(--ds-measure-print);
+      --fgd-space-margin: 0;
+      --border-size-0-75: 0.75pt;
+      --border-size-1-25: 1pt;
+      --border-size-1-5: 1.1pt;
+      --border-size-3-5: 4pt;
+      --fgd-measure-reading: var(--fgd-measure-print);
     }
 
     :root,
@@ -3709,12 +4029,25 @@
       --action10: #000;
       --action11: #000;
       --action12: #000;
+      --danger1: #fff;
+      --danger2: #fff;
+      --danger3: #fff;
+      --danger4: #fff;
+      --danger5: #fff;
+      --danger6: #000;
+      --danger7: #000;
+      --danger8: #000;
+      --danger9: #000;
+      --danger10: #000;
+      --danger11: #000;
+      --danger12: #000;
       --primary-contrast: #000;
       --secondary-contrast: #000;
       --action-contrast: #000;
       --role-inverse: #000;
       --role-action-label: #000;
       --role-action-pressed-label: #000;
+      --role-danger-label: #000;
       --role-select-mark: #000;
       --role-status-text: #000;
       --role-halo: #fff;