themelia-react-ui 0.0.0-stage → 1.0.1

package/dist/theme.css

@@ -0,0 +1,872 @@
+/*
+ * shadcn theme — the swappable palette.
+ *
+ * This file owns only the shadcn-compatible contract: palette, radius,
+ * shadows, sidebar palette, charts, and dark/light surfaces. Product/library
+ * state, layout, density, and component knobs live in `src/css/tokens/*`.
+ */
+@theme inline {
+	--color-sidebar-ring: var(--sidebar-ring);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar: var(--sidebar);
+	--color-chart-5: var(--chart-5);
+	--color-chart-4: var(--chart-4);
+	--color-chart-3: var(--chart-3);
+	--color-chart-2: var(--chart-2);
+	--color-chart-1: var(--chart-1);
+	--color-ring: var(--ring);
+	--color-input: var(--input);
+	--color-border: var(--border);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-accent: var(--accent);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-muted: var(--muted);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-secondary: var(--secondary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-primary: var(--primary);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-popover: var(--popover);
+	--color-card-foreground: var(--card-foreground);
+	--color-card: var(--card);
+	--color-foreground: var(--foreground);
+	--color-background: var(--background);
+	--radius-sm: calc(var(--radius) * 0.6);
+	--radius-md: calc(var(--radius) * 0.8);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) * 1.4);
+	--radius-2xl: calc(var(--radius) * 1.8);
+	--radius-3xl: calc(var(--radius) * 2.2);
+	--radius-4xl: calc(var(--radius) * 2.6);
+	--shadow-2xs: var(--shadow-2xs);
+	--shadow-xs: var(--shadow-xs);
+	--shadow-sm: var(--shadow-sm);
+	--shadow: var(--shadow);
+	--shadow-md: var(--shadow-md);
+	--shadow-lg: var(--shadow-lg);
+	--shadow-xl: var(--shadow-xl);
+	--shadow-2xl: var(--shadow-2xl);
+}
+
+:root {
+	/* Radius is shared geometry, not a light-palette reset. Mode scopes inherit it. */
+	--radius: 1rem; /* Default corners throughout the package; opt-in nested corners derive from this root. */
+}
+
+:root,
+.light {
+	--background: oklch(1 0 0); /* Application canvas and default page background. */
+	--foreground: oklch(0.28 0 0); /* Primary text and icon color on the application canvas. */
+	--card: oklch(1 0 0); /* Card and framed content-surface background. */
+	--card-foreground: oklch(0.28 0 0); /* Primary text and icons on card surfaces. */
+	--popover: var(--background); /* Popover, menu, select, and transient-surface background. */
+	--popover-foreground: var(--foreground); /* Primary text and icons on popover surfaces. */
+	--primary: oklch(0.45 0.124 167.35); /* Brand and primary-action color. */
+	--primary-foreground: oklch(0.985 0 0); /* Text and icons on solid primary fills. */
+	--secondary: oklch(0.97 0 0); /* Neutral secondary-control and supporting-surface fill. */
+	--secondary-foreground: oklch(0.205 0 0); /* Text and icons on secondary fills. */
+	--muted: oklch(0.97 0 0); /* Subdued backgrounds for passive regions and skeletons. */
+	--muted-foreground: oklch(0.50 0 0); /* Secondary text, metadata, and passive icons. */
+	--accent: oklch(0.97 0 0); /* Hover, selected-row, and emphasized neutral fill. */
+	--accent-foreground: oklch(0.205 0 0); /* Text and icons on accent fills. */
+	--destructive: oklch(0.50 0.245 27.325); /* Destructive action, error, and invalid-state color. */
+	--destructive-foreground: oklch(0.99 0 0); /* Text and icons on solid destructive fills. */
+	--border: oklch(0.922 0 0); /* Default divider, outline, and surface-border color. */
+	--input: oklch(0.922 0 0); /* Default form-control border color. */
+	--ring: oklch(0.708 0 0); /* Focus-visible ring and outline color. */
+	/*
+	 * Categorical chart series. Hues are held identical in light and dark so a
+	 * series keeps its identity when the theme flips; only lightness moves, to
+	 * suit the surface it is drawn on. Hues sit clear of the status hues
+	 * (destructive 27, warning 90, success 145) so a series never reads as a
+	 * state. Chroma is kept inside sRGB, so the authored value is what renders
+	 * rather than something the browser clamps.
+	 */
+	--chart-1: oklch(0.56 0.11 167); /* First categorical chart-series color; never a status color. */
+	--chart-2: oklch(0.56 0.11 230); /* Second categorical chart-series color; never a status color. */
+	--chart-3: oklch(0.56 0.17 285); /* Third categorical chart-series color; never a status color. */
+	--chart-4: oklch(0.58 0.16 330); /* Fourth categorical chart-series color; never a status color. */
+	--chart-5: oklch(0.60 0.14 60); /* Fifth categorical chart-series color; never a status color. */
+	--sidebar: oklch(0.96 0 0); /* Sidebar shell background. */
+	--sidebar-foreground: oklch(0.28 0 0); /* Primary sidebar text and icon color. */
+	--sidebar-primary: oklch(0.205 0 0); /* Strong sidebar selection or primary action fill. */
+	--sidebar-primary-foreground: oklch(0.985 0 0); /* Text and icons on sidebar primary fills. */
+	--sidebar-accent: oklch(0.98 0 0 / 1); /* Sidebar hover and selected-row neutral fill. */
+	--sidebar-accent-foreground: oklch(0.205 0 0); /* Text and icons on sidebar accent fills. */
+	--sidebar-border: oklch(0.922 0 0); /* Sidebar dividers and shell border. */
+	--sidebar-ring: oklch(0.708 0 0); /* Focus-visible ring inside the sidebar. */
+	--shadow-2xs: 0 1px 3px 0px oklch(0 0 0 / 0.05); /* Minimal elevation for compact controls. */
+	--shadow-xs: 0 1px 3px 0px oklch(0 0 0 / 0.05); /* Extra-small elevation for controls and rows. */
+	--shadow-sm: 0 1px 2px 0px oklch(0 0 0 / 0.06), 0 3px 8px -3px oklch(0 0 0 / 0.08); /* Small elevation for raised controls and cards. */
+	--shadow: 0 1px 3px 0px oklch(0 0 0 / 0.08), 0 4px 10px -3px oklch(0 0 0 / 0.08); /* Default elevation for framed content. */
+	--shadow-md: 0 2px 4px -2px oklch(0 0 0 / 0.08), 0 6px 16px -4px oklch(0 0 0 / 0.10); /* Medium elevation for floating surfaces. */
+	--shadow-lg: 0 2px 6px -2px oklch(0 0 0 / 0.08), 0 10px 24px -6px oklch(0 0 0 / 0.12); /* Large elevation for menus, dialogs, and popovers. */
+	--shadow-xl: 0 4px 8px -4px oklch(0 0 0 / 0.10), 0 16px 32px -8px oklch(0 0 0 / 0.14); /* Extra-large elevation for prominent overlays. */
+	--shadow-2xl: 0 6px 12px -6px oklch(0 0 0 / 0.12), 0 24px 48px -12px oklch(0 0 0 / 0.20); /* Maximum elevation for exceptional floating surfaces. */
+}
+
+.dark {
+	--background: oklch(0.28 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.205 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: var(--background);
+	--popover-foreground: var(--foreground);
+	--primary: oklch(0.70 0.13 167.35); /* Lightened for readable brand text and controls on dark surfaces. */
+	--primary-foreground: oklch(0.18 0.03 167.35); /* Dark ink on the lightened dark-theme primary fill. */
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.74 0 0); /* Secondary copy stays readable on muted and accent surfaces. */
+	--accent: oklch(0.36 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--destructive-foreground: oklch(0.18 0.05 22);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.556 0 0);
+	--chart-1: oklch(0.74 0.13 167);
+	--chart-2: oklch(0.72 0.14 230);
+	--chart-3: oklch(0.72 0.15 285);
+	--chart-4: oklch(0.74 0.15 330);
+	--chart-5: oklch(0.78 0.14 60);
+	--sidebar: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.28 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.556 0 0);
+	--shadow-2xs: 0 1px 3px 0px oklch(0 0 0 / 0.05);
+	--shadow-xs: 0 1px 3px 0px oklch(0 0 0 / 0.05);
+	--shadow-sm: 0 1px 2px 0px oklch(0 0 0 / 0.18), 0 3px 8px -3px oklch(0 0 0 / 0.22);
+	--shadow: 0 1px 3px 0px oklch(0 0 0 / 0.20), 0 4px 10px -3px oklch(0 0 0 / 0.22);
+	--shadow-md: 0 2px 4px -2px oklch(0 0 0 / 0.22), 0 6px 16px -4px oklch(0 0 0 / 0.26);
+	--shadow-lg: 0 2px 6px -2px oklch(0 0 0 / 0.24), 0 10px 24px -6px oklch(0 0 0 / 0.30);
+	--shadow-xl: 0 4px 8px -4px oklch(0 0 0 / 0.26), 0 16px 32px -8px oklch(0 0 0 / 0.32);
+	--shadow-2xl: 0 6px 12px -6px oklch(0 0 0 / 0.28), 0 24px 48px -12px oklch(0 0 0 / 0.38);
+}
+
+/*
+ * Foundation tokens.
+ *
+ * Fonts, direct type tokens, spacing scale, and density scale. These
+ * are package-owned primitives, not part of the swappable shadcn theme.
+ */
+@theme inline {
+	/* Fonts */
+	--font-heading: var(--font-heading);
+	--font-sans: var(--font-sans);
+	--font-serif: var(--font-serif);
+	--font-mono: var(--font-mono);
+
+	/* Typography */
+	--text-xxs: var(--text-xxs);
+	--text-xxs--line-height: var(--text-xxs--line-height);
+	--text-xs: var(--text-xs);
+	--text-xs--line-height: var(--text-xs--line-height);
+	--text-pxs: var(--text-pxs);
+	--text-pxs--line-height: var(--text-pxs--line-height);
+	--text-sm: var(--text-sm);
+	--text-sm--line-height: var(--text-sm--line-height);
+	--text-base: var(--text-base);
+	--text-base--line-height: var(--text-base--line-height);
+	--text-lg: var(--text-lg);
+	--text-lg--line-height: var(--text-lg--line-height);
+	--text-xl: var(--text-xl);
+	--text-xl--line-height: var(--text-xl--line-height);
+	--text-2xl: var(--text-2xl);
+	--text-2xl--line-height: var(--text-2xl--line-height);
+	--text-3xl: var(--text-3xl);
+	--text-3xl--line-height: var(--text-3xl--line-height);
+	--text-4xl: var(--text-4xl);
+	--text-4xl--line-height: var(--text-4xl--line-height);
+	--text-5xl: var(--text-5xl);
+	--text-5xl--line-height: var(--text-5xl--line-height);
+	--text-6xl: var(--text-6xl);
+	--text-6xl--line-height: var(--text-6xl--line-height);
+	--text-7xl: var(--text-7xl);
+	--text-7xl--line-height: var(--text-7xl--line-height);
+	--text-8xl: var(--text-8xl);
+	--text-8xl--line-height: var(--text-8xl--line-height);
+	--text-9xl: var(--text-9xl);
+	--text-9xl--line-height: var(--text-9xl--line-height);
+
+	/* Shared title/supporting-copy rhythm, scaled once like other gaps. */
+	--spacing-normal: calc(var(--gap-normal) * var(--space-scale));
+	--spacing-dense: calc(var(--gap-dense) * var(--space-scale));
+
+	/* Spacing scale */
+	--spacing-space-2xs: calc(0.125rem * var(--space-scale));
+	--spacing-space-xs: calc(0.25rem * var(--space-scale));
+	--spacing-space-sm: calc(0.375rem * var(--space-scale));
+	--spacing-space-md: calc(0.5rem * var(--space-scale));
+	--spacing-space-lg: calc(0.75rem * var(--space-scale));
+	--spacing-space-xl: calc(1rem * var(--space-scale));
+	--spacing-space-2xl: calc(1.5rem * var(--space-scale));
+}
+
+:root {
+	/* Fonts */
+	--font-heading: var(--font-sans); /* Display and heading font stack; defaults to the UI sans stack. */
+	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; /* Primary interface and body font stack. */
+	--font-serif: Merriweather, ui-serif, serif; /* Editorial serif stack for consumer-authored rich content. */
+	--font-mono: JetBrains Mono, ui-monospace, monospace; /* Monospace stack for code, identifiers, and fixed-width values. */
+
+	/* Multipliers */
+	--space-scale: 1; /* Multiplies gaps and padding without changing control heights. */
+	--density-scale: 1; /* Multiplies controls, actions, rows, and other density-sensitive geometry. */
+
+	/* Shared copy gaps: normal surfaces and dense rows/collections. */
+	--gap-normal: 0.5rem; /* Vertical rhythm between titles and structural descriptions. */
+	--gap-dense: 0.25rem; /* Vertical rhythm between row titles and compact supporting copy. */
+
+	/* Typography scale.
+	 * Override individual --text-* tokens for precise theme sizing. Line-height
+	 * tokens intentionally match Tailwind's unitless default ratios.
+	 */
+	--text-xxs: 0.75rem; /* Micro-label role kept at the accessible 12px floor. */
+	--text-xxs--line-height: calc(1 / 0.75); /* Unitless line height paired with the micro-label role. */
+	--text-xs: 0.75rem; /* Compact metadata, hints, and secondary row descriptions. */
+	--text-xs--line-height: calc(1 / 0.75); /* Unitless line height paired with compact metadata. */
+	--text-pxs: 0.8125rem; /* Dense admin-control and table text at 13px by default. */
+	--text-pxs--line-height: calc(1.125 / 0.8125); /* Unitless line height paired with dense admin text. */
+	--text-sm: 0.875rem; /* Default application body and control text at 14px. */
+	--text-sm--line-height: calc(1.25 / 0.875); /* Unitless line height paired with default body text. */
+	--text-base: 1rem; /* Deliberate shell hierarchy and explicitly enlarged body copy at 16px. */
+	--text-base--line-height: calc(1.5 / 1); /* Unitless line height paired with deliberate 16px text. */
+	--text-lg: 1.125rem; /* Small section and card heading scale. */
+	--text-lg--line-height: calc(1.75 / 1.125); /* Unitless line height paired with small headings. */
+	--text-xl: 1.25rem; /* Prominent section heading scale. */
+	--text-xl--line-height: calc(1.75 / 1.25); /* Unitless line height paired with prominent headings. */
+	--text-2xl: 1.5rem; /* Page-heading scale for standard application shells. */
+	--text-2xl--line-height: calc(2 / 1.5); /* Unitless line height paired with page headings. */
+	--text-3xl: 1.875rem; /* Large page or marketing heading scale. */
+	--text-3xl--line-height: calc(2.25 / 1.875); /* Unitless line height paired with large headings. */
+	--text-4xl: 2.25rem; /* Display heading step one. */
+	--text-4xl--line-height: calc(2.5 / 2.25); /* Unitless line height paired with display step one. */
+	--text-5xl: 3rem; /* Display heading step two. */
+	--text-5xl--line-height: 1; /* Tight line height paired with display step two. */
+	--text-6xl: 3.75rem; /* Display heading step three. */
+	--text-6xl--line-height: 1; /* Tight line height paired with display step three. */
+	--text-7xl: 4.5rem; /* Display heading step four. */
+	--text-7xl--line-height: 1; /* Tight line height paired with display step four. */
+	--text-8xl: 6rem; /* Display heading step five. */
+	--text-8xl--line-height: 1; /* Tight line height paired with display step five. */
+	--text-9xl: 8rem; /* Maximum display heading scale. */
+	--text-9xl--line-height: 1; /* Tight line height paired with the maximum display scale. */
+
+}
+
+
+[data-density="compact"] {
+	--space-scale: 0.875;
+	--density-scale: 0.875;
+}
+
+[data-density="comfortable"] {
+	--space-scale: 1.075;
+	--density-scale: 1.075;
+}
+
+
+/*
+ * Package-owned state tokens.
+ *
+ * These extend the shadcn palette with semantic meanings used by the package.
+ * Product tokens may reference shadcn tokens; the shadcn theme does not
+ * reference these tokens back.
+ */
+@theme inline {
+	--color-success: var(--success);
+	--color-success-foreground: var(--success-foreground);
+	--color-info: var(--info);
+	--color-info-foreground: var(--info-foreground);
+	--color-link-color: var(--link-color);
+	--color-primary-accent: var(--primary-accent);
+	--color-warning: var(--warning);
+	--color-warning-foreground: var(--warning-foreground);
+	--color-warning-accent: var(--warning-accent);
+	--color-inverse-background: var(--inverse-background);
+	--color-inverse-foreground: var(--inverse-foreground);
+	--color-inverse-muted: var(--inverse-muted);
+	--color-inverse-subtle: var(--inverse-subtle);
+	--color-inverse-disabled: var(--inverse-disabled);
+	--color-inverse-surface: var(--inverse-surface);
+	--color-inverse-surface-strong: var(--inverse-surface-strong);
+	--color-inverse-border: var(--inverse-border);
+	--color-inverse-decoration: var(--inverse-decoration);
+}
+
+:root,
+.light {
+	--success: oklch(0.4 0.16 145); /* Semantic success fill, border, and foreground accent. */
+	--success-foreground: oklch(0.985 0 0); /* Text and icons on solid success fills. */
+	--info: oklch(0.45 0.214 276.966); /* Semantic informational fill, border, and foreground accent. */
+	--info-foreground: oklch(0.99 0 0); /* Text and icons on solid informational fills. */
+	--link-color: oklch(0.462 0.1776 259.13); /* Inline links and link-like copyable values. */
+	--primary-accent: oklch(0.45 0.124 167.35); /* Brand color drawn AS foreground — icons, spinners, active marks — on the app surface. Matches --primary in light and provides a dedicated foreground accent in dark. Primary fills and their paired foreground remain owned by the shadcn theme. Distinct from --accent, the muted hover surface. */
+	--warning: oklch(0.78 0.13 75); /* Semantic warning fill, border, and foreground accent. */
+	--warning-foreground: oklch(0.28 0.035 60); /* Text and icons on solid warning fills. */
+	--warning-accent: oklch(0.54 0.11 65); /* Warning colour drawn AS foreground — icons and marks — on a tinted warning surface. Darkens here and brightens in dark, where --warning stays a light fill so solid warning chips keep the amber. */
+	--inverse-background: oklch(0.28 0 0); /* Base background for explicit dark or artwork-backed surfaces. */
+	--inverse-foreground: oklch(0.985 0 0); /* Primary text and icons on inverse backgrounds. */
+	--inverse-muted: oklch(0.985 0 0 / 0.74); /* Secondary text on inverse backgrounds. */
+	--inverse-subtle: oklch(0.985 0 0 / 0.58); /* Tertiary text and icons on inverse backgrounds. */
+	--inverse-disabled: oklch(0.985 0 0 / 0.42); /* Disabled content on inverse backgrounds. */
+	--inverse-surface: oklch(0.985 0 0 / 0.12); /* Subtle nested fill on inverse backgrounds. */
+	--inverse-surface-strong: oklch(0.985 0 0 / 0.22); /* Emphasized nested fill on inverse backgrounds. */
+	--inverse-border: oklch(0.985 0 0 / 0.18); /* Dividers and outlines on inverse backgrounds. */
+	--inverse-decoration: oklch(0.985 0 0 / 0.06); /* Non-semantic decorative wash on inverse backgrounds. */
+}
+
+.dark {
+	--success: oklch(0.76 0.16 145);
+	--success-foreground: oklch(0.18 0.05 145);
+	--info: oklch(0.72 0.14 250);
+	--info-foreground: oklch(0.18 0.05 250);
+	--link-color: oklch(0.72 0.12 259.13);
+	--primary-accent: oklch(0.72 0.124 167.35);
+	--warning: oklch(0.81 0.12 75);
+	--warning-foreground: oklch(0.28 0.035 60);
+	--warning-accent: oklch(0.81 0.12 75);
+	--inverse-background: oklch(0.28 0 0);
+	--inverse-foreground: oklch(0.985 0 0);
+	--inverse-muted: oklch(0.985 0 0 / 0.74);
+	--inverse-subtle: oklch(0.985 0 0 / 0.58);
+	--inverse-disabled: oklch(0.985 0 0 / 0.42);
+	--inverse-surface: oklch(0.985 0 0 / 0.12);
+	--inverse-surface-strong: oklch(0.985 0 0 / 0.22);
+	--inverse-border: oklch(0.985 0 0 / 0.18);
+	--inverse-decoration: oklch(0.985 0 0 / 0.06);
+}
+
+/*
+ * Package primitives.
+ *
+ * Action/control heights, control spacing, and media sizes derive from the
+ * compact canonical override surface. Radius utilities read shadcn directly.
+ */
+@theme inline {
+	/*
+	 * RADIUS SCALE — xs 0.4×, sm 0.6×, md 0.8×, base 1×, lg 1.4×, xl 1.8×, all derived
+	 * from `--radius` so one consumer override moves the whole family.
+	 *
+	 * `rounded-full` is deliberately NOT a tier and must not be abstracted into
+	 * one. A pill is a *shape*, not a size: its radius is always half the box's
+	 * shorter side, so it has no fixed value to theme and gains nothing from a
+	 * token. Write `rounded-full` directly, and expect to see it on:
+	 *
+	 *   - status dots and presence indicators
+	 *   - avatars and initials circles
+	 *	 *   - scrollbar tracks and thumbs
+	 *   - icon-only buttons intended to read as circular
+	 *
+	 * The tell is that the element should stay a pill at ANY size or theme. If
+	 * a shape would look wrong when the box grows — a card, a dialog, an input,
+	 * a chat bubble — it belongs on the scale above, not on `rounded-full`.
+	 *
+	 * `rounded-none` is likewise a reset, not a tier: use it to square a corner
+	 * where a child meets its container's edge.
+	 */
+
+	/*
+	 * Small-control tier for checkboxes, radios, and swatches, whose boxes are
+	 * too small for the base radius to read as anything but a squircle. It
+	 * exists so those controls stay on the radius family instead of pinning a
+	 * literal `rounded-[4px]`, which no consumer theme could reach. Derived
+	 * rather than mapped — shadcn has no tier below `--radius-sm`.
+	 */
+	--radius-radius-xs: calc(var(--radius) * 0.4);
+	--radius-radius-sm: var(--radius-sm);
+	/*
+	 * The intermediate 0.8× step. Without a package
+	 * name for it, that tier lived only in Tailwind's own radius scale, so a
+	 * consumer retheming the package family silently missed every control using
+	 * it. Same computed value, now reachable from one vocabulary.
+	 */
+	--radius-radius-md: var(--radius-md);
+	/* Default corners throughout the package; inner corners are an opt-in nested shape. */
+	--radius-radius: var(--radius);
+	--radius-inner: calc(var(--radius) * 0.6);
+	--radius-radius-lg: var(--radius-xl);
+	/*
+	 * Conversational tier. Chat bubbles read as speech rather than as surfaces,
+	 * so they sit a step above the `radius-lg` used for cards and dialogs. It
+	 * exists because that shape was previously written as `rounded-2xl`, which
+	 * lived only in Tailwind's scale — a consumer retheming the package radius
+	 * family moved every card and left the bubbles behind.
+	 */
+	--radius-radius-xl: var(--radius-2xl);
+
+	/* Generated geometry aliases:start */
+	--spacing-action-xs: calc(var(--height-action) * 0.7777778 * var(--density-scale));
+	--spacing-action-sm: calc(var(--height-action) * 0.8888889 * var(--density-scale));
+	--spacing-action: calc(var(--height-action) * var(--density-scale));
+	--spacing-action-lg: calc(var(--height-action) * 10 / 9 * var(--density-scale));
+	--spacing-control-gap-small: calc(0.375rem * var(--space-scale));
+	--spacing-control-gap: calc(0.5rem * var(--space-scale));
+	--spacing-control-px: calc(var(--control-x) * var(--space-scale));
+	--spacing-control-px-xs: calc(var(--control-x) * 0.5 * var(--space-scale));
+	--spacing-control-y-offset: calc(0.25rem * var(--space-scale));
+	--spacing-control-icon-sm: calc((var(--control-x) * 0.8333333 + var(--icon) * 0.75 + 0.375rem) * var(--space-scale));
+	--spacing-control-icon: calc((var(--control-x) + var(--icon) + 0.5rem) * var(--space-scale));
+	--spacing-control-addon-sm: calc((var(--control-x) * 0.8333333 + 1.25rem + 0.375rem) * var(--space-scale));
+	--spacing-control-addon: calc((var(--control-x) + 1.5rem + 0.375rem) * var(--space-scale));
+	--spacing-control-count-sm: calc((var(--control-x) * 0.8333333 + 2.25rem) * var(--space-scale));
+	--spacing-control-count: calc((var(--control-x) + 2.5rem) * var(--space-scale));
+	--spacing-control-actions-sm: calc(var(--control-x) * 0.8333333 * var(--space-scale) + 2.75rem * var(--density-scale) + 0.25rem * var(--space-scale));
+	--spacing-control-actions: calc(var(--control-x) * var(--space-scale) + 2.75rem * var(--density-scale) + 0.25rem * var(--space-scale));
+	--spacing-control-clear: calc(1.375rem * var(--density-scale));
+	--spacing-control-clear-icon: calc(var(--icon) * 0.75 * var(--space-scale));
+	--spacing-control-file: calc(1.75rem * var(--density-scale));
+	--spacing-textarea-sm: calc(4rem * var(--density-scale));
+	--spacing-textarea: calc(5rem * var(--density-scale));
+	--spacing-icon-sm: calc(var(--icon) * 0.75 * var(--space-scale));
+	--spacing-icon-md: calc(var(--icon) * 0.875 * var(--space-scale));
+	--spacing-icon: calc(var(--icon) * var(--space-scale));
+	--spacing-icon-lg: calc(var(--icon) * 1.25 * var(--space-scale));
+	--spacing-avatar-sm: calc(var(--avatar) * 0.75 * var(--space-scale));
+	--spacing-avatar: calc(var(--avatar) * var(--space-scale));
+	--spacing-avatar-lg: calc(var(--avatar) * 1.25 * var(--space-scale));
+	--spacing-upload-avatar-small: calc(var(--avatar) * 2 * var(--space-scale));
+	--spacing-upload-avatar: calc(var(--avatar) * 2.5 * var(--space-scale));
+	--spacing-upload-avatar-large: calc(var(--avatar) * 3 * var(--space-scale));
+	/* Generated geometry aliases:end */
+}
+
+:root {
+	--height-action: 2.25rem; /* Default button and action-trigger height. */
+	--height-control: 2.25rem; /* Default input, select, and field-control height. */
+	--control-x: 0.75rem; /* Default inline padding for buttons and field controls. */
+
+	/* Media */
+	--icon: 1rem; /* Default interface icon size. */
+	--avatar: 2rem; /* Default avatar used in standard rows and cards. */
+}
+
+/* Generated geometry utilities:start */
+@utility h-action-xs {
+	height: calc(var(--height-action) * 0.7777778 * var(--density-scale));
+}
+
+@utility size-action-xs {
+	width: calc(var(--height-action) * 0.7777778 * var(--density-scale));
+	height: calc(var(--height-action) * 0.7777778 * var(--density-scale));
+}
+
+@utility top-action-xs-center {
+	top: calc(var(--height-action) * 0.7777778 * var(--density-scale) / 2);
+}
+
+@utility h-action-sm {
+	height: calc(var(--height-action) * 0.8888889 * var(--density-scale));
+}
+
+@utility size-action-sm {
+	width: calc(var(--height-action) * 0.8888889 * var(--density-scale));
+	height: calc(var(--height-action) * 0.8888889 * var(--density-scale));
+}
+
+@utility top-action-sm-center {
+	top: calc(var(--height-action) * 0.8888889 * var(--density-scale) / 2);
+}
+
+@utility h-action {
+	height: calc(var(--height-action) * var(--density-scale));
+}
+
+@utility size-action {
+	width: calc(var(--height-action) * var(--density-scale));
+	height: calc(var(--height-action) * var(--density-scale));
+}
+
+@utility top-action-center {
+	top: calc(var(--height-action) * var(--density-scale) / 2);
+}
+
+@utility h-action-lg {
+	height: calc(var(--height-action) * 10 / 9 * var(--density-scale));
+}
+
+@utility size-action-lg {
+	width: calc(var(--height-action) * 10 / 9 * var(--density-scale));
+	height: calc(var(--height-action) * 10 / 9 * var(--density-scale));
+}
+
+@utility top-action-lg-center {
+	top: calc(var(--height-action) * 10 / 9 * var(--density-scale) / 2);
+}
+
+@utility h-control-sm {
+	height: calc(var(--height-control) * 0.8888889 * var(--density-scale));
+}
+
+@utility min-h-control-sm {
+	min-height: calc(var(--height-control) * 0.8888889 * var(--density-scale));
+}
+
+@utility w-control-sm {
+	width: calc(var(--height-control) * 0.8888889 * var(--density-scale));
+}
+
+@utility size-control-sm {
+	width: calc(var(--height-control) * 0.8888889 * var(--density-scale));
+	height: calc(var(--height-control) * 0.8888889 * var(--density-scale));
+}
+
+@utility h-control {
+	height: calc(var(--height-control) * var(--density-scale));
+}
+
+@utility min-h-control {
+	min-height: calc(var(--height-control) * var(--density-scale));
+}
+
+@utility w-control {
+	width: calc(var(--height-control) * var(--density-scale));
+}
+
+@utility size-control {
+	width: calc(var(--height-control) * var(--density-scale));
+	height: calc(var(--height-control) * var(--density-scale));
+}
+
+@utility h-control-lg {
+	height: calc(var(--height-control) * 10 / 9 * var(--density-scale));
+}
+
+@utility min-h-control-lg {
+	min-height: calc(var(--height-control) * 10 / 9 * var(--density-scale));
+}
+
+@utility w-control-lg {
+	width: calc(var(--height-control) * 10 / 9 * var(--density-scale));
+}
+
+@utility size-control-lg {
+	width: calc(var(--height-control) * 10 / 9 * var(--density-scale));
+	height: calc(var(--height-control) * 10 / 9 * var(--density-scale));
+}
+
+@utility px-control-xs {
+	padding-inline: calc(var(--control-x) * 0.5 * var(--space-scale));
+}
+
+@utility ps-control-xs {
+	padding-inline-start: calc(var(--control-x) * 0.5 * var(--space-scale));
+}
+
+@utility pe-control-xs {
+	padding-inline-end: calc(var(--control-x) * 0.5 * var(--space-scale));
+}
+
+@utility px-control-sm {
+	padding-inline: calc(var(--control-x) * 0.8333333 * var(--space-scale));
+}
+
+@utility ps-control-sm {
+	padding-inline-start: calc(var(--control-x) * 0.8333333 * var(--space-scale));
+}
+
+@utility pe-control-sm {
+	padding-inline-end: calc(var(--control-x) * 0.8333333 * var(--space-scale));
+}
+
+@utility px-control {
+	padding-inline: calc(var(--control-x) * var(--space-scale));
+}
+
+@utility ps-control {
+	padding-inline-start: calc(var(--control-x) * var(--space-scale));
+}
+
+@utility pe-control {
+	padding-inline-end: calc(var(--control-x) * var(--space-scale));
+}
+
+@utility ps-control-icon-sm {
+	padding-inline-start: calc((var(--control-x) * 0.8333333 + var(--icon) * 0.75 + 0.375rem) * var(--space-scale));
+}
+
+@utility pe-control-icon-sm {
+	padding-inline-end: calc((var(--control-x) * 0.8333333 + var(--icon) * 0.75 + 0.375rem) * var(--space-scale));
+}
+
+@utility ps-control-icon {
+	padding-inline-start: calc((var(--control-x) + var(--icon) + 0.5rem) * var(--space-scale));
+}
+
+@utility pe-control-icon {
+	padding-inline-end: calc((var(--control-x) + var(--icon) + 0.5rem) * var(--space-scale));
+}
+
+@utility ps-control-addon-sm {
+	padding-inline-start: calc((var(--control-x) * 0.8333333 + 1.25rem + 0.375rem) * var(--space-scale));
+}
+
+@utility pe-control-addon-sm {
+	padding-inline-end: calc((var(--control-x) * 0.8333333 + 1.25rem + 0.375rem) * var(--space-scale));
+}
+
+@utility ps-control-addon {
+	padding-inline-start: calc((var(--control-x) + 1.5rem + 0.375rem) * var(--space-scale));
+}
+
+@utility pe-control-addon {
+	padding-inline-end: calc((var(--control-x) + 1.5rem + 0.375rem) * var(--space-scale));
+}
+
+@utility pe-control-count-sm {
+	padding-inline-end: calc((var(--control-x) * 0.8333333 + 2.25rem) * var(--space-scale));
+}
+
+@utility pe-control-count {
+	padding-inline-end: calc((var(--control-x) + 2.5rem) * var(--space-scale));
+}
+
+@utility pe-control-actions-sm {
+	padding-inline-end: calc(var(--control-x) * 0.8333333 * var(--space-scale) + 2.75rem * var(--density-scale) + 0.25rem * var(--space-scale));
+}
+
+@utility pe-control-actions {
+	padding-inline-end: calc(var(--control-x) * var(--space-scale) + 2.75rem * var(--density-scale) + 0.25rem * var(--space-scale));
+}
+
+@utility size-control-clear {
+	width: calc(1.375rem * var(--density-scale));
+	height: calc(1.375rem * var(--density-scale));
+}
+
+@utility size-control-clear-icon {
+	width: calc(var(--icon) * 0.75 * var(--space-scale));
+	height: calc(var(--icon) * 0.75 * var(--space-scale));
+}
+
+@utility h-control-file {
+	height: calc(1.75rem * var(--density-scale));
+}
+
+@utility min-h-textarea-sm {
+	min-height: calc(4rem * var(--density-scale));
+}
+
+@utility min-h-textarea {
+	min-height: calc(5rem * var(--density-scale));
+}
+/* Generated geometry utilities:end */
+
+/*
+ * Layout tokens.
+ *
+ * Shell and application-frame dimensions belong here, not in the swappable
+ * shadcn theme.
+ */
+@theme inline {
+	--spacing-shell-header: var(--shell-header-height);
+	--spacing-shell-header-control: calc(var(--height-action) * var(--density-scale));
+	--spacing-shell-sidebar: var(--shell-sidebar-width);
+	--spacing-shell-sidebar-icon-padded: calc(3.75rem * var(--density-scale) + 1rem * var(--space-scale));
+	--container-content-sm: var(--content-width-sm);
+	--container-content-md: var(--content-width-md);
+	--container-content-lg: var(--content-width-lg);
+	--container-content-xl: var(--content-width-xl);
+	--container-content-2xl: var(--content-width-2xl);
+	--container-adaptive-grid-min-sm: var(--adaptive-grid-min-sm);
+	--container-adaptive-grid-min-md: var(--adaptive-grid-min-md);
+	--container-adaptive-grid-min-lg: var(--adaptive-grid-min-lg);
+}
+
+:root {
+	--shell-header-height: 4.5rem; /* Minimum height of the application header shell. */
+	--shell-sidebar-width: 16rem; /* Default expanded sidebar content width. */
+	--content-width-sm: 40rem; /* Compact centered content measure. */
+	--content-width-md: 48rem; /* Medium centered content measure. */
+	--content-width-lg: 64rem; /* Default readable page content measure. */
+	--content-width-xl: 80rem; /* Wide application content measure. */
+	--content-width-2xl: 96rem; /* Maximum standard application content measure. */
+	--adaptive-grid-min-sm: 12rem; /* Compact minimum width for adaptive peer columns. */
+	--adaptive-grid-min-md: 16rem; /* Default minimum width for adaptive peer columns. */
+	--adaptive-grid-min-lg: 20rem; /* Spacious minimum width for adaptive peer columns. */
+}
+
+@utility shell-sidebar-vars {
+	--shell-sidebar-width-current: var(--shell-sidebar-width);
+}
+
+@utility shell-sidebar-icon-current {
+	--shell-sidebar-width-current: calc(3.75rem * var(--density-scale));
+}
+
+@utility shell-sidebar-offcanvas-current {
+	--shell-sidebar-width-current: min(20rem, calc(100vw - 2rem));
+}
+
+@utility shell-grid-left {
+	grid-template-columns: minmax(0, var(--shell-sidebar-width-current)) minmax(0, 1fr);
+}
+
+@utility shell-grid-right {
+	grid-template-columns: minmax(0, 1fr) minmax(0, var(--shell-sidebar-width-current));
+}
+
+/*
+ * Component-level token knobs.
+ *
+ * Use this layer for package-owned row, surface, and component adjustments
+ * that are intentionally broader than one component but not part of shadcn.
+ */
+@theme inline {
+	--spacing-row-x: calc(var(--row-x) * var(--space-scale));
+	--spacing-row-y-sm: calc(var(--row-y) * 0.75 * var(--density-scale));
+	--spacing-row-y: calc(var(--row-y) * var(--density-scale));
+	--spacing-row-y-lg: calc(var(--row-y) * 1.25 * var(--density-scale));
+}
+
+:root {
+	/* Rows */
+	--row-x: 0.75rem; /* Shared inline inset for list, menu, command, and table rows. */
+	--row-y: 0.5rem; /* Default vertical row inset with an 8px breathing floor. */
+
+	/* Surface base measurements. Utilities apply --space-scale at use time.
+	 * The xs inset is the 0.5rem collection-shell contract for action menus,
+	 * option lists, selects, and equivalent item popovers. */
+	--surface-x: 1rem; /* Default inline inset for cards and multi-content surfaces. */
+	--surface-y: 1rem; /* Default block inset for cards and multi-content surfaces. */
+
+	/* Data visualization canvas */
+	--chart-min-height: 13.75rem; /* Minimum readable canvas height for package chart frames. */
+
+	/* Modal scrim */
+	--overlay-backdrop: oklch(0 0 0 / 0.5); /* Shared tint behind dialog, alert dialog, sheet, and drawer surfaces. */
+
+}
+
+/*
+ * A non-modal drawer keeps the page usable, so it must not be scrimmed. The
+ * backdrop is rendered unconditionally by the vendored sheet part and takes no
+ * prop, so `ActionDrawer` marks its panel `data-modal="false"` and the sibling
+ * backdrop is dropped here. The backdrop precedes the panel inside the portal,
+ * which is why this reads forwards.
+ */
+[data-slot="sheet-overlay"]:has(~ [data-slot="sheet-content"][data-modal="false"]) {
+	display: none;
+}
+
+@utility px-surface-xs {
+	padding-inline: calc(var(--surface-x) * 0.5 * var(--space-scale));
+}
+
+@utility px-surface {
+	padding-inline: calc(var(--surface-x) * var(--space-scale));
+}
+
+@utility px-surface-lg {
+	padding-inline: calc(var(--surface-x) * 1.8 * var(--space-scale));
+}
+
+@utility ps-surface-xs {
+	padding-inline-start: calc(var(--surface-x) * 0.5 * var(--space-scale));
+}
+
+@utility ps-surface {
+	padding-inline-start: calc(var(--surface-x) * var(--space-scale));
+}
+
+@utility ps-surface-lg {
+	padding-inline-start: calc(var(--surface-x) * 1.8 * var(--space-scale));
+}
+
+@utility pe-surface-xs {
+	padding-inline-end: calc(var(--surface-x) * 0.5 * var(--space-scale));
+}
+
+@utility pe-surface {
+	padding-inline-end: calc(var(--surface-x) * var(--space-scale));
+}
+
+@utility pe-surface-lg {
+	padding-inline-end: calc(var(--surface-x) * 1.8 * var(--space-scale));
+}
+
+@utility pl-surface-xs {
+	padding-left: calc(var(--surface-x) * 0.5 * var(--space-scale));
+}
+
+@utility pl-surface {
+	padding-left: calc(var(--surface-x) * var(--space-scale));
+}
+
+@utility pl-surface-lg {
+	padding-left: calc(var(--surface-x) * 1.8 * var(--space-scale));
+}
+
+@utility pr-surface-xs {
+	padding-right: calc(var(--surface-x) * 0.5 * var(--space-scale));
+}
+
+@utility pr-surface {
+	padding-right: calc(var(--surface-x) * var(--space-scale));
+}
+
+@utility pr-surface-lg {
+	padding-right: calc(var(--surface-x) * 1.8 * var(--space-scale));
+}
+
+@utility py-surface-xs {
+	padding-block: calc(var(--surface-y) * 0.5 * var(--space-scale));
+}
+
+@utility py-surface {
+	padding-block: calc(var(--surface-y) * var(--space-scale));
+}
+
+@utility py-surface-lg {
+	padding-block: calc(var(--surface-y) * 1.8 * var(--space-scale));
+}
+
+@utility pt-surface-xs {
+	padding-top: calc(var(--surface-y) * 0.5 * var(--space-scale));
+}
+
+@utility pt-surface {
+	padding-top: calc(var(--surface-y) * var(--space-scale));
+}
+
+@utility pt-surface-lg {
+	padding-top: calc(var(--surface-y) * 1.8 * var(--space-scale));
+}
+
+@utility pb-surface-xs {
+	padding-bottom: calc(var(--surface-y) * 0.5 * var(--space-scale));
+}
+
+@utility pb-surface {
+	padding-bottom: calc(var(--surface-y) * var(--space-scale));
+}
+
+@utility pb-surface-lg {
+	padding-bottom: calc(var(--surface-y) * 1.8 * var(--space-scale));
+}
+
+@utility p-surface-xs {
+	padding: calc(var(--surface-y) * 0.5 * var(--space-scale)) calc(var(--surface-x) * 0.5 * var(--space-scale));
+}
+
+@utility p-surface {
+	padding: calc(var(--surface-y) * var(--space-scale)) calc(var(--surface-x) * var(--space-scale));
+}
+
+@utility p-surface-lg {
+	padding: calc(var(--surface-y) * 1.8 * var(--space-scale)) calc(var(--surface-x) * 1.8 * var(--space-scale));
+}
+
+@custom-variant dark (&:where(.dark, .dark *));