css-tags 0.1.0

package/core/typography.css

@@ -0,0 +1,327 @@
+/**
+ * typography.css
+ *
+ * Semantic typography, long-form prose rhythm, and callout surfaces.
+ */
+
+/*
+ * Opt into container-relative fluid type. Descendants keep the same bounded
+ * scale, but their preferred sizes respond to this container instead of the
+ * viewport. The short `.fc` alias is provided for composition-heavy markup.
+ */
+:is(fluid-container, [data-fluid-container], .fluid-container, .fc) {
+  display: block;
+  container-type: inline-size;
+  --font-size-step-1-preferred: calc(1.02rem + 0.22cqi);
+  --font-size-step-2-preferred: calc(1.11rem + 0.4cqi);
+  --font-size-step-3-preferred: calc(1.22rem + 0.75cqi);
+  --font-size-step-4-preferred: calc(1.32rem + 1.25cqi);
+  --font-size-step-5-preferred: calc(1.5rem + 1.9cqi);
+  --font-size-step-6-preferred: calc(1.8rem + 2.8cqi);
+  --font-size-step-7-preferred: calc(2.1rem + 3.6cqi);
+  --font-size-step-1: clamp(var(--font-size-step-1-min), var(--font-size-step-1-preferred), var(--font-size-step-1-max));
+  --font-size-step-2: clamp(var(--font-size-step-2-min), var(--font-size-step-2-preferred), var(--font-size-step-2-max));
+  --font-size-step-3: clamp(var(--font-size-step-3-min), var(--font-size-step-3-preferred), var(--font-size-step-3-max));
+  --font-size-step-4: clamp(var(--font-size-step-4-min), var(--font-size-step-4-preferred), var(--font-size-step-4-max));
+  --font-size-step-5: clamp(var(--font-size-step-5-min), var(--font-size-step-5-preferred), var(--font-size-step-5-max));
+  --font-size-step-6: clamp(var(--font-size-step-6-min), var(--font-size-step-6-preferred), var(--font-size-step-6-max));
+  --font-size-step-7: clamp(var(--font-size-step-7-min), var(--font-size-step-7-preferred), var(--font-size-step-7-max));
+  --font-size-lg: var(--font-size-step-1);
+  --font-size-xl: var(--font-size-step-2);
+  --font-size-2xl: var(--font-size-step-3);
+  --font-size-3xl: var(--font-size-step-4);
+  --font-size-4xl: var(--font-size-step-5);
+  --font-size-5xl: var(--font-size-step-6);
+  --font-size-6xl: var(--font-size-step-7);
+  --font-size-body-lg: var(--font-size-lg);
+  --font-size-lead: var(--font-size-xl);
+  --font-size-h1: var(--font-size-6xl);
+  --font-size-h2: var(--font-size-5xl);
+  --font-size-h3: var(--font-size-4xl);
+  --font-size-h4: var(--font-size-3xl);
+  --font-size-h5: var(--font-size-2xl);
+  --font-size-h6: var(--font-size-lg);
+}
+
+:is(.lead, [data-lead], text[variant="lead"]) {
+  --_fs: var(--font-size-lead);
+  --_lh: var(--line-height-lead);
+  display: block;
+  color: var(--text-subtle);
+  font-size: var(--font-size-lead);
+  line-height: var(--line-height-lead);
+  max-inline-size: var(--measure-prose, var(--measure-body));
+}
+
+:is(.caption, [data-caption], text[variant="caption"]) {
+  --_fs: var(--font-size-caption);
+  display: block;
+  color: var(--text-muted);
+  font-size: var(--font-size-meta, var(--font-size-caption));
+  line-height: var(--line-height-meta, var(--line-height-normal));
+}
+
+:is(eyebrow, .eyebrow, [data-eyebrow], text[variant="eyebrow"]) {
+  --_fs: var(--font-size-sm);
+  --_fw: var(--font-weight-semibold);
+  --_tracking: var(--letter-spacing-eyebrow, var(--letter-spacing-widest));
+  display: block;
+  margin-block-end: var(--space-eyebrow-bottom, 0.5rem);
+  color: var(--text-accent, var(--accent));
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+  letter-spacing: var(--letter-spacing-eyebrow, var(--letter-spacing-widest));
+  text-transform: uppercase;
+}
+
+:is(.prose, [data-prose]) {
+  max-inline-size: var(--measure-prose, var(--measure-body));
+  font-family: var(--font-family-body, inherit);
+  font-size: var(--font-size-prose, var(--font-size-body));
+  line-height: var(--line-height-prose, var(--line-height-body));
+  overflow-wrap: break-word;
+}
+
+:is(.prose-compact, [data-prose="compact"]) {
+  --space-flow: 0.75em;
+  --space-heading-top: 1.4em;
+  --space-rich-block: 1.1em;
+}
+
+:is(.prose-wide, [data-prose="wide"], [data-prose-width="wide"]) {
+  max-inline-size: var(--measure-wide);
+}
+
+:is(.prose-unbounded, [data-prose="unbounded"], [data-prose-width="none"]) {
+  max-inline-size: none;
+}
+
+:is(.prose, [data-prose]) > * {
+  margin-block: 0;
+}
+
+:is(.prose, [data-prose]) > * + * {
+  margin-block-start: var(--space-flow, 1em);
+}
+
+:is(.prose, [data-prose]) > :is(h2, h3, h4, h5, h6) {
+  margin-block-start: var(--space-heading-top, 1.8em);
+  margin-block-end: var(--space-heading-bottom, 0.65em);
+}
+
+:is(.prose, [data-prose]) > :is(h1, h2, h3, h4, h5, h6) + :is(p, ul, ol) {
+  margin-block-start: 0;
+}
+
+:is(.prose, [data-prose]) :is(ul, ol) {
+  padding-inline-start: var(--space-list-indent, 1.5em);
+}
+
+:is(.prose, [data-prose]) :is(li > ul, li > ol) {
+  margin-block-start: var(--space-list-item, 0.5em);
+  margin-block-end: 0;
+}
+
+:is(.prose, [data-prose]) a {
+  overflow-wrap: var(--prose-link-wrap, anywhere);
+}
+
+:is(.prose, [data-prose]) :is(pre, figure, blockquote, hr, .callout, [data-callout]) {
+  margin-block: var(--space-rich-block, 1.5em);
+}
+
+:is(.prose, [data-prose]) img {
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+:is(.prose, [data-prose]) :is(video, iframe, svg) {
+  max-inline-size: 100%;
+}
+
+:is(.prose, [data-prose]) iframe {
+  inline-size: 100%;
+  min-block-size: var(--prose-embed-min-height, 18rem);
+  border: 0;
+}
+
+:is(.prose, [data-prose]) figure > :is(img, picture, video, iframe) {
+  display: block;
+  margin-inline: auto;
+}
+
+/* Markdown and CMS output cannot always add the preferred data-table wrapper. */
+:is(.prose, [data-prose]) > table {
+  display: block;
+  max-inline-size: 100%;
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  scrollbar-gutter: var(--prose-table-scrollbar-gutter, stable);
+  scrollbar-width: var(--prose-table-scrollbar-width, thin);
+}
+
+:is(.prose, [data-prose]) :not(pre) > code {
+  overflow-wrap: var(--prose-inline-code-wrap, anywhere);
+  word-break: var(--prose-inline-code-word-break, normal);
+}
+
+:is(.prose, [data-prose]) figcaption {
+  margin-block-start: var(--space-figure-caption-top, 0.5rem);
+  color: var(--text-muted);
+  font-size: var(--font-size-caption);
+}
+
+:is(.prose, [data-prose]) table > caption {
+  padding-block: var(--prose-table-caption-padding, 0 0.75em);
+  color: var(--prose-table-caption-color, var(--text-muted));
+  font-size: var(--prose-table-caption-font-size, var(--font-size-caption));
+  text-align: start;
+}
+
+:is(.prose, [data-prose]) :is(dt, dd) {
+  min-inline-size: 0;
+}
+
+:is(.prose, [data-prose]) dt:not(:first-child) {
+  margin-block-start: var(--prose-definition-term-gap, 1em);
+}
+
+:is(.prose, [data-prose]) dd {
+  margin-block-start: var(--prose-definition-gap, 0.35em);
+}
+
+:is(.prose, [data-prose]) blockquote > :is(footer, cite) {
+  display: block;
+  margin-block-start: var(--prose-quote-cite-gap, 0.75em);
+  color: var(--prose-quote-cite-color, var(--text-muted));
+  font-size: var(--prose-quote-cite-font-size, var(--font-size-sm));
+  font-style: normal;
+}
+
+:is(.prose, [data-prose]) blockquote > footer::before {
+  content: var(--prose-quote-cite-prefix, "— ");
+}
+
+/* GitHub, CommonMark, and many CMS renderers use these task-list hooks. */
+:is(.prose, [data-prose]) :is(.contains-task-list, [data-task-list]) {
+  list-style: none;
+}
+
+:is(.prose, [data-prose]) :is(.task-list-item, [data-task-list-item]) {
+  list-style: none;
+}
+
+:is(.prose, [data-prose]) :is(.task-list-item, [data-task-list-item])
+  > input[type="checkbox"]:first-child {
+  inline-size: 1em;
+  block-size: 1em;
+  margin-inline-start: calc(-1 * var(--prose-task-marker-offset, 1.5em));
+  margin-inline-end: var(--prose-task-gap, 0.6em);
+  opacity: 1;
+  vertical-align: -0.1em;
+}
+
+/* Footnote output used by remark/rehype, GitHub, and compatible CMS engines. */
+:is(.prose, [data-prose]) :is([data-footnotes], .footnotes) {
+  display: grid;
+  gap: var(--prose-footnotes-gap, 0.75em);
+  margin-block-start: var(--space-rich-block, 1.5em);
+  padding-block-start: var(--prose-footnotes-padding-block-start, 1.5em);
+  border-block-start: var(--prose-footnotes-border, 1px solid var(--outline-subtle));
+  color: var(--prose-footnotes-color, var(--text-subtle));
+  font-size: var(--prose-footnotes-font-size, var(--font-size-sm));
+}
+
+:is(.prose, [data-prose]) :is([data-footnotes], .footnotes) > * {
+  margin-block: 0;
+}
+
+:is(.prose, [data-prose]) :is([data-footnotes], .footnotes) li:target {
+  border-radius: var(--radius-sm);
+  background: var(--prose-footnote-target-background, var(--highlight-bg-subtle));
+}
+
+:is(.prose, [data-prose]) :is([data-footnote-ref], [data-footnote-backref]) {
+  font-weight: var(--font-weight-medium);
+  text-decoration: none;
+}
+
+:is(.prose, [data-prose]) [data-footnote-backref] {
+  margin-inline-start: var(--prose-footnote-backref-gap, 0.25em);
+}
+
+:is(.prose, [data-prose]) :is(h1, h2, h3, h4, h5, h6, [id]) {
+  scroll-margin-block-start: var(--prose-heading-scroll-margin, 2rem);
+}
+
+:is(.prose, [data-prose]) :is(h1, h2, h3, h4, h5, h6)
+  > :is(.heading-anchor__link, [data-heading-anchor]) {
+  display: inline-flex;
+  margin-inline-start: var(--prose-heading-anchor-gap, 0.35em);
+  color: var(--prose-heading-anchor-color, var(--accent));
+  font-size: 0.55em;
+  line-height: 1;
+  opacity: var(--prose-heading-anchor-opacity, 0);
+  vertical-align: middle;
+  transition: opacity var(--transition-duration, 150ms) var(--transition-timing, ease-out);
+}
+
+:is(.prose, [data-prose]) :is(h1, h2, h3, h4, h5, h6):is(:hover, :focus-within)
+  > :is(.heading-anchor__link, [data-heading-anchor]),
+:is(.prose, [data-prose]) :is(.heading-anchor__link, [data-heading-anchor]):focus-visible {
+  opacity: var(--prose-heading-anchor-visible-opacity, 0.75);
+}
+
+:is(.prose, [data-prose]) > details {
+  margin-block: var(--prose-details-margin, var(--space-rich-block, 1.5em));
+}
+
+@media (hover: none) {
+  :is(.prose, [data-prose]) :is(h1, h2, h3, h4, h5, h6)
+    > :is(.heading-anchor__link, [data-heading-anchor]) {
+    opacity: var(--prose-heading-anchor-touch-opacity, 0.55);
+  }
+}
+
+:is(.prose, [data-prose]) mark {
+  padding-inline: 0.15em;
+  background: var(--highlight-bg-overt, mark);
+  color: var(--text-overt, marktext);
+}
+
+:is(.prose, [data-prose]) abbr[title] {
+  text-decoration-style: dotted;
+  text-underline-offset: 0.15em;
+  cursor: help;
+}
+
+:is(.callout, [data-callout]) {
+  --_callout-accent: var(--callout-border, var(--info));
+  --_callout-bg: var(--callout-background, var(--surface-subtle));
+
+  padding: var(--space-callout-pad-y, 1rem) var(--space-callout-pad-x, 1rem);
+  border: var(--border-width, 1px) solid var(--_callout-accent);
+  border-inline-start-width: var(--callout-border-width, 0.3rem);
+  border-radius: var(--callout-radius, var(--radius-md));
+  background: var(--_callout-bg);
+  color: var(--text-default);
+}
+
+:is(.callout-info, [data-callout="info"]) { --_callout-accent: var(--callout-info-border, var(--info)); }
+:is(.callout-success, [data-callout="success"]) { --_callout-accent: var(--callout-success-border, var(--success)); }
+:is(.callout-warning, [data-callout="warning"]) { --_callout-accent: var(--callout-warning-border, var(--warning)); }
+:is(.callout-error, [data-callout="error"]) { --_callout-accent: var(--callout-error-border, var(--error)); }
+
+:is(.callout-title, [data-callout-title]) {
+  display: block;
+  margin-block-end: var(--space-xs, 0.5rem);
+  color: var(--text-overt);
+  font-weight: var(--font-weight-semibold);
+}
+
+@supports (text-box: trim-both cap alphabetic) {
+  :is(eyebrow, .eyebrow, [data-eyebrow], text[variant="eyebrow"]) {
+    text-box: var(--text-box-eyebrow, var(--text-box-ui));
+  }
+}

package/index.css

@@ -0,0 +1,66 @@
+/**
+ * Modern CSS Framework - Main Entry Point
+ * Revised import structure for clarity and correctness.
+ */
+
+@layer base, reset, tokens, engine, theme, palette, defaults, components, utilities, layouts, website-theme;
+
+/* CORE SYSTEM */
+@import url("core/reset.css") layer(reset);
+@import url("core/tokens.css") layer(tokens);
+@import url("core/engine.css") layer(engine);
+@import url("core/theme.css") layer(theme); /* The new canonical theme file */
+@import url("core/palette.css") layer(palette);
+@import url('core/base.css') layer(base);
+@import url('core/defaults.css') layer(defaults); /* Restored for semantic styling */
+@import url('core/typography.css') layer(defaults);
+@import url('core/mixins.css') layer(base);
+@import url('core/text.css') layer(components);
+/* THEMES */
+@import url("themes/theme-packs.css") layer(theme);
+@import url("themes/example-brand.css") layer(theme);
+
+/* LAYOUTS & UTILITIES */
+@import url("utilities/utilities.css") layer(utilities); /* The new canonical utilities file */
+@import url("layouts/layout.css") layer(layouts);
+@import url("layouts/layout-extra.css") layer(layouts);
+@import url("layouts/layout-extras-helpers.css") layer(layouts);
+
+/* COMPONENTS */
+@import url('components/accessibility.css') layer(components);
+@import url('components/container.css') layer(components);
+@import url('components/grid.css') layer(components);
+@import url('components/flex.css') layer(components);
+@import url('components/card.css') layer(components);
+@import url('components/box.css') layer(components);
+@import url('components/box-extra.css') layer(components);
+@import url('components/badge.css') layer(components);
+@import url('components/chip.css') layer(components);
+@import url('components/alert.css') layer(components);
+@import url('components/modal.css') layer(components);
+@import url('components/tooltip.css') layer(components);
+@import url('components/tooltips.css') layer(components);
+@import url('components/list.css') layer(components);
+@import url('components/divider.css') layer(components);
+@import url('components/carousel.css') layer(components);
+@import url('components/popover.css') layer(components);
+@import url('components/disclosure.css') layer(components);
+@import url('components/tabs.css') layer(components);
+@import url('components/loading.css') layer(components);
+@import url('components/status.css') layer(components);
+@import url('components/view-transition.css') layer(components); /* Corrected path */
+@import url('components/table.css') layer(components);
+@import url('components/form.css') layer(components);
+@import url('components/actions.css') layer(components);
+@import url('components/form-patterns.css') layer(components);
+@import url('components/identity.css') layer(components);
+@import url('components/navigation.css') layer(components);
+@import url('components/navigation-patterns.css') layer(components);
+@import url('components/site-shell.css') layer(components);
+@import url('components/application-patterns.css') layer(components);
+@import url('components/content-patterns.css') layer(components);
+@import url('components/masonry.css') layer(components);
+@import url('components/img-container.css') layer(components);
+
+/* Optional Theme Generator */
+/* @import url("theme-generator.css"); */

package/layouts/layout-extra.css

@@ -0,0 +1,204 @@
+/**
+ * layout-extra.css
+ *
+ * A supplementary library of layout-focused mixins, functions, and utilities.
+ * ------------------------------------------------------------------------------
+ * This file extends the core layout system by providing two things:
+ *
+ * 1.  PROPOSED MIXINS/FUNCTIONS: For applying layout patterns directly in CSS to
+ *     any element, offering a CSS-centric approach.
+ *
+ * 2.  UTILITY CLASSES: For augmenting the behavior of the <layout-*> components
+ *     with common visual effects and behaviors (e.g., shadows, sticky positioning).
+ *
+ * ==============================================================================
+ * ⚠️ IMPORTANT: PROPOSED FEATURE NOTICE ⚠️
+ * The @function and @mixin rules are NOT SUPPORTED in any browser as of late 2025.
+ * This file demonstrates a forward-looking, pre-processor-free approach.
+ * ==============================================================================
+ *
+ * --- TABLE OF CONTENTS ---
+ *
+ * 1.  LAYOUT MIXINS
+ *     - `@mixin --layout-stack`
+ *     - `@mixin --layout-grid`
+ *     - `@mixin --layout-sidebar`
+ *
+ * 2.  LAYOUT FUNCTIONS
+ *     - `@function --aspect-ratio`
+ *
+ * 3.  UTILITY CLASSES
+ *     - `.has-shadow-sm`, `.has-shadow-md`, `.has-shadow-lg`
+ *     - `.is-sticky`
+ *     - `.is-full-bleed`
+ *
+ */
+
+/*
+ * ==============================================================================
+ * 1. LAYOUT MIXINS (Proposed Syntax)
+ * ==============================================================================
+ * These mixins allow you to apply the logic of the layout components to any
+ * standard HTML element in your own stylesheets.
+ */
+
+/**
+ * @mixin --layout-stack
+ * Applies vertical stacking logic to the current selector.
+ *
+ * @param {<length>} --gap - The space between stacked items.
+ * @param {string} --align - The horizontal alignment of items.
+ *
+ * @example
+ *   .product-details {
+ *     @apply --layout-stack(--gap: 2rem, --align: flex-start);
+ *   }
+ */
+@mixin --layout-stack(--gap, --align: stretch) {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: var(--align);
+  gap: var(--gap, var(--space-md, 1.5rem));
+}
+
+/**
+ * @mixin --layout-grid
+ * Applies responsive grid logic to the current selector.
+ *
+ * @param {string} --min-item-size - The minimum size for each grid item.
+ * @param {<length>} --gap - The gap between items.
+ *
+ * @example
+ *   .card-collection {
+ *     @apply --layout-grid(--min-item-size: 20rem);
+ *   }
+ */
+@mixin --layout-grid(--min-item-size, --gap) {
+  display: grid;
+  gap: var(--gap, var(--space-md, 1.5rem));
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min-item-size, 16rem)), 1fr));
+}
+
+/**
+ * @mixin --layout-sidebar
+ * Applies the logic for a responsive sidebar layout.
+ *
+ * @param {string} --side-width - The width of the sidebar.
+ * @param {string} --content-min - The point at which the main content wraps.
+ * @param {<length>} --gap - The space between sidebar and content.
+ *
+ * @example
+ *   main.with-sidebar {
+ *     @apply --layout-sidebar(--side-width: 250px);
+ *
+ *     & > :last-child {
+ *       flex-basis: var(--side-width); // Match sidebar width
+ *     }
+ *   }
+ */
+@mixin --layout-sidebar(--side-width, --content-min, --gap) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap, var(--space-lg, 2rem));
+
+  & > :first-child { /* Main content */
+    flex-grow: 9999;
+    flex-basis: var(--content-min, 50%);
+  }
+  & > :last-child { /* Sidebar */
+    flex-grow: 1;
+    flex-basis: var(--side-width, 20rem);
+  }
+}
+
+
+/*
+ * ==============================================================================
+ * 2. LAYOUT FUNCTIONS (Proposed Syntax)
+ * ==============================================================================
+ */
+
+/**
+ * @function --aspect-ratio
+ * A simple function to return a clean aspect-ratio value.
+ *
+ * @param {<number>} --width - The width component of the ratio.
+ * @param {<number>} --height - The height component of the ratio.
+ * @returns {string} The aspect-ratio value (e.g., "16 / 9").
+ *
+ * @example
+ *   .video-player {
+ *     aspect-ratio: --aspect-ratio(16, 9);
+ *   }
+ */
+@function --aspect-ratio(--width type(*), --height type(*)) returns type(*) {
+  result: var(--width) + ' / ' + var(--height);
+}
+
+
+/*
+ * ==============================================================================
+ * 3. UTILITY CLASSES
+ * ==============================================================================
+ * These classes can be added to layout components (or any element) to apply
+ * common, shared visual effects and behaviors.
+ */
+
+/**
+ * Shadow Utilities
+ * Apply consistent, token-based shadows.
+ *
+ * @example
+ *   <layout-sidebar class="has-shadow-md">...</layout-sidebar>
+ */
+:where(.has-shadow-sm, .has-shadow-md, .has-shadow-lg) {
+  /* Assumes shadow tokens are defined in a global file like `base.css` */
+  --_shadow-sm: var(--shadow-1, 0 1px 3px rgb(0 0 0 / 0.1));
+  --_shadow-md: var(--shadow-2, 0 4px 6px rgb(0 0 0 / 0.1));
+  --_shadow-lg: var(--shadow-3, 0 10px 15px rgb(0 0 0 / 0.1));
+}
+.has-shadow-sm { box-shadow: var(--_shadow-sm); }
+.has-shadow-md { box-shadow: var(--_shadow-md); }
+.has-shadow-lg { box-shadow: var(--_shadow-lg); }
+
+
+/**
+ * Sticky Positioning Utility
+ * Makes an element "stick" to the top of its scrolling container.
+ * Perfect for sidebars or headers.
+ *
+ * @example
+ *   <layout-sidebar>
+ *     <main>...</main>
+ *     <aside class="is-sticky">...</aside>
+ *   </layout-sidebar>
+ */
+.is-sticky {
+  --_sticky-top: var(--sticky-top-offset, 1rem); /* Customizable offset */
+
+  position: sticky;
+  top: var(--_sticky-top);
+  align-self: start; /* Prevents stretching in flex/grid containers */
+  max-height: calc(100vh - var(--_sticky-top) * 2); /* Prevents overflow */
+  overflow-y: auto;
+}
+
+
+/**
+ * Full Bleed Utility
+ * Allows a child element to break out of its parent container's padding
+ * and stretch to the full width of the viewport.
+ *
+ * @example
+ *   <layout-center>
+ *     <p>This text is constrained.</p>
+ *     <img src="..." alt="..." class="is-full-bleed">
+ *     <p>This text is also constrained.</p>
+ *   </layout-center>
+ */
+.is-full-bleed {
+  width: 100vw;
+  margin-inline: 50%;
+  transform: translateX(-50%);
+}

package/layouts/layout-extras-helpers.css

@@ -0,0 +1,19 @@
+/* layout-extras-helpers.css */
+
+/* Density presets */
+:root[data-density="compact"] { --l-gap: var(--spacing-sm); --l-padding: var(--spacing-sm); }
+:root[data-density="comfortable"] { --l-gap: var(--spacing-md); --l-padding: var(--spacing-md); }
+:root[data-density="spacious"] { --l-gap: var(--spacing-lg); --l-padding: var(--spacing-lg); }
+
+/* Threshold presets for switcher/sidebar */
+:root[data-threshold="tight"] { --l-threshold: 24rem; }
+:root[data-threshold="normal"] { --l-threshold: 30rem; }
+:root[data-threshold="loose"] { --l-threshold: 40rem; }
+
+/* Container query helpers */
+@container layout-container (max-width: 30rem) {
+  .hide-on-narrow { display: none !important; }
+}
+@container layout-container (min-width: 60rem) {
+  .only-on-wide { display: initial !important; }
+}