shelving 1.237.0 → 1.239.0

package/ui/style/getFontClass.md

@@ -0,0 +1,39 @@
+# getFontClass
+
+The `font` variant prop sets an element's font family — `<Code font="monospace">`, `<Heading font="title">`. It's an **override** for one-off typeface changes; for an app-wide change, point the font variables below at your own faces in a theme file.
+
+`getFontClass({ font })` maps the prop to a font-family class (e.g. `font="title"` → `title`). The semantic faces (`--font-title`, `--font-body`, …) are aliases of the three base faces, so a theme typically only redefines `--font-sans` / `--font-serif` / `--font-monospace`.
+
+## Theme variables
+
+The following `:root` variables are defined by this module and can be overridden in a theme file to adjust default styling across the whole app.
+
+### Faces
+
+| Variable | Default | Notes |
+|---|---|---|
+| `--font-sans` | `system-ui` | Default UI face. |
+| `--font-monospace` | `ui-monospace, "SF Mono", "Consolas", "Menlo", monospace` | Code face. |
+| `--font-serif` | `"Palatino", "Garamond", serif` | Serif face. |
+
+### Semantic
+
+| Variable | Default | Used for |
+|---|---|---|
+| `--font-title` | `var(--font-sans)` | Headings and titles. |
+| `--font-body` | `var(--font-sans)` | Body baseline. |
+| `--font-label` | `var(--font-sans)` | Labels. |
+| `--font-code` | `var(--font-monospace)` | Code and preformatted text. |
+
+### Case
+
+| Variable | Default | Used for |
+|---|---|---|
+| `--case-label` | `uppercase` | `text-transform` for labels and tags. |
+
+## See also
+
+- [`getSizeClass`](/ui/getSizeClass) — font size.
+- [`getWeightClass`](/ui/getWeightClass) — font weight.
+- [`getTypographyClass`](/ui/getTypographyClass) — combines size, weight, font, alignment, and tint.
+- [`ui`](/ui) — the styling-system overview and the full list of base token pages.

package/ui/style/getRadiusClass.md

@@ -0,0 +1,24 @@
+# getRadiusClass
+
+This module's main job is to **define and document the corner-radius design tokens**. Components don't take a `radius` prop — they read these tokens directly and expose their own per-component hooks (`--card-radius`, `--button-radius`, …) for surgical overrides. `getRadiusClass({ radius })` exists as a utility (e.g. `radius="large"` → `radius-large`) and as the home for this documentation.
+
+## Theme variables
+
+The following `:root` variables are defined by this module and can be overridden in a theme file to adjust default styling across the whole app. Every step derives from `--radius`, so changing that one value reflows the whole ramp.
+
+| Variable | Default | Notes |
+|---|---|---|
+| `--radius` | `1rem` | Base radius — the root of the scale. |
+| `--radius-xxsmall` | `calc(var(--radius) * 0.25)` | 4px |
+| `--radius-xsmall` | `calc(var(--radius) * 0.5)` | 8px |
+| `--radius-small` | `calc(var(--radius) * 0.75)` | 12px |
+| `--radius-normal` | `calc(var(--radius) * 1)` | 16px |
+| `--radius-large` | `calc(var(--radius) * 1.5)` | 24px |
+| `--radius-xlarge` | `calc(var(--radius) * 2)` | 32px |
+| `--radius-xxlarge` | `calc(var(--radius) * 3)` | 48px |
+
+## See also
+
+- [`getStrokeClass`](/ui/getStrokeClass) — border-thickness tokens.
+- [`getShadowClass`](/ui/getShadowClass) — drop-shadow tokens.
+- [`ui`](/ui) — the styling-system overview and the full list of base token pages.

package/ui/style/getShadowClass.md

@@ -0,0 +1,23 @@
+# getShadowClass
+
+This module's main job is to **define and document the elevation drop-shadow design tokens**. Components read these tokens directly; `getShadowClass({ shadow })` exists as a utility (e.g. `shadow="large"` → `shadow-large`) and as the home for this documentation.
+
+## Theme variables
+
+The following `:root` variables are defined by this module and can be overridden in a theme file to adjust default styling across the whole app. Each step deepens both blur and offset for a consistent elevation ramp.
+
+| Variable | Default |
+|---|---|
+| `--shadow-xxsmall` | `0 0.125rem 0.5rem -0.25rem #0006` |
+| `--shadow-xsmall` | `0 0.25rem 1rem -0.5rem #0006` |
+| `--shadow-small` | `0 0.375rem 1.5rem -0.75rem #0006` |
+| `--shadow-normal` | `0 0.5rem 2rem -1rem #0006` |
+| `--shadow-large` | `0 0.75rem 3rem -1.5rem #0006` |
+| `--shadow-xlarge` | `0 1rem 4rem -2rem #0006` |
+| `--shadow-xxlarge` | `0 1.5rem 6rem -3rem #0006` |
+
+## See also
+
+- [`getRadiusClass`](/ui/getRadiusClass) — corner-radius tokens.
+- [`getStrokeClass`](/ui/getStrokeClass) — border-thickness tokens.
+- [`ui`](/ui) — the styling-system overview and the full list of base token pages.

package/ui/style/getSizeClass.md

@@ -0,0 +1,42 @@
+# getSizeClass
+
+The `size` variant prop sets an element's font size from the modular scale — `<Heading size="large">`, `<Small size="xsmall">`. It's an **override** for one-off sizing; for an app-wide change, retune the scale variables below in a theme file.
+
+`getSizeClass({ size })` maps the prop to a font-size class (e.g. `size="large"` → `large`). All steps derive from `--size` and `--size-scale`, so changing those two reflows the whole ramp.
+
+## Theme variables
+
+The following `:root` variables are defined by this module and can be overridden in a theme file to adjust default styling across the whole app.
+
+### Scale
+
+| Variable | Default | Notes |
+|---|---|---|
+| `--size` | `1rem` | Base size — the root of the modular scale. |
+| `--size-scale` | `1.25` | Ratio between steps. |
+| `--size-xxsmall` … `--size-xxxlarge` | `calc(var(--size) * pow(var(--size-scale), n))` | Each step is the base scaled by a power of the ratio (`--size-normal` = `var(--size)`). |
+
+### Semantic & relative
+
+| Variable | Default | Used for |
+|---|---|---|
+| `--size-icon` | `var(--size-large)` | Icon box size. |
+| `--size-label` | `var(--size-small)` | Label text size. |
+| `--size-smaller` | `0.875em` | Relative (em) shrink — e.g. inline `<Small>`. |
+| `--size-larger` | `1.5em` | Relative grow. |
+| `--size-xlarger` | `2.5em` | Relative grow. |
+| `--size-xxlarger` | `5em` | Relative grow. |
+
+### Line height
+
+| Variable | Default | Used for |
+|---|---|---|
+| `--leading` | `clamp(1.05em, calc(1em + 0.5rem), 1.5em)` | Default line height; paired with every font-size variant and the body baseline. |
+| `--leading-normal` | `1.5` | Plain unitless line height for dense blocks. |
+
+## See also
+
+- [`getWeightClass`](/ui/getWeightClass) — font weight.
+- [`getFontClass`](/ui/getFontClass) — font family.
+- [`getTypographyClass`](/ui/getTypographyClass) — combines size, weight, font, alignment, and tint.
+- [`ui`](/ui) — the styling-system overview and the full list of base token pages.

package/ui/style/getSpaceClass.md

@@ -0,0 +1,35 @@
+# getSpaceClass
+
+The `space` variant prop sets a block-level element's `margin-block` (top + bottom) from the spacing scale — `<Section space="large">`, `<Paragraph space="none">`. It's an **override** for one-off spacing; for an app-wide change, retune the spacing variables below in a theme file.
+
+`getSpaceClass({ space })` maps the prop to a margin class (e.g. `space="large"` → `large`). The same scale also backs [`getPaddingClass`](/ui/getPaddingClass) and [`getGapClass`](/ui/getGapClass), so all three move together when you change `--space`.
+
+## Theme variables
+
+The following `:root` variables are defined by this module and can be overridden in a theme file to adjust default styling across the whole app.
+
+### Scale
+
+| Variable | Default | Notes |
+|---|---|---|
+| `--space` | `1rem` | Base spacing unit — the root of the scale. |
+| `--space-xxsmall` | `calc(var(--space) * 0.25)` | 4px |
+| `--space-xsmall` | `calc(var(--space) * 0.5)` | 8px |
+| `--space-small` | `calc(var(--space) * 0.75)` | 12px |
+| `--space-normal` | `calc(var(--space) * 1)` | 16px |
+| `--space-large` | `calc(var(--space) * 1.5)` | 24px |
+| `--space-xlarge` | `calc(var(--space) * 2)` | 32px |
+| `--space-xxlarge` | `calc(var(--space) * 3)` | 48px |
+
+### Semantic
+
+| Variable | Default | Used for |
+|---|---|---|
+| `--space-section` | `2rem` | Top margin for titles / headings / section blocks. |
+| `--space-paragraph` | `var(--space-normal)` | Default block-space for most prose elements. |
+
+## See also
+
+- [`getPaddingClass`](/ui/getPaddingClass) — the `padding-block` sibling on the same scale.
+- [`getGapClass`](/ui/getGapClass) — the flex/grid `gap` sibling on the same scale.
+- [`ui`](/ui) — the styling-system overview and the full list of base token pages.

package/ui/style/getStrokeClass.md

@@ -0,0 +1,20 @@
+# getStrokeClass
+
+This module's main job is to **define and document the border-thickness design tokens**. Components don't take a `stroke` prop — they hard-code to these tokens and expose their own per-component hooks (`--button-stroke`, `--card-border`, …) for overrides. `getStrokeClass({ stroke })` exists as a utility (e.g. `stroke="thick"` → `stroke-thick`) and as the home for this documentation.
+
+## Theme variables
+
+The following `:root` variables are defined by this module and can be overridden in a theme file to adjust default styling across the whole app.
+
+| Variable | Default | Used for |
+|---|---|---|
+| `--stroke` | `2px` | Base border thickness — the root of the scale. |
+| `--stroke-normal` | `calc(var(--stroke) * 1)` | Default borders. |
+| `--stroke-thick` | `calc(var(--stroke) * 1.5)` | Heavier borders. |
+| `--stroke-focus` | `var(--stroke-thick)` | Focus-outline thickness. |
+
+## See also
+
+- [`getRadiusClass`](/ui/getRadiusClass) — corner-radius tokens.
+- [`getShadowClass`](/ui/getShadowClass) — drop-shadow tokens.
+- [`ui`](/ui) — the styling-system overview and the full list of base token pages.

package/ui/style/getWeightClass.md

@@ -0,0 +1,25 @@
+# getWeightClass
+
+The `weight` variant prop sets an element's font weight — `<Paragraph weight="strong">`. It's an **override** for one-off emphasis; for an app-wide change, override the weight variables below in a theme file.
+
+`getWeightClass({ weight })` maps the prop to a weight class (e.g. `weight="strong"` → `weight-strong`). The semantic weights are aliases of the two base weights, so themes usually only need to move `--weight-normal` / `--weight-strong`.
+
+## Theme variables
+
+The following `:root` variables are defined by this module and can be overridden in a theme file to adjust default styling across the whole app.
+
+| Variable | Default | Used for |
+|---|---|---|
+| `--weight-normal` | `400` | Body text. |
+| `--weight-strong` | `700` | Bold / emphasis. |
+| `--weight-title` | `var(--weight-strong)` | Headings and titles. |
+| `--weight-body` | `var(--weight-normal)` | Body baseline. |
+| `--weight-label` | `var(--weight-strong)` | Labels (`<Label>`, table/definition headers). |
+| `--weight-code` | `500` | Monospace / code. |
+
+## See also
+
+- [`getSizeClass`](/ui/getSizeClass) — font size.
+- [`getFontClass`](/ui/getFontClass) — font family.
+- [`getTypographyClass`](/ui/getTypographyClass) — combines size, weight, font, alignment, and tint.
+- [`ui`](/ui) — the styling-system overview and the full list of base token pages.

package/ui/style/getWidthClass.md

@@ -0,0 +1,18 @@
+# getWidthClass
+
+The width variant props (`narrow`, `wide`, `full`, `fit`) constrain a block-level component's max-inline-size — `<Section narrow>`, `<Card wide>`. They're **overrides** for one-off layout; for an app-wide change, retune the width variables below in a theme file.
+
+`getWidthClass({ narrow, wide, full })` maps the boolean props to a width class. The `narrow` and `wide` constraints read the variables below.
+
+## Theme variables
+
+The following `:root` variables are defined by this module and can be overridden in a theme file to adjust default styling across the whole app.
+
+| Variable | Default | Used for |
+|---|---|---|
+| `--width-narrow` | `22.5rem` | The `narrow` constraint — single-column forms, dialogs. |
+| `--width-wide` | `33.75rem` | The `wide` constraint — readable prose measure. |
+
+## See also
+
+- [`ui`](/ui) — the styling-system overview and the full list of base token pages.

package/ui/style/index.d.ts

@@ -1,10 +1,17 @@
 export * from "./Color.js";
+export * from "./Duration.js";
 export * from "./Flex.js";
+export * from "./Font.js";
 export * from "./Gap.js";
 export * from "./Padding.js";
+export * from "./Radius.js";
 export * from "./Scroll.js";
+export * from "./Shadow.js";
+export * from "./Size.js";
 export * from "./Space.js";
 export * from "./Status.js";
+export * from "./Stroke.js";
 export * from "./Tint.js";
 export * from "./Typography.js";
+export * from "./Weight.js";
 export * from "./Width.js";

package/ui/style/index.js

@@ -1,10 +1,17 @@
 export * from "./Color.js";
+export * from "./Duration.js";
 export * from "./Flex.js";
+export * from "./Font.js";
 export * from "./Gap.js";
 export * from "./Padding.js";
+export * from "./Radius.js";
 export * from "./Scroll.js";
+export * from "./Shadow.js";
+export * from "./Size.js";
 export * from "./Space.js";
 export * from "./Status.js";
+export * from "./Stroke.js";
 export * from "./Tint.js";
 export * from "./Typography.js";
+export * from "./Weight.js";
 export * from "./Width.js";

package/ui/style/index.tsx

@@ -1,10 +1,17 @@
 export * from "./Color.js";
+export * from "./Duration.js";
 export * from "./Flex.js";
+export * from "./Font.js";
 export * from "./Gap.js";
 export * from "./Padding.js";
+export * from "./Radius.js";
 export * from "./Scroll.js";
+export * from "./Shadow.js";
+export * from "./Size.js";
 export * from "./Space.js";
 export * from "./Status.js";
+export * from "./Stroke.js";
 export * from "./Tint.js";
 export * from "./Typography.js";
+export * from "./Weight.js";
 export * from "./Width.js";

package/ui/style/layers.css

@@ -0,0 +1,26 @@
+/*
+ * Cascade-layer anchor for the shelving UI library. See `modules/ui/README.md` for the styling system overview.
+ *
+ * This file does exactly one thing: declare the cascade-layer order (lowest → highest priority). Every other
+ * `*.module.css` `@import`s it (alongside the specific token modules it references), so the layer order reaches
+ * every component regardless of bundle order. Re-declaring the same order elsewhere is a harmless no-op.
+ *
+ *   • `defaults`   — `:root` design tokens (spread across the themed token modules), the tint ladder, and the
+ *                    body baseline. Low-priority opt-in defaults.
+ *   • `components` — component-defining CSS. The bulk of the codebase.
+ *   • `variants`   — cross-cutting opt-in modifiers (Color, Status, Space, Padding, Gap, Width, Size, Weight,
+ *                    Font, Flex, Scroll). Always beat components.
+ *   • `overrides`  — top-priority structural overrides like `:first-child` / `:last-child` margin collapses,
+ *                    which must beat variant-set margins.
+ *
+ * Unlayered rules beat all layered rules — themes should override design tokens at `:root` (via inheritance),
+ * not via class selectors. Each themed token module documents the `:root` variables it defines and which ones
+ * a theme file is expected to override.
+ */
+@layer defaults, components, variants, overrides;
+
+@layer defaults {
+	:root {
+		color-scheme: light;
+	}
+}

package/ui/transition/FadeTransition.md

@@ -27,7 +27,7 @@ function Panel({ visible }: { visible: boolean }) {
 |---|---|---|
 | `--fade-transition-duration` | Duration of the fade-in and fade-out keyframes | `var(--duration-fast)` |
 
-**Global tokens it reads** — `--duration-fast`.
+**Global tokens it reads** — [`--duration-fast`](/ui/getDurationClass).
 
 ## See also
 

package/ui/transition/HorizontalTransition.md

@@ -35,7 +35,7 @@ function navigate(direction: "forward" | "back", url: string) {
 | `--horizontal-transition-size` | Slide distance for the enter/leave keyframes | `25vw` |
 | `--horizontal-transition-duration` | Duration of the slide keyframes | `var(--duration-normal)` |
 
-**Global tokens it reads** — `--duration-normal`.
+**Global tokens it reads** — [`--duration-normal`](/ui/getDurationClass).
 
 ## See also
 

package/ui/transition/Transition.md

@@ -60,7 +60,7 @@ Transitions are driven by CSS `::view-transition-*` pseudo-element rules keyed o
 
 The `overlay` variant sets `z-index: 100` on `::view-transition-group(.overlay)`. The preset variants document their own timing/distance hooks (`--fade-transition-duration`, `--vertical-transition-size` / `-duration`, `--horizontal-transition-size` / `-duration`) on their pages.
 
-**Global tokens it reads** — none directly; the preset variants fall back to `--duration-fast` / `--duration-normal`.
+**Global tokens it reads** — none directly; the preset variants fall back to [`--duration-fast`](/ui/getDurationClass) / [`--duration-normal`](/ui/getDurationClass).
 
 ## See also
 

package/ui/transition/VerticalTransition.md

@@ -25,7 +25,7 @@ import { VerticalTransition } from "shelving/ui";
 | `--vertical-transition-size` | Slide distance for the enter/leave keyframes | `25vh` |
 | `--vertical-transition-duration` | Duration of the slide keyframes | `var(--duration-normal)` |
 
-**Global tokens it reads** — `--duration-normal`.
+**Global tokens it reads** — [`--duration-normal`](/ui/getDurationClass).
 
 ## See also
 

package/ui/style/base.css

@@ -1,161 +0,0 @@
-/*
- * Base styles for the shelving UI library. See `modules/ui/README.md` for the styling system overview.
- *
- * Every `*.module.css` `@import`s this file at the very top. It does three things:
- *
- *   1. Declares the cascade-layer order (lowest → highest priority):
- *      • `defaults`   — `:root` design tokens + body baseline + low-priority opt-in defaults.
- *      • `components` — component-defining CSS. The bulk of the codebase.
- *      • `variants`   — cross-cutting opt-in modifiers (Color, Status, Spacing, Padding, Gap,
- *                       Width, Typography, Flex, Scroll). Always beat components.
- *      • `overrides`  — top-priority structural overrides like `:first-child` / `:last-child` margin
- *                       collapses, which must beat variant-set margins.
- *
- *   2. Defines the design-token constants at `:root` — colours, sizes, spacing, etc.
- *
- *   3. Sets baseline typography on `body` so a page with no `<Layout>` still reads correctly.
- *
- * Re-declaring the same layer order across every importer is a no-op. Unlayered rules beat all layered
- * rules — themes should override tokens at `:root` (via inheritance), not via class selectors.
- */
-@layer defaults, components, variants, overrides;
-
-@layer defaults {
-	:root {
-		color-scheme: light;
-
-		/* Semantic widths */
-		--width-narrow: 22.5rem;
-		--width-wide: 33.75rem;
-
-		/* Font weights */
-		--weight-normal: 400;
-		--weight-strong: 700;
-
-		/* Semantic font weights */
-		--weight-title: var(--weight-strong);
-		--weight-body: var(--weight-normal);
-		--weight-label: var(--weight-strong);
-		--weight-code: 500;
-
-		/* Font faces */
-		--font-sans: system-ui;
-		--font-monospace: ui-monospace, "SF Mono", "Consolas", "Menlo", monospace;
-		--font-serif: "Palatino", "Garamond", serif;
-
-		/* Semantic font faces */
-		--font-title: var(--font-sans);
-		--font-body: var(--font-sans);
-		--font-label: var(--font-sans);
-		--font-code: var(--font-monospace);
-
-		/* Semantic cases */
-		--case-label: uppercase;
-
-		/* Sizings */
-		--size: 1rem;
-		--size-scale: 1.25;
-		--size-xxsmall: calc(var(--size) * pow(var(--size-scale), -3));
-		--size-xsmall: calc(var(--size) * pow(var(--size-scale), -2));
-		--size-small: calc(var(--size) * pow(var(--size-scale), -1));
-		--size-normal: calc(var(--size) * pow(var(--size-scale), 0));
-		--size-large: calc(var(--size) * pow(var(--size-scale), 1));
-		--size-xlarge: calc(var(--size) * pow(var(--size-scale), 2));
-		--size-xxlarge: calc(var(--size) * pow(var(--size-scale), 3));
-		--size-xxxlarge: calc(var(--size) * pow(var(--size-scale), 4));
-
-		/* Semantic sizes */
-		--size-icon: var(--size-large);
-		--size-label: var(--size-small);
-
-		/* Relative sizes */
-		--size-smaller: 0.875em;
-		--size-larger: 1.5em;
-		--size-xlarger: 2.5em;
-		--size-xxlarger: 5em;
-
-		/* Line heights */
-		--leading: clamp(1.05em, calc(1em + 0.5rem), 1.5em);
-		--leading-normal: 1.5;
-
-		/* Spacings */
-		--space: 1rem;
-		--space-xxsmall: calc(var(--space) * 0.25); /* 4px */
-		--space-xsmall: calc(var(--space) * 0.5); /* 8px */
-		--space-small: calc(var(--space) * 0.75); /* 12px */
-		--space-normal: calc(var(--space) * 1); /* 16px */
-		--space-large: calc(var(--space) * 1.5); /* 24px */
-		--space-xlarge: calc(var(--space) * 2); /* 32px */
-		--space-xxlarge: calc(var(--space) * 3); /* 48px */
-
-		/* Semantic spacings */
-		--space-section: 2rem; /* Default top margin for titles/headings/section blocks. */
-		--space-paragraph: var(--space-normal); /* Default block-space for most prose-level elements. */
-
-		/* Radii */
-		--radius: 1rem;
-		--radius-xxsmall: calc(var(--radius) * 0.25); /* 4px */
-		--radius-xsmall: calc(var(--radius) * 0.5); /* 8px */
-		--radius-small: calc(var(--radius) * 0.75); /* 12px */
-		--radius-normal: calc(var(--radius) * 1); /* 16px */
-		--radius-large: calc(var(--radius) * 1.5); /* 24px */
-		--radius-xlarge: calc(var(--radius) * 2); /* 32px */
-		--radius-xxlarge: calc(var(--radius) * 3); /* 48px */
-
-		/* Strokes — border thicknesses. A single normal weight; components hard-code to it and expose
-		 * per-component `--x-border` / `--x-stroke` hooks to override (there are deliberately no thickness modifiers). */
-		--stroke: 2px;
-		--stroke-normal: calc(var(--stroke) * 1);
-		--stroke-thick: calc(var(--stroke) * 1.5);
-
-		/* Semantic strokes */
-		--stroke-focus: var(--stroke-thick);
-
-		/* Durations */
-		--duration-fast: 150ms;
-		--duration-normal: 300ms;
-		--duration-slow: 600ms;
-
-		/* Basic colors */
-		--color-gray: oklch(60% 0.01 240); /* Subtle blue tint so neutrals don't feel "dead". */
-		--color-red: oklch(62% 0.2 30); /* Slightly desaturated from default — takes the edge off without losing red identity. */
-		--color-orange: oklch(74% 0.157 60);
-		--color-yellow: oklch(86% 0.16 92);
-		--color-green: oklch(72% 0.185 130);
-		--color-aqua: oklch(72% 0.121 185);
-		--color-blue: oklch(57% 0.216 260); /* OKLCH form of #156ef4 — warmer hue (260) than the previous 240. */
-		--color-purple: oklch(58% 0.25 300);
-		--color-pink: oklch(68% 0.239 350);
-
-		/* Semantic colors */
-		--color-link: var(--color-blue);
-		--color-focus: var(--color-blue);
-		--color-success: var(--color-green);
-		--color-warning: var(--color-orange);
-		--color-failure: var(--color-red);
-
-		/* Brand colors */
-		--color-primary: var(--color-blue); /* Primary brand color */
-		--color-secondary: var(--color-purple); /* Secondary brand color */
-		--color-tertiary: var(--color-pink); /* Tertiary brand color */
-
-		/* Shadows */
-		--shadow-xxsmall: 0 0.125rem 0.5rem -0.25rem #0006;
-		--shadow-xsmall: 0 0.25rem 1rem -0.5rem #0006;
-		--shadow-small: 0 0.375rem 1.5rem -0.75rem #0006;
-		--shadow-normal: 0 0.5rem 2rem -1rem #0006;
-		--shadow-large: 0 0.75rem 3rem -1.5rem #0006;
-		--shadow-xlarge: 0 1rem 4rem -2rem #0006;
-		--shadow-xxlarge: 0 1.5rem 6rem -3rem #0006;
-	}
-
-	/* Typography reset — baseline fonts on body. Colours come from the tint ladder in
-	 * `Tint.module.css`, which paints body `--tint-00` text on a `--tint-100` background. */
-	body {
-		font-family: var(--font-body);
-		font-weight: var(--weight-normal);
-		font-size: var(--size-normal);
-		line-height: var(--leading);
-		text-align: start;
-	}
-}