css-tags 0.1.0

package/components/status.css

@@ -0,0 +1,110 @@
+/**
+ * status.css
+ *
+ * Token-driven defaults for native progress and meter elements.
+ * Native elements are canonical so value, range, and status semantics remain
+ * available to browsers and assistive technology.
+ */
+
+@keyframes progress-indeterminate {
+  to { background-position-x: -200%; }
+}
+
+:is(progress, progress.progress, progress[data-progress]) {
+  --_progress-height: var(--progress-height, 0.75rem);
+  --_progress-radius: var(--progress-radius, var(--radius-full, 9999px));
+  --_progress-bg: var(--progress-background, var(--surface-muted, #e5e7eb));
+  --_progress-border: var(--progress-border, var(--outline-subtle, transparent));
+  --_progress-value: var(--progress-value-background, var(--accent));
+
+  appearance: none;
+  display: block;
+  inline-size: 100%;
+  block-size: var(--_progress-height);
+  overflow: hidden;
+  border: var(--border-width, 1px) solid var(--_progress-border);
+  border-radius: var(--_progress-radius);
+  background: var(--_progress-bg);
+  color: var(--_progress-value);
+}
+
+:is(progress, progress.progress, progress[data-progress])::-webkit-progress-bar {
+  border-radius: inherit;
+  background: var(--_progress-bg);
+}
+
+:is(progress, progress.progress, progress[data-progress])::-webkit-progress-value {
+  border-radius: inherit;
+  background: var(--_progress-value);
+}
+
+:is(progress, progress.progress, progress[data-progress])::-moz-progress-bar {
+  border-radius: inherit;
+  background: var(--_progress-value);
+}
+
+:is(progress, progress.progress, progress[data-progress]):not([value]) {
+  background-image: linear-gradient(
+    100deg,
+    var(--_progress-bg) 20%,
+    var(--progress-indeterminate-background, var(--_progress-value)) 50%,
+    var(--_progress-bg) 80%
+  );
+  background-size: 200% 100%;
+  animation: progress-indeterminate var(--progress-indeterminate-speed, 1.4s) linear infinite;
+}
+
+:is(progress, progress.progress, progress[data-progress]):not([value])::-webkit-progress-bar {
+  background: transparent;
+}
+
+:is(meter, meter.meter, meter[data-meter]) {
+  --_meter-height: var(--meter-height, 0.75rem);
+  --_meter-radius: var(--meter-radius, var(--radius-full, 9999px));
+  --_meter-bg: var(--meter-background, var(--surface-muted, #e5e7eb));
+  --_meter-border: var(--meter-border, var(--outline-subtle, transparent));
+  --_meter-optimum: var(--meter-optimum-background, var(--success));
+  --_meter-suboptimum: var(--meter-suboptimum-background, var(--warning));
+  --_meter-low: var(--meter-even-less-good-background, var(--error));
+
+  appearance: none;
+  display: block;
+  inline-size: 100%;
+  block-size: var(--_meter-height);
+  overflow: hidden;
+  border: var(--border-width, 1px) solid var(--_meter-border);
+  border-radius: var(--_meter-radius);
+  background: var(--_meter-bg);
+}
+
+:is(meter, meter.meter, meter[data-meter])::-webkit-meter-bar {
+  border: 0;
+  border-radius: inherit;
+  background: var(--_meter-bg);
+}
+
+:is(meter, meter.meter, meter[data-meter])::-webkit-meter-optimum-value {
+  border-radius: inherit;
+  background: var(--_meter-optimum);
+}
+
+:is(meter, meter.meter, meter[data-meter])::-webkit-meter-suboptimum-value {
+  border-radius: inherit;
+  background: var(--_meter-suboptimum);
+}
+
+:is(meter, meter.meter, meter[data-meter])::-webkit-meter-even-less-good-value {
+  border-radius: inherit;
+  background: var(--_meter-low);
+}
+
+:is(meter, meter.meter, meter[data-meter])::-moz-meter-bar {
+  border-radius: inherit;
+  background: var(--_meter-optimum);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(progress, progress.progress, progress[data-progress]):not([value]) {
+    animation: none;
+  }
+}

package/components/table.css

@@ -0,0 +1,98 @@
+/**
+ * Responsive data tables.
+ *
+ * Prefer a native table with `data-table` or `.data-table`. A custom
+ * `<data-table>` can be used as an overflow wrapper around a native table;
+ * keeping `<table>`, `<th>`, and `<td>` preserves browser table semantics.
+ */
+
+:is(data-table, [data-table-scroll], .table-scroll) {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+  border-radius: var(--table-radius, var(--radius-md, 0.5rem));
+  overscroll-behavior-inline: contain;
+  scrollbar-gutter: stable;
+}
+
+:is(table[data-table], table.data-table, data-table > table) {
+  width: 100%;
+  min-width: var(--table-min-width, 36rem);
+  border-spacing: 0;
+  border-collapse: separate;
+  overflow: hidden;
+  color: var(--table-text, var(--text-default, inherit));
+  background: var(--table-bg, var(--surface-default, Canvas));
+  border: var(--table-border-width, 1px) solid
+    var(--table-border-color, var(--outline-subtle, currentColor));
+  border-radius: var(--table-radius, var(--radius-md, 0.5rem));
+  font-size: var(--table-font-size, var(--font-size-sm, 0.875rem));
+}
+
+:is(table[data-table], table.data-table, data-table > table) caption {
+  padding-block-end: var(--table-caption-gap, var(--space-sm, 0.5rem));
+  color: var(--table-caption-color, var(--text-subtle, currentColor));
+  font-weight: var(--font-weight-medium, 500);
+  text-align: start;
+}
+
+:is(table[data-table], table.data-table, data-table > table) :is(th, td) {
+  padding: var(--table-cell-padding-block, var(--space-sm, 0.5rem))
+    var(--table-cell-padding-inline, var(--space-md, 1rem));
+  border-block-end: 1px solid
+    var(--table-divider-color, var(--outline-subtle, currentColor));
+  text-align: start;
+  vertical-align: middle;
+}
+
+:is(table[data-table], table.data-table, data-table > table) th {
+  color: var(--table-heading-color, var(--text-overt, inherit));
+  background: var(--table-heading-bg, var(--surface-subtle, transparent));
+  font-weight: var(--font-weight-semibold, 600);
+}
+
+:is(table[data-table], table.data-table, data-table > table) tbody tr:last-child > * {
+  border-block-end: 0;
+}
+
+:is(table[data-table], table.data-table, data-table > table, .table-striped)
+  tbody tr:nth-child(even) {
+  background: var(--table-stripe-bg, var(--surface-muted, transparent));
+}
+
+:is(table[data-table], table.data-table, data-table > table, .table-hover)
+  tbody tr:hover {
+  background: var(--table-row-hover-bg, var(--surface-subtle, transparent));
+}
+
+:is(table[data-table], table.data-table, data-table > table) :is(a, button):focus-visible {
+  outline: var(--focus-ring-width, 2px) solid
+    var(--focus-ring-color, Highlight);
+  outline-offset: var(--focus-ring-offset, 2px);
+}
+
+.table-bordered {
+  --table-border-width: var(--border-width-thick, 2px);
+}
+
+.table-borderless {
+  --table-border-width: 0;
+  --table-divider-color: transparent;
+}
+
+@media (max-width: 40rem) {
+  :is(table[data-table], table.data-table):not(
+    :is(data-table, [data-table-scroll], .table-scroll) > table
+  ) {
+    display: block;
+    max-width: 100%;
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+  }
+
+  :is(data-table, [data-table-scroll], .table-scroll)
+    > :is(table[data-table], table.data-table) {
+    display: table;
+    overflow: visible;
+  }
+}

package/components/tabs.css

@@ -0,0 +1,103 @@
+/**
+ * tabs.css
+ *
+ * ARIA-first tab styling. JavaScript owns selection, focus movement, and panel
+ * visibility; CSS uses the semantic roles and state attributes as its contract.
+ */
+
+:is([role="tablist"], [data-tablist], .tablist) {
+  --_tabs-gap: var(--tabs-gap, 0.25rem);
+  --_tabs-border: var(--tabs-border-color, var(--outline-subtle));
+  --_tabs-bg: var(--tabs-background, transparent);
+
+  display: flex;
+  align-items: end;
+  gap: var(--_tabs-gap);
+  padding-inline: var(--tabs-padding-inline, 0);
+  padding-block: var(--tabs-padding-block, 0);
+  overflow-x: auto;
+  border-block-end: 1px solid var(--_tabs-border);
+  background: var(--_tabs-bg);
+  scrollbar-width: thin;
+}
+
+:is([role="tab"], [data-tab], .tab) {
+  position: relative;
+  flex: 0 0 auto;
+  margin: 0 0 -1px;
+  padding: var(--tabs-tab-padding, 0.65rem 1rem);
+  border: 0;
+  border-block-end: var(--tabs-indicator-width, 2px) solid transparent;
+  border-radius: var(--tabs-tab-radius, var(--radius-sm, 0.375rem)) var(--tabs-tab-radius, var(--radius-sm, 0.375rem)) 0 0;
+  background: var(--tabs-tab-background, transparent);
+  color: var(--tabs-tab-color, var(--text-subtle));
+  font: inherit;
+  font-weight: var(--font-weight-medium, 500);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out;
+}
+
+:is([role="tab"], [data-tab], .tab):hover:not(:disabled, [aria-disabled="true"]) {
+  background: var(--tabs-tab-hover-background, var(--highlight-bg-subtle));
+  color: var(--tabs-tab-hover-color, var(--text-overt));
+}
+
+:is([role="tab"], [data-tab], .tab)[aria-selected="true"] {
+  border-block-end-color: var(--tabs-tab-active-border, var(--accent));
+  background: var(--tabs-tab-active-background, transparent);
+  color: var(--tabs-tab-active-color, var(--text-overt));
+  font-weight: var(--font-weight-semibold, 600);
+}
+
+:is([role="tab"], [data-tab], .tab):focus-visible {
+  z-index: 1;
+  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--outline-focus));
+  outline-offset: calc(-1 * var(--focus-ring-width, 2px));
+}
+
+:is([role="tab"], [data-tab], .tab):is(:disabled, [aria-disabled="true"]) {
+  opacity: var(--tabs-tab-disabled-opacity, 0.5);
+  cursor: not-allowed;
+}
+
+:is([role="tabpanel"], [data-tabpanel], .tabpanel) {
+  padding: var(--tabs-panel-padding, 1rem);
+  border: var(--tabs-panel-border, 1px solid var(--outline-subtle));
+  border-block-start: 0;
+  border-radius: 0 0 var(--tabs-panel-radius, var(--radius-md, 0.5rem)) var(--tabs-panel-radius, var(--radius-md, 0.5rem));
+  background: var(--tabs-panel-background, var(--surface-default));
+  color: var(--tabs-panel-color, inherit);
+}
+
+:is([role="tabpanel"], [data-tabpanel], .tabpanel)[hidden] {
+  display: none;
+}
+
+:is([role="tablist"], [data-tablist], .tablist)[aria-orientation="vertical"] {
+  flex-direction: column;
+  align-items: stretch;
+  overflow-x: visible;
+  border-block-end: 0;
+  border-inline-end: 1px solid var(--_tabs-border);
+}
+
+:is([role="tablist"], [data-tablist], .tablist)[aria-orientation="vertical"]
+  > :is([role="tab"], [data-tab], .tab) {
+  margin: 0 -1px 0 0;
+  border-block-end: 0;
+  border-inline-end: var(--tabs-indicator-width, 2px) solid transparent;
+  border-radius: var(--tabs-tab-radius, var(--radius-sm, 0.375rem)) 0 0 var(--tabs-tab-radius, var(--radius-sm, 0.375rem));
+  text-align: start;
+}
+
+:is([role="tablist"], [data-tablist], .tablist)[aria-orientation="vertical"]
+  > :is([role="tab"], [data-tab], .tab)[aria-selected="true"] {
+  border-inline-end-color: var(--tabs-tab-active-border, var(--accent));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is([role="tab"], [data-tab], .tab) {
+    transition: none;
+  }
+}

package/components/tooltip.css

@@ -0,0 +1,87 @@
+/**
+ * tooltip.css
+ *
+ * A small CSS-only text tooltip. The host wraps the trigger and reveals the
+ * generated bubble on pointer hover or keyboard focus.
+ */
+
+:is(tooltip[content], [data-tooltip], .tooltip[data-tooltip]) {
+  position: relative;
+  display: inline-flex;
+  inline-size: fit-content;
+}
+
+:is(tooltip[content], [data-tooltip], .tooltip[data-tooltip])::after {
+  position: absolute;
+  z-index: var(--tooltip-z-index, 1000);
+  inline-size: max-content;
+  max-inline-size: min(var(--tooltip-max-width, 28ch), 80vw);
+  padding: var(--tooltip-padding, 0.4rem 0.6rem);
+  border: var(--tooltip-border-width, 1px) solid var(--tooltip-border-color, var(--outline-overt, currentColor));
+  border-radius: var(--tooltip-radius, var(--radius-sm, 0.25rem));
+  background: var(--tooltip-background, var(--bedrock, #1f2937));
+  color: var(--tooltip-color, var(--text-on-bedrock, Canvas));
+  box-shadow: var(--tooltip-shadow, var(--shadow-sm, none));
+  font-size: var(--tooltip-font-size, var(--font-size-sm, 0.875rem));
+  font-weight: var(--font-weight-normal, 400);
+  line-height: var(--line-height-snug, 1.3);
+  text-align: start;
+  white-space: normal;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 120ms ease-out, transform 120ms ease-out, visibility 0s linear 120ms;
+}
+
+tooltip[content]::after { content: attr(content); }
+:is([data-tooltip], .tooltip[data-tooltip])::after { content: attr(data-tooltip); }
+
+:is(tooltip[content], [data-tooltip], .tooltip[data-tooltip]):is(:hover, :focus-within)::after {
+  opacity: 1;
+  visibility: visible;
+  transition-delay: var(--tooltip-delay, 150ms), var(--tooltip-delay, 150ms), 0s;
+}
+
+:is(tooltip[content], [data-tooltip], .tooltip[data-tooltip]):is(:not([place]), [place="top"])::after {
+  inset-block-end: calc(100% + var(--tooltip-offset, 0.5rem));
+  inset-inline-start: 50%;
+  transform: translate(-50%, 0.25rem);
+}
+
+:is(tooltip[content], [data-tooltip], .tooltip[data-tooltip]):is(:not([place]), [place="top"]):is(:hover, :focus-within)::after {
+  transform: translate(-50%, 0);
+}
+
+:is(tooltip[content], [data-tooltip], .tooltip[data-tooltip])[place="bottom"]::after {
+  inset-block-start: calc(100% + var(--tooltip-offset, 0.5rem));
+  inset-inline-start: 50%;
+  transform: translate(-50%, -0.25rem);
+}
+
+:is(tooltip[content], [data-tooltip], .tooltip[data-tooltip])[place="bottom"]:is(:hover, :focus-within)::after {
+  transform: translate(-50%, 0);
+}
+
+:is(tooltip[content], [data-tooltip], .tooltip[data-tooltip])[place="right"]::after {
+  inset-block-start: 50%;
+  inset-inline-start: calc(100% + var(--tooltip-offset, 0.5rem));
+  transform: translate(-0.25rem, -50%);
+}
+
+:is(tooltip[content], [data-tooltip], .tooltip[data-tooltip])[place="right"]:is(:hover, :focus-within)::after {
+  transform: translate(0, -50%);
+}
+
+:is(tooltip[content], [data-tooltip], .tooltip[data-tooltip])[place="left"]::after {
+  inset-block-start: 50%;
+  inset-inline-end: calc(100% + var(--tooltip-offset, 0.5rem));
+  transform: translate(0.25rem, -50%);
+}
+
+:is(tooltip[content], [data-tooltip], .tooltip[data-tooltip])[place="left"]:is(:hover, :focus-within)::after {
+  transform: translate(0, -50%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(tooltip[content], [data-tooltip], .tooltip[data-tooltip])::after { transition: none; }
+}

package/components/tooltips.css

@@ -0,0 +1,73 @@
+/**
+ * tooltips.css
+ *
+ * Structured tooltips with a stable absolute-positioning baseline. Anchor
+ * positioning can enhance this later without being required for correctness.
+ */
+
+:where([data-tooltip-host], .tooltip-host, :has(> :is(tooltip:not([content]), [data-rich-tooltip], .rich-tooltip))) {
+  position: relative;
+}
+
+:is(tooltip:not([content]), [data-rich-tooltip], .rich-tooltip) {
+  position: absolute;
+  z-index: var(--tooltip-z-index, 1000);
+  display: none;
+  inline-size: max-content;
+  max-inline-size: min(var(--tooltip-max-width, 32ch), 80vw);
+  padding: var(--tooltip-padding, 0.5rem 0.7rem);
+  border: var(--tooltip-border-width, 1px) solid var(--tooltip-border-color, var(--outline-overt, currentColor));
+  border-radius: var(--tooltip-radius, var(--radius-sm, 0.25rem));
+  background: var(--tooltip-background, var(--bedrock, #1f2937));
+  color: var(--tooltip-color, var(--text-on-bedrock, Canvas));
+  box-shadow: var(--tooltip-shadow, var(--shadow-sm, none));
+  font-size: var(--tooltip-font-size, var(--font-size-sm, 0.875rem));
+  font-weight: var(--font-weight-normal, 400);
+  line-height: var(--line-height-snug, 1.3);
+  text-align: start;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 120ms ease-out, transform 120ms ease-out, visibility 0s linear 120ms;
+}
+
+:where([data-tooltip-host], .tooltip-host, :has(> :is(tooltip:not([content]), [data-rich-tooltip], .rich-tooltip))):is(:hover, :focus-visible, :focus-within)
+  > :is(tooltip:not([content]), [data-rich-tooltip], .rich-tooltip) {
+  display: block;
+  opacity: 1;
+  visibility: visible;
+  transition-delay: var(--tooltip-delay, 150ms), var(--tooltip-delay, 150ms), 0s;
+}
+
+:is(tooltip:not([content]), [data-rich-tooltip], .rich-tooltip):is(:not([position], [data-position]), [position="top"], [data-position="top"], .tooltip-top) {
+  inset-block-end: calc(100% + var(--tooltip-offset, 0.5rem));
+  inset-inline-start: 50%;
+  transform: translate(-50%, 0.25rem);
+}
+
+:where([data-tooltip-host], .tooltip-host, :has(> :is(tooltip:not([content]), [data-rich-tooltip], .rich-tooltip))):is(:hover, :focus-visible, :focus-within)
+  > :is(tooltip:not([content]), [data-rich-tooltip], .rich-tooltip):is(:not([position], [data-position]), [position="top"], [data-position="top"], .tooltip-top) {
+  transform: translate(-50%, 0);
+}
+
+:is(tooltip:not([content]), [data-rich-tooltip], .rich-tooltip):is([position="bottom"], [data-position="bottom"], .tooltip-bottom) {
+  inset-block-start: calc(100% + var(--tooltip-offset, 0.5rem));
+  inset-inline-start: 50%;
+  transform: translate(-50%, -0.25rem);
+}
+
+:is(tooltip:not([content]), [data-rich-tooltip], .rich-tooltip):is([position="left"], [data-position="left"], .tooltip-left) {
+  inset-block-start: 50%;
+  inset-inline-end: calc(100% + var(--tooltip-offset, 0.5rem));
+  transform: translate(0.25rem, -50%);
+}
+
+:is(tooltip:not([content]), [data-rich-tooltip], .rich-tooltip):is([position="right"], [data-position="right"], .tooltip-right) {
+  inset-block-start: 50%;
+  inset-inline-start: calc(100% + var(--tooltip-offset, 0.5rem));
+  transform: translate(-0.25rem, -50%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(tooltip:not([content]), [data-rich-tooltip], .rich-tooltip) { transition: none; }
+}

package/components/view-transition.css

@@ -0,0 +1,73 @@
+/**
+ * View Transition defaults plus a progressively enhanced view router.
+ * Router host: view-transitions, view-transition, [data-view-transitions], .view-transitions
+ * Page host: view-page, [data-view-page], .view-page
+ */
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation-duration: var(--view-transition-duration, 400ms);
+  animation-timing-function: var(--view-transition-easing, cubic-bezier(0.45, 0, 0.55, 1));
+  animation-fill-mode: both;
+}
+
+::view-transition-old(root) {
+  animation-name: view-slide-to-left-fade-out;
+}
+
+::view-transition-new(root) {
+  animation-name: view-slide-from-right-fade-in;
+}
+
+::view-transition-group(hero-element) {
+  animation-timing-function: var(--view-transition-hero-easing, cubic-bezier(0.76, 0, 0.24, 1));
+}
+
+:is(view-transitions, view-transition, [data-view-transitions], .view-transitions) {
+  position: relative;
+  display: block;
+}
+
+:is(view-page, [data-view-page], .view-page) {
+  display: none;
+}
+
+:is(view-page, [data-view-page], .view-page)[active] {
+  display: block;
+}
+
+/* Before JavaScript initializes, hash targets provide view switching. */
+:is(view-transitions, view-transition, [data-view-transitions], .view-transitions):not(
+  [data-view-transitions-initialized="true"]
+):has(
+  :is(view-page, [data-view-page], .view-page):target
+) :is(view-page, [data-view-page], .view-page):target {
+  display: block;
+}
+
+/* A hash target wins over the server-rendered initial page before enhancement. */
+:is(view-transitions, view-transition, [data-view-transitions], .view-transitions):not(
+  [data-view-transitions-initialized="true"]
+):has(
+  :is(view-page, [data-view-page], .view-page):target
+) :is(view-page, [data-view-page], .view-page)[active]:not(:target) {
+  display: none;
+}
+
+@keyframes view-slide-to-left-fade-out {
+  from { opacity: 1; transform: translateX(0); }
+  to { opacity: 0; transform: translateX(-3rem); }
+}
+
+@keyframes view-slide-from-right-fade-in {
+  from { opacity: 0; transform: translateX(3rem); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-old(root),
+  ::view-transition-new(root),
+  ::view-transition-group(hero-element) {
+    animation: none;
+  }
+}

package/core/base.css

@@ -0,0 +1,62 @@
+/**
+ * base.css
+ *
+ * Foundational Styles, Design Tokens, & Global State
+ * ------------------------------------------------------------------------------
+ * This module contains CSS resets, global design tokens (using typed custom
+ * properties), and a global state manager for responsive breakpoints.
+ *
+ * @feature {@property} - Defines typed CSS variables for type safety and animation.
+ * @feature {Style Queries} - The <body> is a style container, providing a global
+ *   `--breakpoint-active` state that all components can react to.
+ * @feature {Modern Color} - Uses `oklch` for more perceptually uniform colors.
+ */
+
+/* Universal box-sizing reset and modern reset for base elements. */
+*, *::before, *::after { box-sizing: border-box; }
+body, h1, h2, h3, h4, p { margin: 0; }
+
+:root {
+  /*
+   * 1. Define typed design tokens.
+   * Using @property allows for animation and type-checking.
+   */
+  @property --theme-primary { syntax: '<color>'; inherits: true; initial-value: oklch(55% 0.15 240); }
+  @property --theme-bg { syntax: '<color>'; inherits: true; initial-value: oklch(98% 0.01 240); }
+  @property --theme-text { syntax: '<color>'; inherits: true; initial-value: oklch(20% 0.02 240); }
+
+  /* 2. Define breakpoint thresholds as design tokens. */
+  --bp-sm: 640px;
+  --bp-md: 768px;
+  --bp-lg: 1024px;
+  --bp-xl: 1280px;
+
+  /* Announce support for light/dark color schemes to the browser. */
+  color-scheme: light dark;
+}
+
+:root[data-color-scheme="light"] { color-scheme: light; }
+:root[data-color-scheme="dark"] { color-scheme: dark; }
+
+body {
+  /*
+   * 3. Set up the global breakpoint state machine.
+   * Make the body a container for style queries and initialize the state.
+   */
+  container-type: style;
+  --breakpoint-active: xl; /* Default to the largest state */
+
+  /* Apply base theme colors */
+  background-color: var(--theme-bg);
+  color: var(--theme-text);
+  font-family: var(--font-family-body, system-ui, sans-serif);
+  line-height: var(--line-height-body, 1.6);
+}
+
+
+/*
+ * 4. Use media queries for ONE purpose: updating the global state variable.
+ */
+@media (max-width: var(--bp-xl)) { body { --breakpoint-active: lg; } }
+@media (max-width: var(--bp-lg)) { body { --breakpoint-active: md; } }
+@media (max-width: var(--bp-md)) { body { --breakpoint-active: sm; } }