@dryui/ui 3.0.0 → 4.0.0

package/src/themes/default.css

@@ -0,0 +1,618 @@
+/* Tokens + motion utilities components depend on. Host page decides paint. */
+*,
+*::before,
+*::after {
+	/* Components are authored against border-box sizing math. */
+	box-sizing: border-box;
+}
+
+:root {
+	/* ─── Public aliases (Tier 2, documented) ──────────────────────────
+	   Override at `:root` to retheme. Tier 3 tokens below derive via
+	   `var(--alias)` so overrides cascade. See skills/dryui-build/SKILL.md. */
+	--dry-color-primary: hsl(230, 64%, 57%);
+	--dry-color-primary-hover: hsl(230, 64%, 49%);
+	--dry-color-text: hsla(230, 100%, 7%, 0.9);
+	--dry-color-text-secondary: hsla(230, 100%, 10%, 0.65);
+	--dry-color-foreground: var(--dry-color-text);
+	--dry-color-muted: hsla(230, 100%, 20%, 0.1);
+	--dry-color-warning: hsl(40, 80%, 50%);
+	--dry-color-success: hsl(145, 60%, 45%);
+	--dry-color-danger: hsl(0, 70%, 50%);
+	--dry-color-border: hsla(230, 100%, 20%, 0.1);
+	--dry-color-border-hover: hsla(230, 100%, 15%, 0.45);
+
+	/* ─── Neutral ─────────────────────────────────────────────────── */
+	--dry-color-text-strong: var(--dry-color-text);
+	--dry-color-text-weak: var(--dry-color-text-secondary);
+	--dry-color-icon: hsla(230, 100%, 15%, 0.7);
+	--dry-color-stroke-strong: var(--dry-color-border-hover);
+	--dry-color-stroke-weak: var(--dry-color-border);
+	--dry-color-fill: hsla(230, 100%, 25%, 0.04);
+	--dry-color-fill-hover: hsla(230, 100%, 25%, 0.04);
+	--dry-color-fill-active: hsla(230, 100%, 25%, 0.12);
+
+	/* ─── Brand (hue 230) ─────────────────────────────────────────── */
+	--dry-color-brand: var(--dry-color-primary);
+	--dry-color-text-brand: var(--dry-color-primary);
+	--dry-color-fill-brand: var(--dry-color-primary);
+	--dry-color-fill-brand-hover: var(--dry-color-primary-hover);
+	--dry-color-fill-brand-active: hsl(230, 64%, 43%);
+	--dry-color-fill-brand-weak: hsla(230, 100%, 67%, 0.05);
+	--dry-color-stroke-brand: hsla(230, 64%, 57%, 0.5);
+	--dry-color-stroke-brand-strong: hsla(230, 64%, 57%, 0.8);
+	--dry-color-on-brand: #ffffff;
+	--dry-color-focus-ring: hsla(230, 64%, 57%, 0.4);
+
+	/* ─── Backgrounds ─────────────────────────────────────────────── */
+	--dry-color-bg-base: #ffffff;
+	--dry-color-bg-raised: #f8f9fa;
+	--dry-color-bg-overlay: #f1f3f5;
+
+	/* ─── Semantic parity extensions ──────────────────────────────── */
+	--dry-color-text-disabled: var(--dry-color-muted);
+	--dry-color-text-inverse: hsla(0, 0%, 100%, 1);
+	--dry-color-text-inverse-weak: hsla(0, 0%, 100%, 0.78);
+	--dry-color-text-inverse-disabled: hsla(0, 0%, 100%, 0.12);
+
+	--dry-color-stroke-focus: var(--dry-color-brand);
+	--dry-color-stroke-selected: var(--dry-color-brand);
+	--dry-color-stroke-disabled: var(--dry-color-stroke-weak);
+	--dry-color-stroke-inverse: hsla(0, 0%, 100%, 0.6);
+	--dry-color-stroke-inverse-weak: hsla(0, 0%, 100%, 0.12);
+
+	--dry-color-fill-weak: var(--dry-color-fill);
+	--dry-color-fill-weaker: hsla(230, 100%, 25%, 0.02);
+	--dry-color-fill-selected: var(--dry-color-fill-brand);
+	--dry-color-fill-disabled: var(--dry-color-stroke-weak);
+	--dry-color-fill-inverse: var(--dry-color-text-inverse);
+	--dry-color-fill-inverse-weak: hsla(0, 0%, 100%, 0.06);
+	--dry-color-fill-yellow: #fec62e;
+
+	--dry-color-bg-sunken: #f5f6fa;
+	--dry-color-bg-alternate: var(--dry-color-bg-sunken);
+	--dry-color-bg-inverse: hsl(233, 18%, 9%);
+
+	/* Resolves at use-time so it tracks the active theme. */
+	--dry-color-bg: var(--dry-color-bg-base);
+
+	/* ─── Image edge ring ────────────────────────────────────────────
+	   Subtle 1px outline for image surfaces (avatars, images, image
+	   skeletons). Prevents image edges from reading as surface
+	   imperfections. Hardcoded rgba — not brand-derivable. */
+	--dry-image-edge: rgba(0, 0, 0, 0.1);
+
+	/* ─── Component: Toggle ─────────────────────────────────────────
+	   Derived from semantic tokens so brand overrides (e.g. a consumer
+	   retheming --dry-color-fill-brand) flow through to toggles too.
+	   Thumb bg is intentionally a neutral literal — it's a surface knob,
+	   not a brand-tinted element. Mirrored in `component-defaults.css`
+	   for consumers who want to import the component layer alone. */
+	--dry-toggle-track-bg: var(--dry-color-fill-brand-weak);
+	--dry-toggle-track-stroke: var(--dry-color-stroke-strong);
+	--dry-toggle-selected-bg: var(--dry-color-fill-brand);
+	--dry-toggle-selected-stroke: var(--dry-color-fill-brand);
+	--dry-toggle-thumb-bg: #ffffff;
+	--dry-toggle-disabled-fill: var(--dry-color-stroke-weak);
+	--dry-toggle-disabled-stroke: var(--dry-color-stroke-weak);
+	--dry-toggle-label-color: var(--dry-color-text-strong);
+	--dry-toggle-label-disabled-color: var(--dry-color-text-disabled);
+
+	/* ─── Component: Beam ─────────────────────────────────────────── */
+	--dry-beam-default-blend: multiply;
+
+	/* ─── Status: Error (hue 0) ───────────────────────────────────── */
+	--dry-color-text-error: hsl(0, 70%, 35%);
+	--dry-color-fill-error: var(--dry-color-danger);
+	--dry-color-fill-error-hover: hsl(0, 70%, 42%);
+	--dry-color-fill-error-weak: hsla(0, 70%, 50%, 0.1);
+	--dry-color-stroke-error: hsl(0, 50%, 70%);
+	--dry-color-stroke-error-strong: hsla(0, 70%, 50%, 0.8);
+	--dry-color-on-error: #ffffff;
+
+	/* ─── Status: Warning (hue 40) ────────────────────────────────── */
+	--dry-color-text-warning: hsl(40, 80%, 30%);
+	--dry-color-fill-warning: var(--dry-color-warning);
+	--dry-color-fill-warning-weak: hsla(40, 80%, 50%, 0.1);
+	--dry-color-stroke-warning: hsl(40, 60%, 65%);
+	--dry-color-stroke-warning-strong: hsla(40, 80%, 50%, 0.8);
+	--dry-color-on-warning: hsl(40, 80%, 15%);
+
+	/* ─── Status: Success (hue 145) ───────────────────────────────── */
+	--dry-color-text-success: hsl(145, 60%, 30%);
+	--dry-color-fill-success: var(--dry-color-success);
+	--dry-color-fill-success-weak: hsla(145, 60%, 45%, 0.1);
+	--dry-color-stroke-success: hsl(145, 50%, 65%);
+	--dry-color-stroke-success-strong: hsla(145, 60%, 45%, 0.8);
+	--dry-color-on-success: #ffffff;
+
+	/* ─── Status: Info (hue 210) ──────────────────────────────────── */
+	--dry-color-text-info: hsl(210, 70%, 35%);
+	--dry-color-fill-info: hsl(210, 70%, 50%);
+	--dry-color-fill-info-weak: hsla(210, 70%, 50%, 0.1);
+	--dry-color-stroke-info: hsl(210, 50%, 70%);
+	--dry-color-stroke-info-strong: hsla(210, 70%, 50%, 0.8);
+
+	/* ─── Accent tone (warm counterpoint to brand) ───────────────── */
+	--dry-color-fill-accent: hsl(25, 90%, 58%);
+	--dry-color-fill-accent-weak: hsla(25, 90%, 58%, 0.08);
+	--dry-color-stroke-accent: hsla(25, 90%, 58%, 0.5);
+	--dry-color-stroke-accent-strong: hsla(25, 90%, 58%, 0.8);
+
+	/* ─── Purple semantic palette (badge / tag purple variants) ───── */
+	--dry-color-text-purple: hsl(280, 60%, 38%);
+	--dry-color-fill-purple: hsl(280, 65%, 55%);
+	--dry-color-fill-purple-weak: hsla(280, 65%, 55%, 0.1);
+	--dry-color-stroke-purple: hsla(280, 65%, 55%, 0.5);
+	--dry-color-on-purple: #ffffff;
+
+	/* ─── Extended surface depth ──────────────────────────────────── */
+	--dry-color-bg-floating: #ffffff;
+
+	/* ─── Semantic shadows ────────────────────────────────────────── */
+	--dry-shadow-raised: 0 1px 3px hsla(230, 20%, 20%, 0.08), 0 1px 2px hsla(230, 20%, 20%, 0.06);
+	--dry-shadow-overlay: 0 8px 24px hsla(230, 20%, 20%, 0.12), 0 2px 8px hsla(230, 20%, 20%, 0.08);
+	--dry-shadow-sunken: inset 0 1px 4px rgba(0, 0, 0, 0.08);
+
+	/* ─── Tinted shadows ──────────────────────────────────────────── */
+
+	/* ─── Overlay backdrops ───────────────────────────────────────── */
+	--dry-color-overlay-backdrop: hsla(0, 0%, 0%, 0.4);
+	--dry-color-overlay-backdrop-strong: hsla(0, 0%, 0%, 0.6);
+
+	/* ─── Spacing — 4px base unit ─────────────────────────────────── */
+	--dry-space-0_5: 0.125rem;
+	--dry-space-1: 0.25rem;
+	--dry-space-1_5: 0.375rem;
+	--dry-space-2: 0.5rem;
+	--dry-space-2_5: 0.625rem;
+	--dry-space-3: 0.75rem;
+	--dry-space-3_5: 0.875rem;
+	--dry-space-4: 1rem;
+	--dry-space-5: 1.25rem;
+	--dry-space-6: 1.5rem;
+	--dry-space-7: 1.75rem;
+	--dry-space-8: 2rem;
+	--dry-space-9: 2.25rem;
+	--dry-space-10: 2.5rem;
+	--dry-space-11: 2.75rem;
+	--dry-space-12: 3rem;
+	--dry-space-14: 3.5rem;
+	--dry-space-16: 4rem;
+
+	/* ─── Radius ──────────────────────────────────────────────────── */
+	--dry-radius-xs: 2px;
+	--dry-radius-sm: 4px;
+	--dry-radius-md: 8px;
+	--dry-radius-lg: 8px;
+	--dry-radius-xl: 12px;
+	--dry-radius-2xl: 16px;
+	--dry-radius-full: 9999px;
+
+	/* ─── Concentric radius ─────────────────────────────────────────
+	   Per-container outer radii + the padding each container wraps
+	   its children in. The derived `--dry-radius-nested-*` tokens
+	   below are what children inside the padded region should use
+	   so inner corners sit concentric with the outer edge. */
+	--dry-radius-card: var(--dry-radius-2xl);
+	--dry-radius-dialog: var(--dry-radius-2xl);
+	--dry-radius-popover: var(--dry-radius-xl);
+	--dry-radius-sheet: var(--dry-radius-2xl);
+	--dry-radius-toast: var(--dry-radius-lg);
+	--dry-radius-tooltip: calc(var(--dry-radius-md) - var(--dry-radius-xs));
+
+	--dry-padding-card: var(--dry-space-8);
+	--dry-padding-dialog: var(--dry-space-6);
+	--dry-padding-popover: var(--dry-space-2);
+	--dry-padding-sheet: var(--dry-space-6);
+	--dry-padding-toast: var(--dry-space-3);
+	--dry-padding-tooltip: var(--dry-space-2);
+	--dry-padding-field: var(--dry-space-4);
+
+	--dry-radius-nested-dialog: max(
+		var(--dry-radius-sm),
+		calc(var(--dry-radius-dialog) - var(--dry-padding-dialog))
+	);
+	--dry-radius-nested-popover: max(
+		var(--dry-radius-xs),
+		calc(var(--dry-radius-popover) - var(--dry-padding-popover))
+	);
+	--dry-radius-nested-toast: max(
+		var(--dry-radius-xs),
+		calc(var(--dry-radius-toast) - var(--dry-padding-toast))
+	);
+	--dry-radius-nested-tooltip: max(
+		var(--dry-radius-xs),
+		calc(var(--dry-radius-tooltip) - var(--dry-padding-tooltip))
+	);
+	--dry-radius-nested-field: max(
+		var(--dry-radius-sm),
+		calc(var(--dry-radius-md) - var(--dry-padding-field))
+	);
+
+	/* ─── Typography ──────────────────────────────────────────────── */
+	--dry-font-sans:
+		ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+		'Helvetica Neue', Arial, sans-serif;
+	--dry-font-mono:
+		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+		monospace;
+	--dry-font-display: var(--dry-font-sans);
+
+	/* ─── Font weights ────────────────────────────────────────────── */
+	--dry-font-weight-medium: 500;
+
+	/* Practical UI-style named scale tokens */
+	--dry-type-display-size: 3.5rem;
+	--dry-type-display-leading: 4rem;
+	--dry-type-heading-1-size: 2.5rem;
+	--dry-type-heading-1-leading: 3rem;
+	--dry-type-heading-2-size: 2rem;
+	--dry-type-heading-2-leading: 2.5rem;
+	--dry-type-heading-3-size: 1.5rem;
+	--dry-type-heading-3-leading: 2rem;
+	--dry-type-heading-4-size: 1.25rem;
+	--dry-type-heading-4-leading: 1.75rem;
+	--dry-type-small-size: 1rem;
+	--dry-type-small-leading: 1.5rem;
+	--dry-type-tiny-size: 0.875rem;
+	--dry-type-tiny-leading: 1.25rem;
+	--dry-type-xs-size: 0.625rem;
+
+	/* Semantic UI typography aliases derived from the Practical UI scale */
+	--dry-type-ui-caption-size: calc(var(--dry-type-tiny-size) * 0.8571428571);
+	--dry-type-ui-caption-leading: calc(var(--dry-type-tiny-leading) * 0.8);
+	--dry-type-ui-control-size: var(--dry-type-tiny-size);
+	--dry-type-ui-control-leading: var(--dry-type-tiny-leading);
+	--dry-type-ui-body-size: var(--dry-type-small-size);
+	--dry-type-ui-body-strong-size: calc(
+		(var(--dry-type-small-size) + var(--dry-type-heading-4-size)) / 2
+	);
+	--dry-type-ui-body-strong-leading: var(--dry-type-small-leading);
+	--dry-type-ui-title-size: var(--dry-type-heading-4-size);
+	--dry-type-ui-title-leading: var(--dry-type-heading-4-leading);
+	--dry-type-ui-title-strong-size: calc(
+		(var(--dry-type-heading-4-size) + var(--dry-type-heading-3-size)) / 2
+	);
+	--dry-type-ui-title-strong-leading: var(--dry-type-heading-4-leading);
+	--dry-type-ui-section-size: var(--dry-type-heading-3-size);
+	--dry-type-ui-section-leading: var(--dry-type-heading-3-leading);
+	--dry-type-ui-section-strong-size: calc(
+		(var(--dry-type-heading-3-size) + var(--dry-type-heading-2-size)) / 2
+	);
+	--dry-type-ui-section-strong-leading: calc(
+		(var(--dry-type-heading-3-leading) + var(--dry-type-heading-2-leading)) / 2
+	);
+	--dry-type-ui-display-size: calc(
+		(var(--dry-type-heading-2-size) + var(--dry-type-heading-1-size)) / 2
+	);
+	--dry-type-ui-display-leading: calc(
+		(var(--dry-type-heading-2-leading) + var(--dry-type-heading-1-leading)) / 2
+	);
+
+	/* Legacy text ladder kept as a compatibility bridge onto the named scale */
+	--dry-text-xs-size: var(--dry-type-ui-caption-size);
+	--dry-text-xs-leading: var(--dry-type-ui-caption-leading);
+	--dry-text-sm-size: var(--dry-type-ui-control-size);
+	--dry-text-sm-leading: var(--dry-type-ui-control-leading);
+	--dry-text-base-size: var(--dry-type-ui-body-strong-size);
+	--dry-text-base-leading: var(--dry-type-ui-body-strong-leading);
+	--dry-text-lg-size: var(--dry-type-ui-title-size);
+	--dry-text-lg-leading: var(--dry-type-ui-title-leading);
+	--dry-text-xl-size: var(--dry-type-ui-title-strong-size);
+	--dry-text-xl-leading: var(--dry-type-ui-title-strong-leading);
+	--dry-text-2xl-size: var(--dry-type-ui-section-size);
+	--dry-text-3xl-size: var(--dry-type-ui-section-strong-size);
+	--dry-text-4xl-size: var(--dry-type-ui-display-size);
+
+	/* ─── State ───────────────────────────────────────────────────────
+	   Shared shorthands for focus / disabled state. Consumers can
+	   override these at :root to restyle every focusable or disabled
+	   control in one place.
+	   - Focus ring: `outline: var(--dry-focus-ring); outline-offset: 2px;`
+	   - Disabled state: `opacity: var(--dry-state-disabled-opacity); cursor: not-allowed;`
+	*/
+	--dry-focus-ring: 2px solid var(--dry-color-focus-ring);
+	--dry-state-disabled-opacity: 0.5;
+
+	/* ─── Form control shared tokens ──────────────────────────────────
+	   Consumed by input, textarea, combobox-input, and color-picker-input.
+	   Per-component `--dry-<name>-*` overrides still work; they now
+	   resolve through this shared family by default, so consumers can
+	   restyle all form controls with one change at :root.
+	   Intentionally excluded (pre-existing divergence):
+	   - border-focus: some controls use --dry-color-stroke-focus,
+	     others use --dry-color-focus-ring; left per-component.
+	   - bg-disabled: input uses --dry-color-bg-sunken, others rely on
+	     opacity; left per-component.
+	*/
+	--dry-form-control-bg: var(--dry-color-bg-raised);
+	--dry-form-control-border: var(--dry-color-stroke-strong);
+	--dry-form-control-border-hover: var(--dry-color-stroke-strong);
+	--dry-form-control-color: var(--dry-color-text-strong);
+	--dry-form-control-color-placeholder: var(--dry-color-text-weak);
+	--dry-form-control-radius: var(--dry-radius-md);
+	--dry-form-control-font-size: var(--dry-type-small-size);
+	--dry-form-control-padding-block: var(--dry-space-2);
+	--dry-form-control-padding-inline: var(--dry-space-3);
+
+	/* ─── Motion ──────────────────────────────────────────────────── */
+	--dry-duration-instant: 0ms;
+	--dry-duration-fast: 120ms;
+	--dry-duration-normal: 220ms;
+	--dry-duration-slow: 360ms;
+	--dry-duration-xslow: 560ms;
+	--dry-duration-entrance: 480ms;
+
+	--dry-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+	--dry-ease-in: cubic-bezier(0.4, 0, 1, 1);
+	--dry-ease-out: cubic-bezier(0, 0, 0.2, 1);
+	--dry-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+	--dry-ease-spring-soft: cubic-bezier(0.22, 1, 0.36, 1);
+	--dry-ease-spring-snappy: cubic-bezier(0.16, 1, 0.3, 1);
+	--dry-ease-spring: var(--dry-ease-spring-soft);
+
+	--dry-motion-distance-xs: 0.25rem;
+	--dry-motion-distance-sm: 0.75rem;
+	--dry-motion-distance-md: 1.5rem;
+	--dry-motion-distance-lg: 2.5rem;
+
+	--dry-motion-opacity-enter: 0;
+	--dry-motion-blur-enter: 16px;
+	--dry-motion-scale-enter: 0.96;
+
+	/* ─── Stagger ─────────────────────────────────────────────────── */
+	--dry-stagger-step: 60ms;
+	--dry-stagger-max: 8; /* cap delay so very long lists don't take forever */
+
+	/* ─── Entrance motion ──────────────────────────────────────────
+	   Dramatic one-shot reveal (hero sections, page loads). Distinct
+	   from `--dry-duration-entrance` which drives ambient component
+	   mounts. `dry-enter` keyframe + `.dry-enter` class below consume
+	   these tokens. */
+	--dry-enter-translate: 8px;
+	--dry-enter-blur: 5px;
+	--dry-enter-duration: 800ms;
+	--dry-enter-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+	--dry-enter-stagger-section: 100ms;
+	--dry-enter-stagger-word: 80ms;
+	--dry-enter-stagger-letter: 40ms;
+	--dry-enter-stagger-max: 16;
+
+	/* ─── Icon swap ────────────────────────────────────────────────
+	   Motion for `<IconSwap>` when one icon replaces another
+	   (copy ↔ check, play ↔ pause). Uses the same retarget-friendly
+	   transition as `[data-dry-icon-reveal]`. */
+	--dry-icon-swap-duration: var(--dry-duration-fast);
+	--dry-icon-swap-ease: var(--dry-ease-spring-snappy);
+	--dry-icon-swap-scale-out: 0.85;
+	--dry-icon-swap-blur-out: 2px;
+
+	/* ─── Optical offset ───────────────────────────────────────────
+	   Small horizontal nudge used by `:has()` selectors on Button,
+	   Chip, etc. to shift padding on the icon side so the label
+	   reads visually centered. */
+	--dry-optical-icon-offset: 0.125rem;
+
+	/* ─── Numeric variant ──────────────────────────────────────────
+	   Indirection layer so `.dry-tabular-nums` and the `Numeric`
+	   primitive can be swapped to `slashed-zero tabular-nums` or
+	   similar without a code sweep. */
+	--dry-numeric-variant: tabular-nums;
+
+	/* ─── Glass surface ───────────────────────────────────────────── */
+	--dry-glass-blur: 12px;
+	--dry-color-glass-tint: var(--dry-color-bg-raised);
+	--dry-glass-tint: var(--dry-color-glass-tint);
+	--dry-glass-saturation: 180%;
+
+	/* ─── Glow ────────────────────────────────────────────────────── */
+	--dry-glow-color: var(--dry-color-fill-brand);
+
+	/* ─── Gradient palette ────────────────────────────────────────── */
+
+	/* ─── Grain / noise texture ───────────────────────────────────── */
+	--dry-grain-opacity: 0.04;
+
+	/* ─── Typography extras ───────────────────────────────────────── */
+	--dry-tracking-normal: 0;
+
+	/* ─── Utility shadows — three-layer shadow-as-border recipe ──────
+	   Edge + close contact + ambient, so a raised surface reads as
+	   raised without needing a solid border. Consumers: Card, Button,
+	   and any raised chrome that used to pair border + subtle shadow.
+	   Hover variants ramp the first two layers slightly. */
+	--dry-shadow-sm:
+		0px 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 1px 2px -1px rgba(0, 0, 0, 0.06),
+		0px 2px 4px 0px rgba(0, 0, 0, 0.04);
+	--dry-shadow-md:
+		0px 0px 0px 1px rgba(0, 0, 0, 0.07), 0px 2px 4px -1px rgba(0, 0, 0, 0.08),
+		0px 4px 8px -2px rgba(0, 0, 0, 0.04);
+	--dry-shadow-lg:
+		0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 4px 8px -2px rgba(0, 0, 0, 0.08),
+		0px 8px 20px -4px rgba(0, 0, 0, 0.06);
+	--dry-shadow-xl:
+		0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 8px 16px -4px rgba(0, 0, 0, 0.1),
+		0px 20px 40px -8px rgba(0, 0, 0, 0.08);
+
+	/* ─── Layers ──────────────────────────────────────────────────── */
+	--dry-layer-overlay: 50;
+	--dry-layer-tour-overlay: 60;
+	--dry-layer-tour-spotlight: 61;
+	--dry-layer-tour-tooltip: 62;
+
+	/* ─── Scrollbar ───────────────────────────────────────────────── */
+	--dry-scrollbar-thumb: var(--dry-color-stroke-weak);
+	--dry-scrollbar-thumb-hover: var(--dry-color-stroke-strong);
+	--dry-scrollbar-track: transparent;
+	--dry-scrollbar-width: 8px;
+}
+
+:where([data-dry-type-mode='desktop']) {
+	--dry-type-display-size: 3.5rem;
+	--dry-type-display-leading: 4rem;
+	--dry-type-heading-1-size: 2.5rem;
+	--dry-type-heading-1-leading: 3rem;
+	--dry-type-heading-2-size: 2rem;
+	--dry-type-heading-2-leading: 2.5rem;
+	--dry-type-heading-3-size: 1.5rem;
+	--dry-type-heading-3-leading: 2rem;
+	--dry-type-heading-4-size: 1.25rem;
+	--dry-type-heading-4-leading: 1.75rem;
+	--dry-type-small-size: 1rem;
+	--dry-type-small-leading: 1.5rem;
+	--dry-type-tiny-size: 0.875rem;
+	--dry-type-tiny-leading: 1.25rem;
+}
+
+:where([data-dry-type-mode='mobile']) {
+	--dry-type-display-size: 2.5rem;
+	--dry-type-display-leading: 3rem;
+	--dry-type-heading-1-size: 2.25rem;
+	--dry-type-heading-1-leading: 2.75rem;
+	--dry-type-heading-2-size: 1.75rem;
+	--dry-type-heading-2-leading: 2.25rem;
+	--dry-type-heading-3-size: 1.5rem;
+	--dry-type-heading-3-leading: 2rem;
+	--dry-type-heading-4-size: 1.25rem;
+	--dry-type-heading-4-leading: 1.75rem;
+	--dry-type-small-size: 1rem;
+	--dry-type-small-leading: 1.5rem;
+	--dry-type-tiny-size: 0.875rem;
+	--dry-type-tiny-leading: 1.25rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	:root {
+		--dry-duration-instant: 0ms;
+		--dry-duration-fast: 0ms;
+		--dry-duration-normal: 0ms;
+		--dry-duration-slow: 0ms;
+		--dry-duration-xslow: 0ms;
+		--dry-duration-entrance: 0ms;
+		--dry-motion-distance-xs: 0px;
+		--dry-motion-distance-sm: 0px;
+		--dry-motion-distance-md: 0px;
+		--dry-motion-distance-lg: 0px;
+		--dry-motion-opacity-enter: 1;
+		--dry-motion-blur-enter: 0px;
+		--dry-motion-scale-enter: 1;
+		--dry-enter-translate: 0px;
+		--dry-enter-blur: 0px;
+		--dry-enter-duration: 1ms;
+		--dry-enter-stagger-section: 0ms;
+		--dry-enter-stagger-word: 0ms;
+		--dry-enter-stagger-letter: 0ms;
+		--dry-icon-swap-duration: 0ms;
+		--dry-icon-swap-scale-out: 1;
+		--dry-icon-swap-blur-out: 0px;
+	}
+}
+
+/* Stagger — per-child transition-delay driven by `--dry-index`. The first
+   12 children get `--dry-index` automatically via `:nth-child()`; for longer
+   lists set `--dry-index` on each child. The child must declare a
+   `transition` on its enter properties for the delay to have effect. */
+[data-dry-stagger] > * {
+	--dry-stagger-delay: calc(
+		min(var(--dry-index, 0), var(--dry-stagger-max)) * var(--dry-stagger-step)
+	);
+	transition-delay: var(--dry-stagger-delay);
+	animation-delay: var(--dry-stagger-delay);
+}
+
+[data-dry-stagger] > *:nth-child(1) {
+	--dry-index: 0;
+}
+[data-dry-stagger] > *:nth-child(2) {
+	--dry-index: 1;
+}
+[data-dry-stagger] > *:nth-child(3) {
+	--dry-index: 2;
+}
+[data-dry-stagger] > *:nth-child(4) {
+	--dry-index: 3;
+}
+[data-dry-stagger] > *:nth-child(5) {
+	--dry-index: 4;
+}
+[data-dry-stagger] > *:nth-child(6) {
+	--dry-index: 5;
+}
+[data-dry-stagger] > *:nth-child(7) {
+	--dry-index: 6;
+}
+[data-dry-stagger] > *:nth-child(8) {
+	--dry-index: 7;
+}
+[data-dry-stagger] > *:nth-child(9) {
+	--dry-index: 8;
+}
+[data-dry-stagger] > *:nth-child(10) {
+	--dry-index: 9;
+}
+[data-dry-stagger] > *:nth-child(11) {
+	--dry-index: 10;
+}
+[data-dry-stagger] > *:nth-child(12) {
+	--dry-index: 11;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	[data-dry-stagger] > * {
+		transition: none;
+		animation: none;
+	}
+}
+
+.dry-tabular-nums {
+	font-variant-numeric: var(--dry-numeric-variant);
+}
+
+/* ─── Entrance animation ───────────────────────────────────────────
+   One-shot reveal for mounted content. Keyframes here are acceptable
+   (non-interactive, fires once on mount). Apply via:
+   - `<Enter index={n}>` / `<Stagger>` components.
+   - `in:enter={{ index }}` Svelte transition.
+   - `.dry-enter` + `style="--dry-enter-index: {n}"` for hand-rolled markup. */
+@keyframes dry-enter {
+	from {
+		transform: translateY(var(--dry-enter-translate));
+		filter: blur(var(--dry-enter-blur));
+		opacity: 0;
+	}
+}
+.dry-enter {
+	animation: dry-enter var(--dry-enter-duration) var(--dry-enter-ease) both;
+	animation-delay: calc(
+		var(--dry-enter-stagger-section) * min(var(--dry-enter-index, 0), var(--dry-enter-stagger-max))
+	);
+}
+@media (prefers-reduced-motion: reduce) {
+	.dry-enter {
+		animation-duration: 1ms;
+		animation-delay: 0ms;
+	}
+}
+
+[data-dry-icon-reveal] {
+	transition:
+		opacity var(--dry-duration-fast) var(--dry-ease-spring-snappy),
+		transform var(--dry-duration-fast) var(--dry-ease-spring-snappy),
+		filter var(--dry-duration-fast) var(--dry-ease-spring-snappy);
+	transform-origin: center;
+}
+[data-dry-icon-reveal][data-state='hidden'],
+[data-dry-icon-reveal][data-hidden],
+[data-dry-icon-reveal][hidden] {
+	opacity: 0;
+	transform: scale(0.25);
+	filter: blur(4px);
+}
+@media (prefers-reduced-motion: reduce) {
+	[data-dry-icon-reveal] {
+		transition: none;
+		filter: none;
+		transform: none;
+	}
+}