themelia-react-ui 2.0.1 → 2.0.2

package/dist/theme.css

@@ -55,107 +55,113 @@
 	--shadow-2xl: var(--shadow-2xl);
 }
 
-:root {
-	/* Radius is shared geometry, not a light-palette reset. Mode scopes inherit it. */
-	--radius: 0.75rem; /* Shared 12px outer corners; inner control/row corners derive from this root and stay rectangular. */
-}
-
-:root,
-.light {
-	color-scheme: light; /* Native scrollbars, form controls and pickers follow the active mode. */
-	--background: oklch(0.985 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(--card); /* Popover, menu, select, and transient-surface background. */
-	--popover-foreground: var(--foreground); /* Primary text and icons on popover surfaces. */
-	--primary: oklch(0.205 0 0); /* Primary-action color: near-black by default so status colors never compete with it; a brand stylesheet such as themes/green.css replaces it. */
-	--primary-foreground: oklch(0.985 0 0); /* Text and icons on solid primary fills. */
-	--secondary: oklch(0.94 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.96 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.945 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.2039 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.28 0 0 / 15%); /* The one control boundary: inputs, selects, field triggers, checkboxes, radios, switch tracks and outline buttons share it. Translucent, so it reads the same on every surface; dividers use --border. */
-	--ring: oklch(0.60 0 0); /* Focus color: a focused control's frame takes it at full strength (3:1) inside a soft 3px halo of it at 50%. */
-	/*
-	 * 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 are offset from the status hues
-	 * (destructive 27, warning 75, success 145); series 1 and 5 sit nearest
-	 * (22° from success, 15° from warning), so charts that encode state use the
-	 * status tokens, never series colors. 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.60 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 {
-	color-scheme: dark;
-	--background: oklch(0.145 0 0);
-	--foreground: oklch(0.985 0 0);
-	--card: oklch(0.205 0 0);
-	--card-foreground: oklch(0.985 0 0);
-	--popover: oklch(0.235 0 0);
-	--popover-foreground: var(--foreground);
-	--primary: oklch(0.922 0 0); /* Near-white primary fill and ink on dark surfaces. */
-	--primary-foreground: oklch(0.205 0 0); /* Dark ink on the near-white dark-theme primary fill. */
-	--secondary: oklch(0.269 0 0);
-	--secondary-foreground: oklch(0.985 0 0);
-	--muted: oklch(0.175 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.1876 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.65 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.175 0 0);
-	--sidebar-foreground: oklch(0.985 0 0);
-	--sidebar-primary: var(--primary);
-	--sidebar-primary-foreground: var(--primary-foreground);
-	--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.65 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);
+@layer theme {
+	:root {
+		/* Radius is shared geometry, not a light-palette reset. Mode scopes inherit it. */
+		--radius: 0.75rem; /* Shared 12px outer corners; inner control/row corners derive from this root and stay rectangular. */
+	}
+}
+
+@layer theme {
+	:root,
+	.light {
+		color-scheme: light; /* Native scrollbars, form controls and pickers follow the active mode. */
+		--background: oklch(0.985 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(--card); /* Popover, menu, select, and transient-surface background. */
+		--popover-foreground: var(--foreground); /* Primary text and icons on popover surfaces. */
+		--primary: oklch(0.205 0 0); /* Primary-action color: near-black by default so status colors never compete with it; a brand stylesheet such as themes/green.css replaces it. */
+		--primary-foreground: oklch(0.985 0 0); /* Text and icons on solid primary fills. */
+		--secondary: oklch(0.94 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.96 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.945 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.2039 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.28 0 0 / 56%); /* The one resting control boundary: fields, choice controls and outline buttons share a 3:1 edge across supported surfaces, including rounded sRGB rendering. Dividers use the quieter --border role. */
+		--ring: oklch(0.60 0 0); /* Focus color: a focused control's frame takes it at full strength (3:1) inside a soft 3px halo of it at 50%. */
+		/*
+		 * 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 are offset from the status hues
+		 * (destructive 27, warning 75, success 145); series 1 and 5 sit nearest
+		 * (22° from success, 15° from warning), so charts that encode state use the
+		 * status tokens, never series colors. 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: var(--primary); /* Strong sidebar selection or primary action fill; follows the brand in both modes. */
+		--sidebar-primary-foreground: var(--primary-foreground); /* 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.60 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. */
+	}
+}
+
+@layer theme {
+	.dark {
+		color-scheme: dark;
+		--background: oklch(0.145 0 0);
+		--foreground: oklch(0.985 0 0);
+		--card: oklch(0.205 0 0);
+		--card-foreground: oklch(0.985 0 0);
+		--popover: oklch(0.235 0 0);
+		--popover-foreground: var(--foreground);
+		--primary: oklch(0.922 0 0); /* Near-white primary fill and ink on dark surfaces. */
+		--primary-foreground: oklch(0.205 0 0); /* Dark ink on the near-white dark-theme primary fill. */
+		--secondary: oklch(0.269 0 0);
+		--secondary-foreground: oklch(0.985 0 0);
+		--muted: oklch(0.175 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.1876 22.216);
+		--destructive-foreground: oklch(0.18 0.05 22);
+		--border: oklch(1 0 0 / 10%);
+		--input: oklch(1 0 0 / 55%);
+		--ring: oklch(0.65 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.175 0 0);
+		--sidebar-foreground: oklch(0.985 0 0);
+		--sidebar-primary: var(--primary);
+		--sidebar-primary-foreground: var(--primary-foreground);
+		--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.65 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);
+	}
 }
 
 /*
@@ -218,56 +224,58 @@
 	--spacing-space-3xl: calc(2rem * var(--space-scale)); /* Page-level rhythm between a page header and its body or between major sections. */
 }
 
-: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.25rem; /* Vertical rhythm between titles and structural descriptions. */
-	--gap-dense: 0.125rem; /* 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. */
-
+@layer theme {
+	: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.25rem; /* Vertical rhythm between titles and structural descriptions. */
+		--gap-dense: 0.125rem; /* 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. */
+
+	}
 }
 
 
@@ -310,47 +318,51 @@
 	--color-inverse-decoration: var(--inverse-decoration);
 }
 
-:root,
-.light {
-	--success: oklch(0.4 0.1257 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: var(--primary); /* Brand color drawn AS foreground — icons, spinners, active marks — on the app surface. Follows --primary, so a rebrand needs one root; a brand theme may set a dedicated dark foreground accent. 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 and decorative highlight; use warning-accent for ink on ordinary surfaces. */
-	--warning-foreground: oklch(0.28 0.035 60); /* Text and icons on solid warning fills. */
-	--warning-accent: oklch(0.53 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: var(--primary);
-	--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);
+@layer theme {
+	:root,
+	.light {
+		--success: oklch(0.4 0.1257 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: var(--primary); /* Brand color drawn AS foreground — icons, spinners, active marks — on the app surface. Follows --primary, so a rebrand needs one root; a brand theme may set a dedicated dark foreground accent. 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 and decorative highlight; use warning-accent for ink on ordinary surfaces. */
+		--warning-foreground: oklch(0.28 0.035 60); /* Text and icons on solid warning fills. */
+		--warning-accent: oklch(0.53 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. */
+	}
+}
+
+@layer theme {
+	.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: var(--primary);
+		--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);
+	}
 }
 
 /*
@@ -409,14 +421,16 @@
 	/* 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. */
+@layer theme {
+	: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. */
+		/* Media */
+		--icon: 1rem; /* Default interface icon size. */
+		--avatar: 2rem; /* Default avatar used in standard rows and cards. */
+	}
 }
 
 /* Generated geometry utilities:start */
@@ -651,29 +665,36 @@
 	--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. */
-}
-
+@layer theme {
+	: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. */
+	}
+}
+
+/* The shell's own widths, defined once: the sidebar primitives and the shell
+ * grid read these instead of restating them. They are shell mechanics scoped
+ * to the shell, not theme roots. */
 @utility shell-sidebar-vars {
 	--shell-sidebar-width-current: var(--shell-sidebar-width);
+	--shell-sidebar-width-icon: calc(3.75rem * var(--density-scale));
+	--shell-sidebar-width-offcanvas: min(20rem, calc(100vw - 2rem));
 }
 
 @utility shell-sidebar-icon-current {
-	--shell-sidebar-width-current: calc(3.75rem * var(--density-scale));
+	--shell-sidebar-width-current: var(--shell-sidebar-width-icon);
 }
 
 @utility shell-sidebar-offcanvas-current {
-	--shell-sidebar-width-current: min(20rem, calc(100vw - 2rem));
+	--shell-sidebar-width-current: var(--shell-sidebar-width-offcanvas);
 }
 
 @utility shell-grid-left {
@@ -697,23 +718,25 @@
 	--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. */
+@layer theme {
+	: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 half the surface root for action menus,
-	 * option lists, selects, and equivalent item popovers. */
-	--surface-x: 1.25rem; /* Default inline inset for cards and multi-content surfaces. */
-	--surface-y: 1.25rem; /* Default block inset for cards and multi-content surfaces. */
+		/* Surface base measurements. Utilities apply --space-scale at use time.
+		 * The xs inset is half the surface root for action menus,
+		 * option lists, selects, and equivalent item popovers. */
+		--surface-x: 1.25rem; /* Default inline inset for cards and multi-content surfaces. */
+		--surface-y: 1.25rem; /* 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. */
+		/* 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. */
+		/* Modal scrim */
+		--overlay-backdrop: oklch(0 0 0 / 0.5); /* Shared tint behind dialog, alert dialog, sheet, and drawer surfaces. */
 
+	}
 }
 
 /*
@@ -835,4 +858,38 @@
 	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 *));
+/* Private inherited mode marker: style queries read the nearest boundary with
+ * no size containment or DOM synchronization. Keep the own-element branches:
+ * container queries inspect ancestors, while a utility may itself own a mode. */
+.light { --themelia-mode: light; }
+.dark { --themelia-mode: dark; }
+@custom-variant dark {
+	&:where(.dark) {
+		@slot;
+	}
+	@container style(--themelia-mode: dark) {
+		&:not(:where(.light)) {
+			@slot;
+		}
+	}
+}
+
+/* Re-resolve default aliases only when a plain ThemeScope supplies their source
+ * root. Explicit stylesheet/inline role overrides win this zero-specificity
+ * bridge. A scope without a new source inherits its parent's independent role.
+ * Mode-dependent aliases such as light-only --popover remain palette-owned. */
+@layer theme {
+	:where([data-theme-scope][data-theme-roots~="primary"]) {
+		--primary-accent: var(--primary);
+		--sidebar-primary: var(--primary);
+	}
+	:where([data-theme-scope][data-theme-roots~="primary-foreground"]) {
+		--sidebar-primary-foreground: var(--primary-foreground);
+	}
+	:where([data-theme-scope][data-theme-roots~="foreground"]) {
+		--popover-foreground: var(--foreground);
+	}
+	:where([data-theme-scope][data-theme-roots~="font-sans"]) {
+		--font-heading: var(--font-sans);
+	}
+}