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

package/utils/tokens.css

@@ -1,8 +1,11 @@
 /*
- * 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}}
@@ -18,270 +21,337 @@
 :where(html){--ratio-square:1;--ratio-landscape:4/3;--ratio-portrait:3/4;--ratio-widescreen:16/9;--ratio-ultrawide:18/5;--ratio-golden:1.6180/1}}
 @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);
+    /* 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 (§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;
+    /* 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;
+    --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): with --radius-1 (2 px) and --radius-round. */
-    --ds-radius-none: 0;
-    --ds-radius-8: 8px;
-    --ds-radius-20: 20px;
+    /* 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));
+    --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]; --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;
+    /* 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;
+    --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). */
-    --ds-size-logo: var(--ds-size-control-md);
-    --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-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 {
-      --ds-size-logo: var(--size-px-7);
+      --fgd-size-logo: var(--size-px-7);
     }
   }
 
   @media (min-width: 1024px) {
     :root {
-      --ds-size-logo: var(--size-px-8);
-      --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);
     }
   }
 }
@@ -297,30 +367,30 @@
      * 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;
   }
 }