@signal9/era-ui 1.1.2

package/dist/styles/density.css

@@ -0,0 +1,274 @@
+/*
+ * Era UI — Density Tokens
+ *
+ * Four modes: dense, balanced, spacious, touch. sp = 8 / 10 / 12 / 16.
+ *
+ * TIER LADDER
+ * ===========
+ *
+ *   xs  = sp + 6      (icon tier — the glyph itself; thumbs, dismiss, icon button)
+ *   xxs = sp + 10     (pill that nests inside md — badge, chip in a button/trigger)
+ *   sm  = 2·sp + 6    (standalone pill — switch track, KV row, free badge/chip)
+ *   md  = 3·sp        (buttons, inputs, selects, triggers)
+ *   lg  = 4·sp        (bars, containers)
+ *
+ * xs carries a +6 floor so icons stay legible (≥14px) at every sp. xxs sits
+ * 4px above xs so 14px text has just enough pill around it while fitting
+ * inside an md container with a visible concentric gap (≥3px at dense). sm
+ * keeps the generous 2·sp + 6 that gives switch thumbs their sp/2 slot and
+ * KV rows their padded feel. md and lg are pure sp multiples so button and
+ * bar heights don't inflate.
+ *
+ * Concentric nesting gaps:
+ *   sm  ⊃ xs  = sp/2         (4/5/6 at dense/balanced/spacious)
+ *   lg  ⊃ md  = sp/2         (4/5/6)
+ *   md  ⊃ sm  = (sp−6)/2     (1/2/3 — tight but present)
+ *   md  ⊃ xxs = (2sp−10)/2   (3/5/7 — the "pill inside a button" gap)
+ *   xxs ⊃ xs  = 2            (flat; xxs is sized around text, not as a
+ *                              container for xs content)
+ *
+ * Invariant xs < xxs < sm < md < lg holds for sp ≥ 7. Canonical range is
+ * sp ∈ [8, 16] so this is mode-bounded.
+ *
+ * xs IS the icon tier — no separate "icon" token. "Container for an icon"
+ * and "the icon itself" are the same thing; any padding lives on the parent
+ * (xxs / sm / md / lg).
+ *
+ * Dense values: 14, 18, 22, 24, 32.
+ * Touch values: 22, 26, 38, 48, 64 (md ≥ 44px tap-target floor).
+ *
+ * INSETS
+ * ======
+ *
+ *   --era-px-{sm,md,lg}       sp/2                   — tier-to-tier nesting padding
+ *   --era-gap                 sp/2                   — inter-element gap
+ *   --era-inset-{xxs,sm,md}   (T − text)/2           — text-symmetric content padding
+ *   --era-xs-inset-sm         (sm − xs)/2 = sp/2     — centering an xs element inside sm
+ *
+ * OPTICAL PADDING (unbounded content containers)
+ * ==============================================
+ *
+ * Geometric insets above are dictated by tier heights: centering a child of
+ * height C inside a container of height T is (T − C)/2, linear in sp. But
+ * cards, dialogs, and content panels have no bounding tier — their padding
+ * is optical, and linear-in-sp padding falls behind as modes loosen: controls
+ * grow linearly while text stays 14px, so whitespace must grow SUPER-linearly
+ * to hold the same perceived balance. (The tokens that already feel right
+ * across modes — inset-md 5→17, content-p 16→48 — are exactly the convex
+ * ones; the cramped ones — card's old sp/2 = 4→8 — are the linear ones.)
+ *
+ * The optical unit is the mean of the linear and quadratic scales:
+ *
+ *   d  = sp / sp₀            (density factor; sp₀ = 8px dense baseline)
+ *   so = sp · (1 + d) / 2    = 8 / 11.25 / 15 / 24
+ *
+ * At dense (d = 1) so = sp, so nothing changes where the ladder is anchored;
+ * by touch (d = 2) it runs 1.5× ahead of linear. 2·so = 16/22.5/30/48
+ * reproduces the empirically-tuned old content-p curve (16/24/32/48), so this
+ * names the law the system had already converged on rather than inventing one.
+ *
+ *   --era-pad-sm   so/2    4 / 5.6 / 7.5 / 12   — compact shells, menu panels
+ *   --era-pad-md   so      8 / 11.25 / 15 / 24  — cards, card sections, dialogs, popovers
+ *   --era-pad-lg   2·so    16 / 22.5 / 30 / 48  — full content panels (docs sections)
+ *
+ * Whitespace share rises with mode: pad-md / h-md = 0.33 dense → 0.50 touch.
+ * --era-content-p is kept as an alias of --era-pad-lg.
+ *
+ * IDENTITY USED AT NESTING SITES
+ * ==============================
+ *
+ * A flush xxs pill at an md-container edge needs −(inset-xxs) margin so
+ * the horizontal gap equals the vertical concentric gap. Proof:
+ *   inset-md − xxs-inset-md
+ *     = (md − text)/2 − (md − xxs)/2
+ *     = (xxs − text)/2
+ *     = inset-xxs.
+ *
+ * RADII (concentric progression, sp-derived)
+ * ==========================================
+ *
+ *   rd-T = scale · (R + (h-T − h-xs) / 2)     where R = sp / φ²
+ *
+ * Both R and the per-tier concentric term are multiplied by scale. The corners
+ * toggle flips scale 1 ↔ 0 so every rd collapses together. Because scale is
+ * declared via @property as <number>, a transition on :root animates it when
+ * the toggle fires — sp changes don't trigger the transition, so scrubbing
+ * stays snappy while the corners flip is smooth.
+ *
+ * SUBTREE OVERRIDES
+ * =================
+ *
+ * The ladder and radii are declared on the universal selector (*) rather
+ * than :root, so every element re-evaluates the calc() chain against its
+ * own inherited --era-sp / --era-roundness-scale. Setting data-mode="spacious"
+ * on an arbitrary subtree bumps only --era-sp on that element; the derived
+ * heights, insets, and radii recompute per-element via inheritance. Same
+ * mechanism handles data-corners on any subtree.
+ *
+ * Without the * selector this wouldn't work: custom-property var() refs
+ * resolve at computed-value time. If --era-h-lg = calc(4 * var(--era-sp)) were
+ * declared only on :root, descendants would inherit root's already-resolved
+ * 2rem and no subtree override of --era-sp could retroactively change it.
+ */
+
+/* Typed custom property so the corners toggle animates smoothly. */
+@property --era-roundness-scale {
+	syntax: '<number>';
+	inherits: true;
+	initial-value: 1;
+}
+
+/* -------------------------------------------------- */
+/* Derivation — one formula per token, re-evaluated   */
+/* per element so data-mode / data-corners overrides  */
+/* on any subtree flow through to the full ladder.    */
+/* -------------------------------------------------- */
+* {
+	/* Tier heights */
+	--era-h-xs: calc(var(--era-sp) + 0.375rem); /* 14/16/18 = sp + 6 (icon tier) */
+	--era-h-xxs: calc(var(--era-sp) + 0.625rem); /* 18/20/22 = sp + 10 (nested pill tier) */
+	--era-h-sm: calc(2 * var(--era-sp) + 0.375rem); /* 22/26/30 = 2·sp + 6 (standalone pill) */
+	--era-h-md: calc(3 * var(--era-sp)); /* 24/30/36 = 3·sp */
+	--era-h-lg: calc(4 * var(--era-sp)); /* 32/40/48 = 4·sp */
+
+	/* Tier horizontal padding */
+	--era-px-sm: calc(var(--era-sp) * 0.5); /* 4/5/6 */
+	--era-px-md: calc(var(--era-sp) * 0.5); /* 4/5/6 */
+	--era-px-lg: calc(var(--era-sp) * 0.5); /* 4/5/6 */
+
+	/* Inter-item gap */
+	--era-gap: calc(var(--era-sp) * 0.5); /* 4/5/6 */
+
+	/* Content insets — text-symmetric padding (vertical centering, reused as
+	   horizontal only where the content is a single square glyph). */
+	--era-inset-xxs: max(0px, calc((var(--era-h-xxs) - var(--era-text)) / 2)); /* 2/3/4 */
+	--era-inset-sm: max(0px, calc((var(--era-h-sm) - var(--era-text)) / 2)); /* 4/6/8 */
+	--era-inset-md: max(0px, calc((var(--era-h-md) - var(--era-text)) / 2)); /* 5/8/11 */
+
+	/* Pill side padding — horizontal breathing room for badge/chip text.
+	   Text wants MORE horizontal than vertical padding: line-height adds
+	   invisible vertical space, so equal padding reads as cramped sides
+	   (Refactoring UI / Material / Bootstrap all land near a 2:1 ratio). We
+	   DERIVE it rather than guess: center the monospace glyph ADVANCE
+	   (~0.6em) the way the insets center the 1em line box. Because the glyph
+	   is narrower than the line, this comes out ~2× the vertical inset on its
+	   own — and a lone glyph still measures exactly the tier width, so the
+	   "single glyph = square" floor (min-w = h) is preserved, not broken. */
+	--era-pill-xxs: max(0px, calc((var(--era-h-xxs) - 0.6 * var(--era-text)) / 2)); /* 4.8/5.8/6.8 */
+	--era-pill-sm: max(0px, calc((var(--era-h-sm) - 0.6 * var(--era-text)) / 2)); /* 6.8/8.8/10.8 */
+
+	/* Concentric insets — center a smaller tier element inside a larger one. */
+	/* --era-xs-inset-sm stays at sp/2 by construction (sm − xs = sp), which is
+	   what switch thumbs and KV icons rely on. --era-xxs-inset-md is the "pill
+	   inside a button" concentric gap used both vertically (trigger padding)
+	   and horizontally (inter-chip gap inside multi-select Value). */
+	--era-xs-inset-sm: calc((var(--era-h-sm) - var(--era-h-xs)) / 2); /* 4/5/6 = sp/2 */
+	--era-xxs-inset-md: calc((var(--era-h-md) - var(--era-h-xxs)) / 2); /* 3/5/7 = sp − 5 */
+
+	/* Roundness ladder — golden base + concentric progression, both gated by scale. */
+	/* rd-T = scale · (R + (h-T − h-xs) / 2). R = sp / φ². max(0px, …) clamps tier
+	   inversion at sp < 6 where h-md/h-lg drop below h-xs. data-corners="square"
+	   sets scale to 0 (animated via @property), zeroing every radius. */
+	--era-roundness: calc(var(--era-roundness-scale) * var(--era-sp) / 2.618);
+	--era-rd-xs: max(0px, var(--era-roundness));
+	--era-rd-xxs: max(
+		0px,
+		calc(
+			var(--era-roundness) + var(--era-roundness-scale) * (var(--era-h-xxs) - var(--era-h-xs)) / 2
+		)
+	);
+	--era-rd-sm: max(
+		0px,
+		calc(
+			var(--era-roundness) + var(--era-roundness-scale) * (var(--era-h-sm) - var(--era-h-xs)) / 2
+		)
+	);
+	--era-rd-md: max(
+		0px,
+		calc(
+			var(--era-roundness) + var(--era-roundness-scale) * (var(--era-h-md) - var(--era-h-xs)) / 2
+		)
+	);
+	--era-rd-lg: max(
+		0px,
+		calc(
+			var(--era-roundness) + var(--era-roundness-scale) * (var(--era-h-lg) - var(--era-h-xs)) / 2
+		)
+	);
+
+	/* Optical padding — so = sp·(1 + d)/2; see OPTICAL PADDING above. */
+	--era-so: calc(var(--era-sp) * (1 + var(--era-density)) / 2); /* 8/11.25/15/24 */
+	--era-pad-sm: calc(var(--era-so) / 2); /* 4/5.6/7.5/12 */
+	--era-pad-md: var(--era-so); /* 8/11.25/15/24 */
+	--era-pad-lg: calc(var(--era-so) * 2); /* 16/22.5/30/48 */
+
+	/* Content padding — alias of pad-lg (formerly 4·sp − 16 ≈ the same curve) */
+	--era-content-p: var(--era-pad-lg);
+}
+
+/* -------------------------------------------------- */
+/* Mode inputs — just --era-sp (and static --era-text).   */
+/* The derivation above re-runs per element wherever  */
+/* --era-sp is overridden. Animation timing is NOT here */
+/* — it's the motion axis (motion.css), orthogonal to */
+/* density, so --era-duration must never live in a      */
+/* [data-mode] block (see motion.css for why).        */
+/* -------------------------------------------------- */
+/* Roundness scale is the CORNERS axis, orthogonal to density — it must NOT
+ * live in the dense block. If it did, any data-mode="dense" subtree (the
+ * layout shell, a pinned-dense Pane handle) would re-assert scale=1 and
+ * defeat an inherited data-corners="square" from an ancestor. Declared on
+ * :root alone, BEFORE [data-corners='square'] below, so square wins on the
+ * root while dense subtrees just inherit whatever corners are in force. */
+:root {
+	--era-roundness-scale: 1;
+}
+:root,
+[data-mode='dense'] {
+	--era-sp: 0.5rem; /* 8px */
+	--era-density: 1; /* d = sp / 8px */
+	--era-text: 0.875rem; /* 14px — static across modes */
+}
+
+[data-mode='balanced'] {
+	--era-sp: 0.625rem; /* 10px */
+	--era-density: 1.25;
+}
+
+[data-mode='spacious'] {
+	--era-sp: 0.75rem; /* 12px */
+	--era-density: 1.5;
+}
+
+[data-mode='touch'] {
+	--era-sp: 1rem; /* 16px — md tier becomes 48px to clear the 44px tap-target floor */
+	--era-density: 2;
+}
+
+/* Touch mode goes full pill. Setting roundness to scale · h-xs / 2 makes the
+   existing concentric term (h-T − h-xs)/2 sum to h-T/2 for every tier, so
+   rd-xs … rd-lg all equal h-T/2. Needs the descendant selector because
+   --era-roundness is declared on * and would otherwise overwrite this on
+   children. Square toggle still collapses everything via scale = 0. */
+[data-mode='touch'],
+[data-mode='touch'] * {
+	--era-roundness: calc(var(--era-roundness-scale) * var(--era-h-xs) / 2);
+}
+
+/* -------------------------------------------------- */
+/* Corners — orthogonal toggle. Default is rounded;   */
+/* square flips scale to 0 so all --era-rd-* collapse   */
+/* without touching sizing.                           */
+/* -------------------------------------------------- */
+[data-corners='square'] {
+	--era-roundness-scale: 0;
+}
+
+/* Animate the roundness scale itself — not border-radius. sp changes snap
+   instantly (responsive scrub); the corners toggle animates scale 1 ↔ 0,
+   which cascades through the rd-* calc chain to every element at 60 fps.
+   Timed by the motion axis, so instant motion (or reduced-motion) snaps the
+   corners flip too. */
+:root {
+	transition: --era-roundness-scale var(--era-duration) var(--era-ease);
+}

package/dist/styles/index.css

@@ -0,0 +1,77 @@
+@import './themes.css';
+@import './density.css';
+/* Motion axis (data-motion) — owns --era-duration + --era-ease. Imported before
+ * surfaces so a [data-surface] block can override --era-ease as a delta. */
+@import './motion.css';
+/* Surfaces: base contract first, then each surface's deltas. Order matters —
+ * the base block and a surface's block target the same element, and the
+ * surface's declarations must win. */
+@import './surfaces/base.css';
+@import './surfaces/glass.css';
+@import './surfaces/bevel.css';
+@import './surfaces/cartoon.css';
+@import './typography.css';
+
+/* vidstack base layout + slider/button primitives for the VideoPlayer component.
+ * Scoped internally to `:where(media-player)` so these rules don't affect
+ * anything outside of a media-player subtree. Design-token theming is applied
+ * on the component itself via CSS variables. */
+@import 'vidstack/styles/base.css';
+@import 'vidstack/styles/ui/buttons.css';
+@import 'vidstack/styles/ui/sliders.css';
+@import 'vidstack/styles/ui/buffering.css';
+@import 'vidstack/styles/ui/captions.css';
+@import 'vidstack/styles/ui/live.css';
+@import 'vidstack/styles/ui/menus.css';
+@import 'vidstack/styles/ui/tooltips.css';
+
+/* Tell Tailwind to scan this package's components for utility classes */
+@source '../ui';
+
+/* Shared interactive-state recipe: quiet focus, disabled affordance.
+ * Equivalent to `focus:outline-none disabled:cursor-not-allowed disabled:opacity-50`. */
+@utility era-interactive {
+	&:focus {
+		outline: none;
+	}
+	&:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+}
+
+/* Register color tokens as Tailwind theme values for autocomplete and bare utility usage */
+@theme inline {
+	/* Density-derived body size: `text-body` replaces text-[length:var(--era-text)] */
+	--text-body: var(--era-text);
+	/* Surface divider colors: border-divider, bg-divider-faded, … */
+	--color-divider: var(--era-divider-color);
+	--color-divider-faded: var(--era-divider-faded);
+	--color-background: var(--color-1);
+	--color-foreground: var(--color-fg);
+	--color-1: var(--color-1);
+	--color-2: var(--color-2);
+	--color-3: var(--color-3);
+	--color-4: var(--color-4);
+	--color-5: var(--color-5);
+	--color-6: var(--color-6);
+	--color-7: var(--color-7);
+	--color-8: var(--color-8);
+	--color-9: var(--color-9);
+	--color-10: var(--color-10);
+	--color-11: var(--color-11);
+	--color-12: var(--color-12);
+	--color-border: var(--color-border);
+	--color-surface: var(--color-surface);
+	--color-hover: var(--color-hover);
+	--color-fg: var(--color-fg);
+	--color-bright: var(--color-bright);
+	--color-muted: var(--color-muted);
+	--color-primary: var(--color-primary);
+	--color-primary-fg: var(--color-primary-fg);
+	--color-primary-hover: var(--color-primary-hover);
+	--color-destructive: var(--color-destructive);
+	--color-destructive-fg: var(--color-destructive-fg);
+	--color-success: var(--color-success);
+	--color-success-fg: var(--color-success-fg);
+}

package/dist/styles/motion.css

@@ -0,0 +1,56 @@
+/*
+ * Era UI — Motion axis (data-motion)
+ *
+ * Animation timing is its OWN axis, orthogonal to density. Three levels:
+ *
+ *   instant   no motion (0s) — snap; also the reduced-motion fallback
+ *   normal    the default — quick, decisive transitions
+ *   extra     longer, with a gentle overshoot for characterful motion
+ *
+ * The axis owns two tokens every animating component reads:
+ *
+ *   --era-duration   transition/animation duration (was coupled to density)
+ *   --era-ease       the timing function
+ *
+ * ARCHITECTURE (mirrors the corners axis in density.css)
+ * ======================================================
+ * The default is declared on :root ALONE — never inside a [data-mode] block.
+ * If a density block set --era-duration (as it used to), any data-mode subtree
+ * (the layout shell, a pinned-dense Pane handle) would re-assert its own
+ * duration and defeat an inherited data-motion from an ancestor. Keeping it
+ * off the density blocks is what makes the two axes truly independent.
+ *
+ * Surfaces may override --era-ease (or a component-scoped ease token) as a
+ * delta — motion.css is imported BEFORE surfaces/, so a [data-surface] block
+ * wins. See surfaces/base.css for the surface-animation recipe.
+ */
+
+/* Named easing curves — design constants, referenced by the levels below. */
+:root {
+	--era-ease-standard: cubic-bezier(0.2, 0, 0, 1); /* decisive ease-out */
+	--era-ease-expressive: cubic-bezier(0.34, 1.35, 0.6, 1); /* gentle overshoot */
+}
+
+:root,
+[data-motion='normal'] {
+	--era-duration: 150ms;
+	--era-ease: var(--era-ease-standard);
+}
+
+[data-motion='instant'] {
+	--era-duration: 0s;
+	--era-ease: var(--era-ease-standard);
+}
+
+[data-motion='extra'] {
+	--era-duration: 260ms;
+	--era-ease: var(--era-ease-expressive);
+}
+
+/* Accessibility: honor the OS setting regardless of the chosen level. */
+@media (prefers-reduced-motion: reduce) {
+	:root,
+	[data-motion] {
+		--era-duration: 0s !important;
+	}
+}

package/dist/styles/surfaces/base.css

@@ -0,0 +1,103 @@
+/*
+ * Era UI — Surface Contract (base) + flat defaults
+ *
+ * A surface answers, through tokens alone: what do fills, edges, wells,
+ * pressed faces, transient highlights, and menu geometry look like here?
+ * Values are hand-authored per surface (design is sculpting); this file
+ * centralizes the contract every surface answers against.
+ *
+ * ARCHITECTURE
+ * ============
+ *
+ * The selector pairs :root (page default = flat) with [data-surface], so
+ * every element that DECLARES a surface re-baselines the full contract —
+ * a bevel subtree nested inside glass inherits nothing frosted, and a
+ * surface file only writes its deltas.
+ *
+ * Same-element var() defaults: --era-shadow-well, --era-shadow-pressed, and
+ * --era-highlight-shadow default to var(--era-shadow). Because a surface's own
+ * block and this base block apply to the SAME element, the var() resolves
+ * against that surface's shadow — no literal duplication, and a surface
+ * only overrides these when its wells/press/shine genuinely differ.
+ *
+ * Colors use light-dark(<light>, <dark>) instead of duplicated
+ * @media/.light blocks. Themes set color-scheme (including on scoped
+ * .light/.dark subtrees), which drives resolution per element.
+ *
+ * TOKEN GLOSSARY
+ * ==============
+ *
+ * --era-surface-bg / -elevated   surface fills (resting / raised tier)
+ * --era-shadow / --era-shadow-lg   resting edge chrome (controls / floating)
+ * --era-shadow-well              recessed container (inputs, tracks, checks)
+ * --era-shadow-pressed           a control's :active or latched face
+ * --era-press-shift              how far a pressed face nudges down-right
+ * --era-highlight                TRANSIENT feedback fill (hover, focus,
+ *                              keyboard, drag-over). LATCHED states
+ *                              (toggled on, open trigger, active page,
+ *                              pill fills) stay on opaque bg-hover — a
+ *                              held state reads solid, a passing state
+ *                              reads as light.
+ * --era-highlight-shadow         the material half of transient feedback;
+ *                              paired as hover:shadow-(--era-highlight-shadow)
+ * --era-panel-inset              menu-panel padding so row highlights stay
+ *                              inside the surface's frame
+ * --era-item-rd-scale            0/1: whether menu rows carry a concentric
+ *                              radius (see --era-item-rd below)
+ * --era-divider-color / -faded   separator lines
+ * --era-overlay-bg               modal scrim
+ * --era-blur / --era-saturate      backdrop-filter inputs (glass-blur utility)
+ */
+:root,
+[data-surface] {
+	--era-border-color: transparent;
+	--era-divider-color: var(--color-border);
+	--era-divider-faded: color-mix(in oklch, var(--era-divider-color) 40%, transparent);
+	--era-surface-bg: var(--color-2);
+	/* Same-element default: tracks --era-surface-bg unless a surface splits
+	 * the tiers (glass is the only one that does). */
+	--era-surface-bg-elevated: var(--era-surface-bg);
+	--era-shadow: none;
+	--era-shadow-lg: none;
+	--era-shadow-well: var(--era-shadow);
+	--era-shadow-pressed: var(--era-shadow);
+	--era-highlight: var(--color-hover);
+	--era-highlight-shadow: var(--era-shadow);
+	--era-press-shift: 0px;
+	--era-panel-inset: 0px;
+	--era-item-rd-scale: 0;
+	--era-overlay-bg: color-mix(in oklch, var(--color-1) 60%, transparent);
+	--era-blur: 0px;
+	--era-saturate: 100%;
+}
+
+/* Concentric radius for row highlights inside an inset panel: the panel
+ * radius minus the inset, gated by the surface's scale switch. Declared on
+ * the universal selector (like the density ladder) so it re-derives against
+ * each element's own --era-rd-md — density subtree overrides stay correct. */
+* {
+	--era-item-rd: calc(
+		var(--era-item-rd-scale) * max(0px, calc(var(--era-rd-md) - var(--era-panel-inset)))
+	);
+}
+
+/*
+ * SURFACE-TAILORED ANIMATION — recipe
+ * ===================================
+ * Timing belongs to the MOTION axis (motion.css): components read
+ * --era-duration and --era-ease, so speed and curve follow data-motion for
+ * free — a surface never sets duration.
+ *
+ * A surface can shape motion two ways:
+ *   • FEEL — override --era-ease inside the surface's [data-surface] block.
+ *     motion.css is imported before surfaces, so a surface delta wins;
+ *     e.g. a surface could soften or sharpen every transition's curve.
+ *   • STRATEGY — for a genuinely different technique (a glass crossfade vs.
+ *     a bevel thumb sliding along a track), scope a rule to the surface and
+ *     target the component's stable part, e.g. in the surface's own file:
+ *       [data-surface='<name>'] [data-slot='switch-thumb'] { … }
+ *     Keyframes and surface-only utilities live in that surface's file
+ *     (precedent: the `glass-blur` @utility in glass.css).
+ *
+ * Reduced-motion is handled centrally in motion.css — surfaces need not.
+ */

package/dist/styles/surfaces/bevel.css

@@ -0,0 +1,71 @@
+/*
+ * Bevel — chiseled, tactile material (the Win95 lineage)
+ *
+ * Every surface is a slab lit from the top-left: raised faces catch light
+ * on top/left and cast a hard 1px shade on bottom/right; wells invert the
+ * bevel to read as recessed; a pressed control flips its bevel and its
+ * face nudges 1px down-right — what makes clicks feel physical. Edge
+ * colors are a step of white or black mixed over the surface color, so
+ * the chisel keeps each theme's hue; light mode raises the contrast the
+ * way the original did on pale gray. Shadows are hard-edged (0 blur):
+ * crispness is this material's signature. Elevation is expressed by the
+ * chisel, not tone (Win95 menus were the same gray as buttons — and
+ * color-3 would collide with --color-hover, hiding row highlights).
+ */
+[data-surface='bevel'] {
+	--era-shadow:
+		inset 1px 1px 0 0
+			light-dark(
+				color-mix(in oklch, oklch(1 0 0) 70%, var(--color-2)),
+				color-mix(in oklch, oklch(1 0 0) 12%, var(--color-2))
+			),
+		inset -1px -1px 0 0
+			light-dark(
+				color-mix(in oklch, oklch(0 0 0) 28%, var(--color-2)),
+				color-mix(in oklch, oklch(0 0 0) 40%, var(--color-2))
+			);
+	/* Floating slab: double chisel + hard offset drop — period-correct
+	 * separation without soft blur. */
+	--era-shadow-lg:
+		inset 1px 1px 0 0
+			light-dark(
+				color-mix(in oklch, oklch(1 0 0) 80%, var(--color-2)),
+				color-mix(in oklch, oklch(1 0 0) 14%, var(--color-2))
+			),
+		inset -1px -1px 0 0
+			light-dark(
+				color-mix(in oklch, oklch(0 0 0) 34%, var(--color-2)),
+				color-mix(in oklch, oklch(0 0 0) 45%, var(--color-2))
+			),
+		inset 2px 2px 0 0
+			light-dark(
+				color-mix(in oklch, oklch(1 0 0) 40%, var(--color-2)),
+				color-mix(in oklch, oklch(1 0 0) 6%, var(--color-2))
+			),
+		inset -2px -2px 0 0
+			light-dark(
+				color-mix(in oklch, oklch(0 0 0) 16%, var(--color-2)),
+				color-mix(in oklch, oklch(0 0 0) 22%, var(--color-2))
+			),
+		4px 4px 0 0 light-dark(oklch(0 0 0 / 0.18), oklch(0 0 0 / 0.25));
+	/* Recessed well: the raised bevel inverted, highlight dimmed so the
+	 * bottom rim reads as catching less light than a raised top edge. */
+	--era-shadow-well:
+		inset 1px 1px 0 0
+			light-dark(
+				color-mix(in oklch, oklch(0 0 0) 28%, var(--color-2)),
+				color-mix(in oklch, oklch(0 0 0) 40%, var(--color-2))
+			),
+		inset -1px -1px 0 0
+			light-dark(
+				color-mix(in oklch, oklch(1 0 0) 55%, var(--color-2)),
+				color-mix(in oklch, oklch(1 0 0) 8%, var(--color-2))
+			);
+	--era-shadow-pressed: var(--era-shadow-well);
+	--era-press-shift: 1px;
+	/* Floating panels wear a 2-layer chisel frame; row highlights inset past
+	 * it with a concentric radius (square under data-corners="square", as
+	 * the era had it — Win95 drew its selection bar inside the border). */
+	--era-panel-inset: 2px;
+	--era-item-rd-scale: 1;
+}

package/dist/styles/surfaces/cartoon.css

@@ -0,0 +1,27 @@
+/*
+ * Cartoon — inked outline, sticker shadow
+ *
+ * Every surface is a drawn shape: a solid ink outline (ring shadow, so it
+ * follows border-radius) and a hard offset shadow like a sticker lifted
+ * off the page. Wells are outlined boxes with a penciled inner shade —
+ * drawn, not carved. A pressed control loses its offset shadow and shifts
+ * onto the spot where the shadow was: the sticker gets pushed flat.
+ *
+ * All ink is --color-bright, which flips white-on-dark / black-on-light
+ * with the theme — no light-dark() calls needed anywhere in this surface.
+ */
+[data-surface='cartoon'] {
+	--era-divider-color: color-mix(in oklch, var(--color-bright) 55%, transparent);
+
+	--era-shadow: 0 0 0 1.5px var(--color-bright), 2px 2px 0 0 var(--color-bright);
+	--era-shadow-lg: 0 0 0 2px var(--color-bright), 5px 5px 0 0 var(--color-bright);
+	--era-shadow-well:
+		0 0 0 1.5px var(--color-bright),
+		inset 2px 2px 0 0 color-mix(in oklch, var(--color-bright) 18%, var(--color-2));
+	/* Offset shadow vanishes; --era-press-shift moves the face exactly onto
+	 * where the shadow sat. */
+	--era-shadow-pressed: 0 0 0 1.5px var(--color-bright);
+	--era-press-shift: 2px;
+	--era-panel-inset: 2px;
+	--era-item-rd-scale: 1;
+}