@fairgarden/design 0.1.0-0.canary.0

package/utils/tokens.css

@@ -0,0 +1,329 @@
+/*
+ * 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}}
+@layer tokens{
+:where(html){--font-system-ui:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--font-transitional:Charter,Bitstream Charter,Sitka Text,Cambria,serif;--font-old-style:Iowan Old Style,Palatino Linotype,URW Palladio L,P052,serif;--font-humanist:Seravek,Gill Sans Nova,Ubuntu,Calibri,DejaVu Sans,source-sans-pro,sans-serif;--font-geometric-humanist:Avenir,Montserrat,Corbel,URW Gothic,source-sans-pro,sans-serif;--font-classical-humanist:Optima,Candara,Noto Sans,source-sans-pro,sans-serif;--font-neo-grotesque:Inter,Roboto,Helvetica Neue,Arial Nova,Nimbus Sans,Arial,sans-serif;--font-monospace-slab-serif:Nimbus Mono PS,Courier New,monospace;--font-monospace-code:Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,Cascadia Code,Menlo,Consolas,DejaVu Sans Mono,monospace;--font-industrial:Bahnschrift,DIN Alternate,Franklin Gothic Medium,Nimbus Sans Narrow,sans-serif-condensed,sans-serif;--font-rounded-sans:ui-rounded,Hiragino Maru Gothic ProN,Quicksand,Comfortaa,Manjari,Arial Rounded MT,Arial Rounded MT Bold,Calibri,source-sans-pro,sans-serif;--font-slab-serif:Rockwell,Rockwell Nova,Roboto Slab,DejaVu Serif,Sitka Small,serif;--font-antique:Superclarendon,Bookman Old Style,URW Bookman,URW Bookman L,Georgia Pro,Georgia,serif;--font-didone:Didot,Bodoni MT,Noto Serif Display,URW Palladio L,P052,Sylfaen,serif;--font-handwritten:Segoe Print,Bradley Hand,Chilanka,TSCu_Comic,casual,cursive;--font-sans:var(--font-system-ui);--font-serif:ui-serif,serif;--font-mono:var(--font-monospace-code);--font-weight-1:100;--font-weight-2:200;--font-weight-3:300;--font-weight-4:400;--font-weight-5:500;--font-weight-6:600;--font-weight-7:700;--font-weight-8:800;--font-weight-9:900;--font-lineheight-00:.95;--font-lineheight-0:1.1;--font-lineheight-1:1.25;--font-lineheight-2:1.375;--font-lineheight-3:1.5;--font-lineheight-4:1.75;--font-lineheight-5:2;--font-letterspacing-0:-.05em;--font-letterspacing-1:.025em;--font-letterspacing-2:.050em;--font-letterspacing-3:.075em;--font-letterspacing-4:.150em;--font-letterspacing-5:.500em;--font-letterspacing-6:.750em;--font-letterspacing-7:1em;--font-size-00:.5rem;--font-size-0:.75rem;--font-size-1:1rem;--font-size-2:1.1rem;--font-size-3:1.25rem;--font-size-4:1.5rem;--font-size-5:2rem;--font-size-6:2.5rem;--font-size-7:3rem;--font-size-8:3.5rem;--font-size-fluid-0:max(.75rem,min(2vw,1rem));--font-size-fluid-1:max(1rem,min(4vw,1.5rem));--font-size-fluid-2:max(1.5rem,min(6vw,2.5rem));--font-size-fluid-3:max(2rem,min(9vw,3.5rem))}}
+@layer tokens{
+:where(html){--border-size-1:1px;--border-size-2:2px;--border-size-3:5px;--border-size-4:10px;--border-size-5:25px;--radius-1:2px;--radius-2:5px;--radius-3:1rem;--radius-4:2rem;--radius-5:4rem;--radius-6:8rem;--radius-drawn-1:255px 15px 225px 15px/15px 225px 15px 255px;--radius-drawn-2:125px 10px 20px 185px/25px 205px 205px 25px;--radius-drawn-3:15px 255px 15px 225px/225px 15px 255px 15px;--radius-drawn-4:15px 25px 155px 25px/225px 150px 25px 115px;--radius-drawn-5:250px 25px 15px 20px/15px 80px 105px 115px;--radius-drawn-6:28px 100px 20px 15px/150px 30px 205px 225px;--radius-round:1e5px;--radius-blob-1:30% 70% 70% 30%/53% 30% 70% 47%;--radius-blob-2:53% 47% 34% 66%/63% 46% 54% 37%;--radius-blob-3:37% 63% 56% 44%/49% 56% 44% 51%;--radius-blob-4:63% 37% 37% 63%/43% 37% 63% 57%;--radius-blob-5:49% 51% 48% 52%/57% 44% 56% 43%;--radius-conditional-1:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-1));--radius-conditional-2:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-2));--radius-conditional-3:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-3));--radius-conditional-4:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-4));--radius-conditional-5:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-5));--radius-conditional-6:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-6))}}
+@layer tokens{
+:where(html){--ease-1:cubic-bezier(.25,0,.5,1);--ease-2:cubic-bezier(.25,0,.4,1);--ease-3:cubic-bezier(.25,0,.3,1);--ease-4:cubic-bezier(.25,0,.2,1);--ease-5:cubic-bezier(.25,0,.1,1);--ease-in-1:cubic-bezier(.25,0,1,1);--ease-in-2:cubic-bezier(.50,0,1,1);--ease-in-3:cubic-bezier(.70,0,1,1);--ease-in-4:cubic-bezier(.90,0,1,1);--ease-in-5:cubic-bezier(1,0,1,1);--ease-out-1:cubic-bezier(0,0,.75,1);--ease-out-2:cubic-bezier(0,0,.50,1);--ease-out-3:cubic-bezier(0,0,.3,1);--ease-out-4:cubic-bezier(0,0,.1,1);--ease-out-5:cubic-bezier(0,0,0,1);--ease-in-out-1:cubic-bezier(.1,0,.9,1);--ease-in-out-2:cubic-bezier(.3,0,.7,1);--ease-in-out-3:cubic-bezier(.5,0,.5,1);--ease-in-out-4:cubic-bezier(.7,0,.3,1);--ease-in-out-5:cubic-bezier(.9,0,.1,1);--ease-elastic-out-1:cubic-bezier(.5,.75,.75,1.25);--ease-elastic-out-2:cubic-bezier(.5,1,.75,1.25);--ease-elastic-out-3:cubic-bezier(.5,1.25,.75,1.25);--ease-elastic-out-4:cubic-bezier(.5,1.5,.75,1.25);--ease-elastic-out-5:cubic-bezier(.5,1.75,.75,1.25);--ease-elastic-in-1:cubic-bezier(.5,-0.25,.75,1);--ease-elastic-in-2:cubic-bezier(.5,-0.50,.75,1);--ease-elastic-in-3:cubic-bezier(.5,-0.75,.75,1);--ease-elastic-in-4:cubic-bezier(.5,-1.00,.75,1);--ease-elastic-in-5:cubic-bezier(.5,-1.25,.75,1);--ease-elastic-in-out-1:cubic-bezier(.5,-.1,.1,1.5);--ease-elastic-in-out-2:cubic-bezier(.5,-.3,.1,1.5);--ease-elastic-in-out-3:cubic-bezier(.5,-.5,.1,1.5);--ease-elastic-in-out-4:cubic-bezier(.5,-.7,.1,1.5);--ease-elastic-in-out-5:cubic-bezier(.5,-.9,.1,1.5);--ease-step-1:steps(2);--ease-step-2:steps(3);--ease-step-3:steps(4);--ease-step-4:steps(7);--ease-step-5:steps(10);--ease-elastic-1:var(--ease-elastic-out-1);--ease-elastic-2:var(--ease-elastic-out-2);--ease-elastic-3:var(--ease-elastic-out-3);--ease-elastic-4:var(--ease-elastic-out-4);--ease-elastic-5:var(--ease-elastic-out-5);--ease-squish-1:var(--ease-elastic-in-out-1);--ease-squish-2:var(--ease-elastic-in-out-2);--ease-squish-3:var(--ease-elastic-in-out-3);--ease-squish-4:var(--ease-elastic-in-out-4);--ease-squish-5:var(--ease-elastic-in-out-5);--ease-spring-1:linear(0,0.006,0.025 2.8%,0.101 6.1%,0.539 18.9%,0.721 25.3%,0.849 31.5%,0.937 38.1%,0.968 41.8%,0.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001);--ease-spring-2:linear(0,0.007,0.029 2.2%,0.118 4.7%,0.625 14.4%,0.826 19%,0.902,0.962,1.008 26.1%,1.041 28.7%,1.064 32.1%,1.07 36%,1.061 40.5%,1.015 53.4%,0.999 61.6%,0.995 71.2%,1);--ease-spring-3:linear(0,0.009,0.035 2.1%,0.141 4.4%,0.723 12.9%,0.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,0.991,0.977 51%,0.974 53.8%,0.975 57.1%,0.997 69.8%,1.003 76.9%,1);--ease-spring-4:linear(0,0.009,0.037 1.7%,0.153 3.6%,0.776 10.3%,1.001,1.142 16%,1.185,1.209 19%,1.215 19.9% 20.8%,1.199,1.165 25%,1.056 30.3%,1.008 33%,0.973,0.955 39.2%,0.953 41.1%,0.957 43.3%,0.998 53.3%,1.009 59.1% 63.7%,0.998 78.9%,1);--ease-spring-5:linear(0,0.01,0.04 1.6%,0.161 3.3%,0.816 9.4%,1.046,1.189 14.4%,1.231,1.254 17%,1.259,1.257 18.6%,1.236,1.194 22.3%,1.057 27%,0.999 29.4%,0.955 32.1%,0.942,0.935 34.9%,0.933,0.939 38.4%,1 47.3%,1.011,1.017 52.6%,1.016 56.4%,1 65.2%,0.996 70.2%,1.001 87.2%,1);--ease-bounce-1:linear(0,0.004,0.016,0.035,0.063,0.098,0.141,0.191,0.25,0.316,0.391 36.8%,0.563,0.766,1 58.8%,0.946,0.908 69.1%,0.895,0.885,0.879,0.878,0.879,0.885,0.895,0.908 89.7%,0.946,1);--ease-bounce-2:linear(0,0.004,0.016,0.035,0.063,0.098,0.141 15.1%,0.25,0.391,0.562,0.765,1,0.892 45.2%,0.849,0.815,0.788,0.769,0.757,0.753,0.757,0.769,0.788,0.815,0.85,0.892 75.2%,1 80.2%,0.973,0.954,0.943,0.939,0.943,0.954,0.973,1);--ease-bounce-3:linear(0,0.004,0.016,0.035,0.062,0.098,0.141 11.4%,0.25,0.39,0.562,0.764,1 30.3%,0.847 34.8%,0.787,0.737,0.699,0.672,0.655,0.65,0.656,0.672,0.699,0.738,0.787,0.847 61.7%,1 66.2%,0.946,0.908,0.885 74.2%,0.879,0.878,0.879,0.885 79.5%,0.908,0.946,1 87.4%,0.981,0.968,0.96,0.957,0.96,0.968,0.981,1);--ease-bounce-4:linear(0,0.004,0.016 3%,0.062,0.141,0.25,0.391,0.562 18.2%,1 24.3%,0.81,0.676 32.3%,0.629,0.595,0.575,0.568,0.575,0.595,0.629,0.676 48.2%,0.811,1 56.2%,0.918,0.86,0.825,0.814,0.825,0.86,0.918,1 77.2%,0.94 80.6%,0.925,0.92,0.925,0.94 87.5%,1 90.9%,0.974,0.965,0.974,1);--ease-bounce-5:linear(0,0.004,0.016 2.5%,0.063,0.141,0.25 10.1%,0.562,1 20.2%,0.783,0.627,0.534 30.9%,0.511,0.503,0.511,0.534 38%,0.627,0.782,1 48.7%,0.892,0.815,0.769 56.3%,0.757,0.753,0.757,0.769 61.3%,0.815,0.892,1 68.8%,0.908 72.4%,0.885,0.878,0.885,0.908 79.4%,1 83%,0.954 85.5%,0.943,0.939,0.943,0.954 90.5%,1 93%,0.977,0.97,0.977,1);--ease-circ-in:cubic-bezier(.6,.04,.98,.335);--ease-circ-in-out:cubic-bezier(.785,.135,.15,.86);--ease-circ-out:cubic-bezier(.075,.82,.165,1);--ease-cubic-in:cubic-bezier(.55,.055,.675,.19);--ease-cubic-in-out:cubic-bezier(.645,.045,.355,1);--ease-cubic-out:cubic-bezier(.215,.61,.355,1);--ease-expo-in:cubic-bezier(.95,.05,.795,.035);--ease-expo-in-out:cubic-bezier(1,0,0,1);--ease-expo-out:cubic-bezier(.19,1,.22,1);--ease-quad-in:cubic-bezier(.55,.085,.68,.53);--ease-quad-in-out:cubic-bezier(.455,.03,.515,.955);--ease-quad-out:cubic-bezier(.25,.46,.45,.94);--ease-quart-in:cubic-bezier(.895,.03,.685,.22);--ease-quart-in-out:cubic-bezier(.77,0,.175,1);--ease-quart-out:cubic-bezier(.165,.84,.44,1);--ease-quint-in:cubic-bezier(.755,.05,.855,.06);--ease-quint-in-out:cubic-bezier(.86,0,.07,1);--ease-quint-out:cubic-bezier(.23,1,.32,1);--ease-sine-in:cubic-bezier(.47,0,.745,.715);--ease-sine-in-out:cubic-bezier(.445,.05,.55,.95);--ease-sine-out:cubic-bezier(.39,.575,.565,1)}}
+@layer tokens{
+:where(html){--layer-1:1;--layer-2:2;--layer-3:3;--layer-4:4;--layer-5:5;--layer-important:2147483647}}
+@layer tokens{
+: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 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). */
+    --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). */
+    --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). */
+    --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.
+     */
+    --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;
+    --radius-3-25: 20px;
+    /* ≈ 1/7 of the frame's width, max 64 px; the frame's parent is its container. */
+    --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). */
+    --fgd-font-display: 'Fraunces Variable', 'Source Serif 4 Variable', var(--font-old-style);
+    --fgd-font-text: 'Source Serif 4 Variable', var(--font-transitional);
+    --fgd-font-ui: 'Figtree Variable', var(--font-geometric-humanist);
+    --fgd-font-mono: 'IBM Plex Mono', 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. */
+    --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). */
+    --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). */
+    --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). */
+    --fgd-size-control-md: 40px;
+    --fgd-size-control-xl: 56px;
+    --fgd-size-hit: 44px;
+    --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. */
+    --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). --fgd-table-row-rule is
+     * the width of the --role-rule row rule that replaces the --role-hairline
+     * one: 0 while padding holds --size-px-2-5, --border-size-1 when compact.
+     */
+    --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. */
+    --fgd-container-content: 1120px;
+    --fgd-container-wide: 1360px;
+
+    /* Focus (§1.5.14): 2 px ring at a 2 px offset, color --primary12. */
+    --fgd-focus-width: var(--border-size-2);
+    --fgd-focus-offset: var(--border-size-2);
+
+    /* Motion (§1.5.15): with --ease-out-3. */
+    --fgd-duration-instant: 0ms;
+    --fgd-duration-quick: 120ms;
+    --fgd-duration-disclosure: 200ms;
+    --fgd-delay-tooltip: 500ms;
+    --fgd-duration-toast: 6s;
+    /* Desktop Navigation Menu hover intent [D182]; JS mirror: utils/tokens.ts. */
+    --fgd-delay-nav-open: 150ms;
+    --fgd-delay-nav-close: 300ms;
+
+    /* 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). */
+    --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]. */
+    --fgd-print-trail-stroke: 0.75pt;
+    --fgd-print-trail-dash: 3pt;
+    --fgd-print-trail-gap: 2.5pt;
+  }
+
+  @media (min-width: 480px) {
+    :root {
+      --fgd-space-margin: var(--size-px-5);
+    }
+  }
+
+  @media (min-width: 768px) {
+    :root {
+      --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 {
+      --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 {
+      --fgd-duration-quick: var(--fgd-duration-instant);
+      --fgd-duration-disclosure: var(--fgd-duration-instant);
+    }
+  }
+
+  /* Density sets (§1.5.16), set per module, never by breakpoint (§5.8). */
+  [data-density='spacious'] {
+    --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'] {
+    --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 × --size-px-2-5, rows ≥ 32 px, --role-rule row rules [D83]. */
+  [data-density='compact'] {
+    --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'] {
+      --fgd-space-section: var(--size-px-11);
+    }
+
+    [data-density='compact'] {
+      --fgd-space-section: var(--size-px-7-5);
+    }
+  }
+}
+
+/* ── Added by the icons-and-patterns work (pattern.module.css) ───────────── */
+@layer tokens {
+  :root {
+    /*
+     * Shaped-edge switch (§4.9.2) [D179]: the `display` of a shaped edge's
+     * drawn layer (ornament-fringe, the hill). A shaped edge sits only on a
+     * band seam that tone separates, which in v1 is the night band against
+     * a page ground in light mode. The role maps (roles.css) set `none` on
+     * 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.
+     */
+    --fgd-edge-shaped: block;
+
+    /*
+     * Hover underline switches [D181], `none` or `underline`, set per scope
+     * 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;
+     * - --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.
+     */
+    --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 --fgd-edge-shaped: a
+     * light base ground (and a `white` plate) shows the flat screen fills
+     * (--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.
+     */
+    --fgd-series-fill: inline;
+    --fgd-series-pattern: none;
+  }
+}

package/utils/tokens.d.ts

@@ -0,0 +1,36 @@
+/** The anchored-panel offset from its trigger: `--fgd-popup-offset` (8 px, §9.1, §10.1). */
+export declare const POPUP_OFFSET_PX = 8;
+/**
+ * Viewport clearance before a panel flips or shifts: `--fgd-popup-clearance`
+ * (16 px, the base `--fgd-space-margin`, §10.1).
+ */
+export declare const POPUP_CLEARANCE_PX = 16;
+/** The tooltip open delay: `--fgd-delay-tooltip` (500 ms, §1.5.15) [D175]. */
+export declare const TOOLTIP_DELAY_MS = 500;
+/**
+ * Desktop Navigation Menu hover intent [D182], for Base UI's Root `delay`
+ * and `closeDelay`: `--fgd-delay-nav-open` (150 ms) and `--fgd-delay-nav-close`
+ * (300 ms). Every input still opens a panel by click, Enter, Space or
+ * ArrowDown; the delays apply to a fine pointer only.
+ */
+export declare const NAV_DELAY_MS: {
+    readonly open: 150;
+    readonly close: 300;
+};
+/**
+ * The marker and trail geometry (§1.5.16, §4.7), for SVG viewBoxes, which
+ * take numbers: `--fgd-marker-trail` (5 px), `--fgd-marker-timeline` (8 px),
+ * `--fgd-marker-waypoint` (9 px), `--fgd-marker-current` (10 px),
+ * `--fgd-arrow-head` (6 px), the markers' `--border-size-1-5` stroke, and the
+ * `--size-px-1` (4 px) gap where a dash stops short of a marker.
+ */
+export declare const MARKER_PX: {
+    readonly trail: 5;
+    readonly timeline: 8;
+    readonly waypoint: 9;
+    readonly current: 10;
+    readonly arrowHead: 6;
+    readonly stroke: 1.5;
+    readonly gap: 4;
+};
+//# sourceMappingURL=tokens.d.ts.map

package/utils/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/utils/tokens.ts"],"names":[],"mappings":"AAMA,4FAA4F;AAC5F,eAAO,MAAM,eAAe,IAAI,CAAA;AAEhC;;;GAGG;AACH,eAAO,MAAM,kBAAkB,KAAK,CAAA;AAEpC,8EAA8E;AAC9E,eAAO,MAAM,gBAAgB,MAAM,CAAA;AAEnC;;;;;GAKG;AACH,eAAO,MAAM,YAAY;;;CAAqC,CAAA;AAE9D;;;;;;GAMG;AACH,eAAO,MAAM,SAAS;;;;;;;;CAQZ,CAAA"}

package/utils/tokens.js

@@ -0,0 +1,38 @@
+/*
+ * JavaScript mirrors of the tokens that Base UI takes as numbers
+ * (positioner offsets, open and close delays). Each value restates one token
+ * in tokens.css; change both together.
+ */
+/** The anchored-panel offset from its trigger: `--fgd-popup-offset` (8 px, §9.1, §10.1). */
+export const POPUP_OFFSET_PX = 8;
+/**
+ * Viewport clearance before a panel flips or shifts: `--fgd-popup-clearance`
+ * (16 px, the base `--fgd-space-margin`, §10.1).
+ */
+export const POPUP_CLEARANCE_PX = 16;
+/** The tooltip open delay: `--fgd-delay-tooltip` (500 ms, §1.5.15) [D175]. */
+export const TOOLTIP_DELAY_MS = 500;
+/**
+ * Desktop Navigation Menu hover intent [D182], for Base UI's Root `delay`
+ * and `closeDelay`: `--fgd-delay-nav-open` (150 ms) and `--fgd-delay-nav-close`
+ * (300 ms). Every input still opens a panel by click, Enter, Space or
+ * ArrowDown; the delays apply to a fine pointer only.
+ */
+export const NAV_DELAY_MS = { open: 150, close: 300 };
+/**
+ * The marker and trail geometry (§1.5.16, §4.7), for SVG viewBoxes, which
+ * take numbers: `--fgd-marker-trail` (5 px), `--fgd-marker-timeline` (8 px),
+ * `--fgd-marker-waypoint` (9 px), `--fgd-marker-current` (10 px),
+ * `--fgd-arrow-head` (6 px), the markers' `--border-size-1-5` stroke, and the
+ * `--size-px-1` (4 px) gap where a dash stops short of a marker.
+ */
+export const MARKER_PX = {
+    trail: 5,
+    timeline: 8,
+    waypoint: 9,
+    current: 10,
+    arrowHead: 6,
+    stroke: 1.5,
+    gap: 4,
+};
+//# sourceMappingURL=tokens.js.map

package/utils/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/utils/tokens.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,4FAA4F;AAC5F,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,CAAA;AAEhC;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,EAAE,CAAA;AAEpC,8EAA8E;AAC9E,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;AAEnC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAW,CAAA;AAE9D;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,KAAK,EAAE,CAAC;IACR,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC;IACX,OAAO,EAAE,EAAE;IACX,SAAS,EAAE,CAAC;IACZ,MAAM,EAAE,GAAG;IACX,GAAG,EAAE,CAAC;CACE,CAAA"}