@halogen-ui/tokens 0.1.0

package/dist/theme.css

@@ -0,0 +1,859 @@
+/**
+ * Halogen Tailwind v4 theme — GENERATED. Do not edit.
+ * Source: packages/tokens/src/  ·  Rebuild: pnpm --filter @halogen-ui/tokens build
+ *
+ * Import AFTER tokens.css:
+ *   @import '@halogen-ui/tokens/tokens.css';
+ *   @import '@halogen-ui/tokens/theme.css';
+ */
+
+/**
+ * @theme inline — not plain @theme.
+ *
+ * Plain @theme creates an indirection: Tailwind declares
+ * --color-line-focus: var(--halogen-line-focus) on :root and utilities
+ * reference ar(--color-line-focus). Through Tailwind's Vite plugin those
+ * theme variables are never emitted, so every utility resolves to an empty
+ * custom property and silently falls back to an inherited value — a button with
+ * the wrong text color and an invisible focus ring, with no error anywhere.
+ *
+ * inline substitutes the value into the utility instead:
+ * outline-color: var(--halogen-line-focus). One variable, resolved at use
+ * site, which is also what makes per-theme switching work — the theme swaps
+ * --halogen-* and every utility follows.
+ */
+@theme inline {
+  /* Reset every namespace Halogen owns. This is the enforcement mechanism:
+     an off-token utility does not fail review, it fails to compile. */
+  --color-*: initial;
+  --spacing-*: initial;
+  --radius-*: initial;
+  --font-*: initial;
+  --text-*: initial;
+  --font-weight-*: initial;
+  --tracking-*: initial;
+  --leading-*: initial;
+  --shadow-*: initial;
+  --ease-*: initial;
+  --breakpoint-*: initial;
+  --container-*: initial;
+  --transition-duration-*: initial;
+  --aspect-*: initial;
+  --z-index-*: initial;
+
+  /* Abolished: reset with nothing declared back, so these cannot compile at all.
+     The aesthetic direction rejects blur/glassmorphism and keyframe animation;
+     this makes that a compiler error rather than a review comment. */
+  --blur-*: initial;
+
+  /* Bounded: reset, then reopened to an explicit whitelist and nothing more. */
+  --animate-*: initial;
+  --animate-spin: halogen-spin var(--halogen-duration-spin) linear infinite;
+  /* The second entry in this namespace, and argued for like the first: a
+     skeleton is a loading indicator, and a placeholder that never moves reads
+     as broken layout rather than as pending content. Still not a license for
+     animate-bounce. */
+  --animate-pulse: halogen-pulse var(--halogen-duration-pulse) var(--halogen-easing-move) infinite;
+
+  /* ---- Semantic colors. These are what components use. ----
+     Gradients are deliberately absent: a gradient is a background-IMAGE, and
+     putting one in the color namespace produces
+     background-color: linear-gradient(...), which is invalid CSS. The
+     declaration is dropped, the utility compiles, and nothing renders. Every
+     Halogen gradient was dead from Phase 1 until this was found. */
+  --color-surface-ground: var(--halogen-surface-ground);
+  --color-surface-raised: var(--halogen-surface-raised);
+  --color-surface-overlay: var(--halogen-surface-overlay);
+  --color-surface-floating: var(--halogen-surface-floating);
+  --color-surface-modal: var(--halogen-surface-modal);
+  --color-surface-subtle: var(--halogen-surface-subtle);
+  --color-surface-field: var(--halogen-surface-field);
+  --color-surface-subtle-hover: var(--halogen-surface-subtle-hover);
+  --color-surface-subtle-active: var(--halogen-surface-subtle-active);
+  --color-surface-state-hover: var(--halogen-surface-state-hover);
+  --color-surface-state-active: var(--halogen-surface-state-active);
+  --color-surface-selection: var(--halogen-surface-selection);
+  --color-surface-knob: var(--halogen-surface-knob);
+  --color-surface-inverse: var(--halogen-surface-inverse);
+  --color-surface-accent: var(--halogen-surface-accent);
+  --color-surface-accent-hover: var(--halogen-surface-accent-hover);
+  --color-surface-accent-active: var(--halogen-surface-accent-active);
+  --color-surface-accent-subtle: var(--halogen-surface-accent-subtle);
+  --color-surface-accent-subtle-hover: var(--halogen-surface-accent-subtle-hover);
+  --color-surface-disabled: var(--halogen-surface-disabled);
+  --color-surface-scrim: var(--halogen-surface-scrim);
+  --color-ink-primary: var(--halogen-ink-primary);
+  --color-ink-secondary: var(--halogen-ink-secondary);
+  --color-ink-tertiary: var(--halogen-ink-tertiary);
+  --color-ink-placeholder: var(--halogen-ink-placeholder);
+  --color-ink-disabled: var(--halogen-ink-disabled);
+  --color-ink-accent: var(--halogen-ink-accent);
+  --color-ink-on-accent-subtle: var(--halogen-ink-on-accent-subtle);
+  --color-ink-on-accent: var(--halogen-ink-on-accent);
+  --color-ink-on-gradient: var(--halogen-ink-on-gradient);
+  --color-ink-on-scrim: var(--halogen-ink-on-scrim);
+  --color-ink-on-scrim-secondary: var(--halogen-ink-on-scrim-secondary);
+  --color-ink-inverse: var(--halogen-ink-inverse);
+  --color-ink-link: var(--halogen-ink-link);
+  --color-ink-link-hover: var(--halogen-ink-link-hover);
+  --color-line-subtle: var(--halogen-line-subtle);
+  --color-line-divider: var(--halogen-line-divider);
+  --color-line-control: var(--halogen-line-control);
+  --color-line-strong: var(--halogen-line-strong);
+  --color-line-focus: var(--halogen-line-focus);
+  --color-line-focus-glow: var(--halogen-line-focus-glow);
+  --color-line-accent: var(--halogen-line-accent);
+  --color-line-disabled: var(--halogen-line-disabled);
+  --color-line-edge-highlight: var(--halogen-line-edge-highlight);
+  --color-status-success-solid: var(--halogen-status-success-solid);
+  --color-status-success-on-solid: var(--halogen-status-success-on-solid);
+  --color-status-success-ink: var(--halogen-status-success-ink);
+  --color-status-success-surface: var(--halogen-status-success-surface);
+  --color-status-success-line: var(--halogen-status-success-line);
+  --color-status-warning-solid: var(--halogen-status-warning-solid);
+  --color-status-warning-on-solid: var(--halogen-status-warning-on-solid);
+  --color-status-warning-ink: var(--halogen-status-warning-ink);
+  --color-status-warning-surface: var(--halogen-status-warning-surface);
+  --color-status-warning-line: var(--halogen-status-warning-line);
+  --color-status-error-solid: var(--halogen-status-error-solid);
+  --color-status-error-on-solid: var(--halogen-status-error-on-solid);
+  --color-status-error-ink: var(--halogen-status-error-ink);
+  --color-status-error-surface: var(--halogen-status-error-surface);
+  --color-status-error-line: var(--halogen-status-error-line);
+  --color-status-info-solid: var(--halogen-status-info-solid);
+  --color-status-info-on-solid: var(--halogen-status-info-on-solid);
+  --color-status-info-ink: var(--halogen-status-info-ink);
+  --color-status-info-surface: var(--halogen-status-info-surface);
+  --color-status-info-line: var(--halogen-status-info-line);
+  --color-viz-1: var(--halogen-viz-1);
+  --color-viz-2: var(--halogen-viz-2);
+  --color-viz-3: var(--halogen-viz-3);
+  --color-viz-4: var(--halogen-viz-4);
+  --color-viz-5: var(--halogen-viz-5);
+  --color-viz-6: var(--halogen-viz-6);
+  --color-viz-7: var(--halogen-viz-7);
+  --color-viz-grid: var(--halogen-viz-grid);
+  --color-viz-axis: var(--halogen-viz-axis);
+  --color-viz-sequential-0: var(--halogen-viz-sequential-0);
+  --color-viz-sequential-1: var(--halogen-viz-sequential-1);
+  --color-viz-sequential-2: var(--halogen-viz-sequential-2);
+  --color-viz-sequential-3: var(--halogen-viz-sequential-3);
+  --color-viz-sequential-4: var(--halogen-viz-sequential-4);
+  --color-viz-diverging-neg-2: var(--halogen-viz-diverging-neg-2);
+  --color-viz-diverging-neg-1: var(--halogen-viz-diverging-neg-1);
+  --color-viz-diverging-0: var(--halogen-viz-diverging-0);
+  --color-viz-diverging-pos-1: var(--halogen-viz-diverging-pos-1);
+  --color-viz-diverging-pos-2: var(--halogen-viz-diverging-pos-2);
+  --color-elevation-1: var(--halogen-elevation-1);
+  --color-elevation-2: var(--halogen-elevation-2);
+  --color-elevation-3: var(--halogen-elevation-3);
+  --color-elevation-4: var(--halogen-elevation-4);
+
+  /* ---- Primitive escape hatch. Marketing surfaces only; never product UI. ---- */
+  --color-neutral-0: var(--halogen-color-neutral-0);
+  --color-neutral-25: var(--halogen-color-neutral-25);
+  --color-neutral-50: var(--halogen-color-neutral-50);
+  --color-neutral-100: var(--halogen-color-neutral-100);
+  --color-neutral-200: var(--halogen-color-neutral-200);
+  --color-neutral-300: var(--halogen-color-neutral-300);
+  --color-neutral-400: var(--halogen-color-neutral-400);
+  --color-neutral-450: var(--halogen-color-neutral-450);
+  --color-neutral-500: var(--halogen-color-neutral-500);
+  --color-neutral-550: var(--halogen-color-neutral-550);
+  --color-neutral-600: var(--halogen-color-neutral-600);
+  --color-neutral-700: var(--halogen-color-neutral-700);
+  --color-neutral-800: var(--halogen-color-neutral-800);
+  --color-neutral-850: var(--halogen-color-neutral-850);
+  --color-neutral-900: var(--halogen-color-neutral-900);
+  --color-neutral-950: var(--halogen-color-neutral-950);
+  --color-neutral-1000: var(--halogen-color-neutral-1000);
+  --color-state-hover-dark: var(--halogen-color-state-hover-dark);
+  --color-state-active-dark: var(--halogen-color-state-active-dark);
+  --color-state-hover-light: var(--halogen-color-state-hover-light);
+  --color-state-active-light: var(--halogen-color-state-active-light);
+  --color-state-focus-glow: var(--halogen-color-state-focus-glow);
+  --color-state-selection-dark: var(--halogen-color-state-selection-dark);
+  --color-state-selection-light: var(--halogen-color-state-selection-light);
+  --color-heat-dark-0: var(--halogen-color-heat-dark-0);
+  --color-heat-dark-1: var(--halogen-color-heat-dark-1);
+  --color-heat-dark-2: var(--halogen-color-heat-dark-2);
+  --color-heat-dark-3: var(--halogen-color-heat-dark-3);
+  --color-heat-dark-4: var(--halogen-color-heat-dark-4);
+  --color-heat-light-0: var(--halogen-color-heat-light-0);
+  --color-heat-light-1: var(--halogen-color-heat-light-1);
+  --color-heat-light-2: var(--halogen-color-heat-light-2);
+  --color-heat-light-3: var(--halogen-color-heat-light-3);
+  --color-heat-light-4: var(--halogen-color-heat-light-4);
+  --color-orange-base: var(--halogen-color-orange-base);
+  --color-orange-bright: var(--halogen-color-orange-bright);
+  --color-orange-dim: var(--halogen-color-orange-dim);
+  --color-orange-text-light: var(--halogen-color-orange-text-light);
+  --color-orange-mark-light: var(--halogen-color-orange-mark-light);
+  --color-orange-surface-dark: var(--halogen-color-orange-surface-dark);
+  --color-orange-surface-light: var(--halogen-color-orange-surface-light);
+  --color-orange-surface-dark-hover: var(--halogen-color-orange-surface-dark-hover);
+  --color-orange-surface-light-hover: var(--halogen-color-orange-surface-light-hover);
+  --color-orange-border-dark: var(--halogen-color-orange-border-dark);
+  --color-orange-border-light: var(--halogen-color-orange-border-light);
+  --color-orange-text-light-strong: var(--halogen-color-orange-text-light-strong);
+  --color-orange-text-on-chip-light: var(--halogen-color-orange-text-on-chip-light);
+  --color-coral-base: var(--halogen-color-coral-base);
+  --color-coral-bright: var(--halogen-color-coral-bright);
+  --color-coral-dim: var(--halogen-color-coral-dim);
+  --color-coral-text-light: var(--halogen-color-coral-text-light);
+  --color-coral-mark-light: var(--halogen-color-coral-mark-light);
+  --color-amber-base: var(--halogen-color-amber-base);
+  --color-amber-bright: var(--halogen-color-amber-bright);
+  --color-amber-dim: var(--halogen-color-amber-dim);
+  --color-amber-text-light: var(--halogen-color-amber-text-light);
+  --color-amber-mark-light: var(--halogen-color-amber-mark-light);
+  --color-yellow-base: var(--halogen-color-yellow-base);
+  --color-yellow-bright: var(--halogen-color-yellow-bright);
+  --color-yellow-dim: var(--halogen-color-yellow-dim);
+  --color-yellow-text-light: var(--halogen-color-yellow-text-light);
+  --color-yellow-mark-light: var(--halogen-color-yellow-mark-light);
+  --color-peach-base: var(--halogen-color-peach-base);
+  --color-peach-bright: var(--halogen-color-peach-bright);
+  --color-peach-dim: var(--halogen-color-peach-dim);
+  --color-peach-text-light: var(--halogen-color-peach-text-light);
+  --color-peach-mark-light: var(--halogen-color-peach-mark-light);
+  --color-pink-base: var(--halogen-color-pink-base);
+  --color-pink-bright: var(--halogen-color-pink-bright);
+  --color-pink-dim: var(--halogen-color-pink-dim);
+  --color-pink-text-light: var(--halogen-color-pink-text-light);
+  --color-pink-mark-light: var(--halogen-color-pink-mark-light);
+  --color-teal-base: var(--halogen-color-teal-base);
+  --color-teal-bright: var(--halogen-color-teal-bright);
+  --color-teal-dim: var(--halogen-color-teal-dim);
+  --color-teal-text-light: var(--halogen-color-teal-text-light);
+  --color-teal-mark-light: var(--halogen-color-teal-mark-light);
+  --color-teal-surface-dark: var(--halogen-color-teal-surface-dark);
+  --color-teal-surface-light: var(--halogen-color-teal-surface-light);
+  --color-teal-surface-dark-hover: var(--halogen-color-teal-surface-dark-hover);
+  --color-teal-surface-light-hover: var(--halogen-color-teal-surface-light-hover);
+  --color-teal-border-dark: var(--halogen-color-teal-border-dark);
+  --color-teal-border-light: var(--halogen-color-teal-border-light);
+  --color-teal-text-light-strong: var(--halogen-color-teal-text-light-strong);
+  --color-teal-text-on-chip-light: var(--halogen-color-teal-text-on-chip-light);
+  --color-success-solid: var(--halogen-color-success-solid);
+  --color-success-on-solid: var(--halogen-color-success-on-solid);
+  --color-success-surface-dark: var(--halogen-color-success-surface-dark);
+  --color-success-surface-light: var(--halogen-color-success-surface-light);
+  --color-success-text-dark: var(--halogen-color-success-text-dark);
+  --color-success-text-light: var(--halogen-color-success-text-light);
+  --color-success-border-dark: var(--halogen-color-success-border-dark);
+  --color-success-border-light: var(--halogen-color-success-border-light);
+  --color-warning-solid: var(--halogen-color-warning-solid);
+  --color-warning-on-solid: var(--halogen-color-warning-on-solid);
+  --color-warning-surface-dark: var(--halogen-color-warning-surface-dark);
+  --color-warning-surface-light: var(--halogen-color-warning-surface-light);
+  --color-warning-text-dark: var(--halogen-color-warning-text-dark);
+  --color-warning-text-light: var(--halogen-color-warning-text-light);
+  --color-warning-border-dark: var(--halogen-color-warning-border-dark);
+  --color-warning-border-light: var(--halogen-color-warning-border-light);
+  --color-error-solid: var(--halogen-color-error-solid);
+  --color-error-on-solid: var(--halogen-color-error-on-solid);
+  --color-error-surface-dark: var(--halogen-color-error-surface-dark);
+  --color-error-surface-light: var(--halogen-color-error-surface-light);
+  --color-error-text-dark: var(--halogen-color-error-text-dark);
+  --color-error-text-light: var(--halogen-color-error-text-light);
+  --color-error-border-dark: var(--halogen-color-error-border-dark);
+  --color-error-border-light: var(--halogen-color-error-border-light);
+
+  /* ---- Spacing ---- */
+  --spacing-0: var(--halogen-space-0);
+  --spacing-1: var(--halogen-space-1);
+  --spacing-2: var(--halogen-space-2);
+  --spacing-3: var(--halogen-space-3);
+  --spacing-4: var(--halogen-space-4);
+  --spacing-5: var(--halogen-space-5);
+  --spacing-6: var(--halogen-space-6);
+  --spacing-8: var(--halogen-space-8);
+  --spacing-10: var(--halogen-space-10);
+  --spacing-12: var(--halogen-space-12);
+  --spacing-16: var(--halogen-space-16);
+  --spacing-20: var(--halogen-space-20);
+  --spacing-24: var(--halogen-space-24);
+  --spacing-32: var(--halogen-space-32);
+  --spacing-40: var(--halogen-space-40);
+  --spacing-48: var(--halogen-space-48);
+  --spacing-64: var(--halogen-space-64);
+  --spacing-80: var(--halogen-space-80);
+  --spacing-px: var(--halogen-space-px);
+  --spacing-half: var(--halogen-space-half);
+  --spacing-target-min: var(--halogen-target-min);
+  --spacing-target-touch: var(--halogen-target-touch);
+  --spacing-control-sm: var(--halogen-control-sm);
+  --spacing-control-md: var(--halogen-control-md);
+  --spacing-control-lg: var(--halogen-control-lg);
+  --spacing-control-xl: var(--halogen-control-xl);
+  --spacing-icon-sm: var(--halogen-icon-sm);
+  --spacing-icon-md: var(--halogen-icon-md);
+  --spacing-icon-lg: var(--halogen-icon-lg);
+
+  /* ---- Radius ---- */
+  --radius-none: var(--halogen-radius-none);
+  --radius-xs: var(--halogen-radius-xs);
+  --radius-sm: var(--halogen-radius-sm);
+  --radius-md: var(--halogen-radius-md);
+  --radius-lg: var(--halogen-radius-lg);
+  --radius-xl: var(--halogen-radius-xl);
+  --radius-2xl: var(--halogen-radius-2xl);
+  --radius-full: var(--halogen-radius-full);
+
+  /* ---- Type ---- */
+  --font-sans: var(--halogen-font-family-sans);
+  --font-mono: var(--halogen-font-family-mono);
+  --text-2xs: var(--halogen-font-size-2xs);
+  --text-2xs--line-height: 16px;
+  --text-2xs--letter-spacing: 0.015em;
+  --text-xs: var(--halogen-font-size-xs);
+  --text-xs--line-height: 16px;
+  --text-xs--letter-spacing: 0.005em;
+  --text-sm: var(--halogen-font-size-sm);
+  --text-sm--line-height: 20px;
+  --text-sm--letter-spacing: 0.01em;
+  --text-base: var(--halogen-font-size-base);
+  --text-base--line-height: 20px;
+  --text-base--letter-spacing: 0em;
+  --text-md: var(--halogen-font-size-md);
+  --text-md--line-height: 24px;
+  --text-md--letter-spacing: 0em;
+  --text-lg: var(--halogen-font-size-lg);
+  --text-lg--line-height: 28px;
+  --text-lg--letter-spacing: -0.005em;
+  --text-xl: var(--halogen-font-size-xl);
+  --text-xl--line-height: 28px;
+  --text-xl--letter-spacing: -0.01em;
+  --text-display-xs: var(--halogen-display-size-xs);
+  --text-display-xs--line-height: 1.25;
+  --text-display-xs--letter-spacing: -0.01em;
+  --text-display-sm: var(--halogen-display-size-sm);
+  --text-display-sm--line-height: 1.2;
+  --text-display-sm--letter-spacing: -0.015em;
+  --text-display-md: var(--halogen-display-size-md);
+  --text-display-md--line-height: 1.1;
+  --text-display-md--letter-spacing: -0.02em;
+  --text-display-lg: var(--halogen-display-size-lg);
+  --text-display-lg--line-height: 1.05;
+  --text-display-lg--letter-spacing: -0.025em;
+  --text-display-xl: var(--halogen-display-size-xl);
+  --text-display-xl--line-height: 1;
+  --text-display-xl--letter-spacing: -0.03em;
+  --text-display-2xl: var(--halogen-display-size-2xl);
+  --text-display-2xl--line-height: 0.95;
+  --text-display-2xl--letter-spacing: -0.035em;
+  --font-weight-regular: var(--halogen-font-weight-regular);
+  --font-weight-medium: var(--halogen-font-weight-medium);
+  --font-weight-semibold: var(--halogen-font-weight-semibold);
+  --font-weight-bold: var(--halogen-font-weight-bold);
+  --tracking-wider: var(--halogen-tracking-wider);
+  --tracking-wide: var(--halogen-tracking-wide);
+  --tracking-normal: var(--halogen-tracking-normal);
+  --tracking-tight: var(--halogen-tracking-tight);
+  --tracking-tighter: var(--halogen-tracking-tighter);
+  --tracking-tightest: var(--halogen-tracking-tightest);
+  --tracking-display: var(--halogen-tracking-display);
+  --tracking-display-tight: var(--halogen-tracking-display-tight);
+  --leading-none: var(--halogen-line-height-none);
+  --leading-display-2xl: var(--halogen-line-height-display-2xl);
+  --leading-display-xl: var(--halogen-line-height-display-xl);
+  --leading-display-lg: var(--halogen-line-height-display-lg);
+  --leading-display-md: var(--halogen-line-height-display-md);
+  --leading-display-sm: var(--halogen-line-height-display-sm);
+  --leading-display-xs: var(--halogen-line-height-display-xs);
+  --leading-snug: var(--halogen-line-height-snug);
+  --leading-normal: var(--halogen-line-height-normal);
+  --leading-relaxed: var(--halogen-line-height-relaxed);
+
+  /* ---- Elevation & motion ---- */
+  --shadow-sm: var(--halogen-shadow-sm);
+  --shadow-md: var(--halogen-shadow-md);
+  --shadow-lg: var(--halogen-shadow-lg);
+  --shadow-none: var(--halogen-shadow-none);
+  --ease-enter: var(--halogen-easing-enter);
+  --ease-exit: var(--halogen-easing-exit);
+  --ease-move: var(--halogen-easing-move);
+  --ease-overshoot: var(--halogen-easing-overshoot);
+  --ease-linear: var(--halogen-easing-linear);
+  --transition-duration-instant: var(--halogen-duration-instant);
+  --transition-duration-press: var(--halogen-duration-press);
+  --transition-duration-fast: var(--halogen-duration-fast);
+  --transition-duration-base: var(--halogen-duration-base);
+  --transition-duration-slow: var(--halogen-duration-slow);
+  --transition-duration-slower: var(--halogen-duration-slower);
+  --transition-duration-deliberate: var(--halogen-duration-deliberate);
+
+  /* ---- Breakpoints ----
+     LITERAL values, deliberately, not var() references.
+     @theme inline substitutes the declared value straight into the media
+     query, and @media (width >= var(--x)) is invalid CSS that never matches.
+     Emitting a reference here silently kills every responsive utility in the
+     system: sm:, md:, lg: all stop applying, with no error anywhere. */
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+
+  /* ---- Containers ---- */
+  --container-prose: var(--halogen-container-prose);
+  --container-default: var(--halogen-container-default);
+  --container-wide: var(--halogen-container-wide);
+  --container-measure: var(--halogen-measure-prose);
+  --container-measure-narrow: var(--halogen-measure-narrow);
+
+  /* ---- Stacking order ---- */
+  --z-index-base: var(--halogen-layer-base);
+  --z-index-raised: var(--halogen-layer-raised);
+  --z-index-sticky: var(--halogen-layer-sticky);
+  --z-index-overlay: var(--halogen-layer-overlay);
+  --z-index-modal: var(--halogen-layer-modal);
+  --z-index-popover: var(--halogen-layer-popover);
+  --z-index-toast: var(--halogen-layer-toast);
+  --z-index-tooltip: var(--halogen-layer-tooltip);
+  --aspect-video: var(--halogen-aspect-video);
+  --aspect-square: var(--halogen-aspect-square);
+  --aspect-wide: var(--halogen-aspect-wide);
+}
+
+/**
+ * The surface transition.
+ *
+ * Every Tailwind transition utility — including 	ransition-colors — animates
+ * outline-color, which means the focus ring FADES IN over the transition
+ * duration. A keyboard user needs immediate confirmation of where focus landed;
+ * a ring that eases in reads as lag, and it is the kind of thing that never
+ * shows up in a screenshot.
+ *
+ * So Halogen transitions the three properties a control actually needs and
+ * leaves the focus indicator instantaneous. Named for what it does, not for the
+ * property list, so components do not have to remember why.
+ */
+@utility transition-surface {
+  transition-property: color, background-color, border-color, scale;
+  transition-timing-function: var(--halogen-easing-enter);
+  transition-duration: var(--halogen-duration-fast);
+}
+
+/**
+ * The push.
+ *
+ * Composes onto transition-surface rather than replacing it, so a control keeps
+ * its color transitions and gains a press. Only the :active state is declared
+ * here; the return journey is whatever transition-surface already set, which is
+ * what produces the asymmetry — 70ms down, 120ms back.
+ *
+ * Under reduced motion --press-scale resolves to 1 and this becomes inert,
+ * while the active background color still confirms the press.
+ */
+/**
+ * Press feedback.
+ *
+ * Put this on the shape a person sees, which is not always the element that
+ * receives the event: a removable chip is one pill holding two buttons, and a
+ * press on either half must move the whole pill. That works because :active
+ * propagates to ancestors — measured, because the obvious alternative does not.
+ * :has(:active) compiles fine and never matches in Chrome, so a shell styled
+ * that way silently does nothing.
+ */
+@utility press {
+  &:active {
+    scale: var(--halogen-press-scale);
+    transition-duration: var(--halogen-duration-press);
+  }
+}
+
+/**
+ * The icon reel. Slot-machine swap on hover.
+ *
+ * Expects exactly two children: the resting glyph and its twin. The twin sits
+ * one window below, absolutely positioned so it adds no height, and both travel
+ * together when the enclosing .group is hovered.
+ *
+ * Hover only — never focus. A keyboard user tabbing along a toolbar would
+ * otherwise set every icon spinning, which is motion they did not ask for and
+ * cannot avoid.
+ */
+/**
+ * The seam between an addon and the field it belongs to.
+ *
+ * Both carry their own `px-3`, so a prefix sat **24px** from the text it
+ * introduces: "https://" and the URL after it read as two controls that happen
+ * to share a border, which is the one thing an input group exists not to be.
+ *
+ * The group owns the seam, the same way it already owns the border, the radius
+ * and the focus ring. The addon keeps its outer padding — that gap is against
+ * the border and is correct — and the field drops the padding on the side where
+ * an addon meets it, leaving one 12px gap instead of two.
+ *
+ * Only the leading side. A trailing addon is usually `divided`, and there the
+ * field's own padding is what keeps the value off the rule.
+ */
+@utility input-seam {
+  & > * + input {
+    padding-inline-start: var(--halogen-space-0);
+  }
+}
+
+@utility reel {
+  position: relative;
+  display: block;
+  overflow: hidden;
+
+  /* ease-move, not ease-enter. The enter curve is heavily front-loaded, which
+     is right for something arriving but wrong for something travelling: the
+     glyph jumped and settled, and the roll itself was over in about 30ms —
+     legible only frame by frame. An in-out curve spends the duration on the
+     journey, which is the whole point of a reel. */
+  & > * {
+    display: block;
+    transition: translate var(--halogen-duration-slow) var(--halogen-easing-move);
+  }
+  & > :last-child {
+    position: absolute;
+    inset: 0;
+    translate: 0 var(--halogen-reel-travel);
+  }
+
+  .group:hover & > :first-child {
+    translate: 0 calc(-1 * var(--halogen-reel-travel));
+  }
+  .group:hover & > :last-child {
+    translate: 0 0;
+  }
+}
+
+/**
+ * A focus ring that fades in, for surfaces you settle into rather than pass
+ * through.
+ *
+ * Buttons keep an instantaneous ring: focus moves through a toolbar quickly and
+ * a keyboard user needs to know where it landed with no delay. A text field is
+ * the opposite — focus there is a sustained state you are about to type into,
+ * and a ring that eases in reads as the field waking up rather than as lag.
+ *
+ * The outline is always present and transparent, so only its color animates;
+ * transitioning width would make the ring jump. Under reduced motion the
+ * duration collapses and the ring appears instantly.
+ */
+/* ---- Named state variants ----
+   Radix reports component state through data-state. Without names for those,
+   every component reaches for an arbitrary variant like data-[state=checked]:,
+   which the no-arbitrary-values rule rejects and which reads as a selector
+   rather than as a state. Naming them once here keeps component code legible
+   and the rule strict. */
+@custom-variant checked (&[data-state='checked']);
+@custom-variant unchecked (&[data-state='unchecked']);
+/* A selected tab. Radix Tabs reports data-state="active", NOT "checked" — and
+   Tabs was styled with checked:, so the selected tab had a transparent underline
+   in the underline variant, no fill in the pill variant, and the same ink as its
+   neighbours. Every rule compiled; none of them ever matched, so the strip
+   shipped with no visible selected state at all. */
+@custom-variant active (&[data-state='active']);
+@custom-variant open (&[data-state='open']);
+@custom-variant closed (&[data-state='closed']);
+/* A checkbox's third state. Radix reports it as data-state="indeterminate",
+   and without a name for it every tri-state checkbox reaches for an arbitrary
+   variant — which is exactly the shape the rule exists to reject. */
+@custom-variant indeterminate (&[data-state='indeterminate']);
+/* Radix highlights the active menu/select option with data-highlighted rather
+   than :hover, because the highlight follows the keyboard as well as the
+   pointer. */
+@custom-variant highlighted (&[data-highlighted]);
+/* A select trigger showing its placeholder rather than a chosen value. Radix
+   marks it with data-placeholder, and without a name the only way to style it
+   is an arbitrary variant. */
+@custom-variant placeholder-shown (&[data-placeholder]);
+/* A toggle button's pressed state. Radix reports it as data-state="on"; a
+   native toggle uses aria-pressed. Both are named here so a component does not
+   have to know which kind it is. */
+@custom-variant pressed (&[data-state='on'], &[aria-pressed='true']);
+/* A group whose field inside it is invalid. The border belongs to the group, so
+   the group is what has to react. */
+@custom-variant has-aria-invalid (&:has([aria-invalid='true']));
+
+/* ---- Brand gradients ----
+   Utilities rather than theme colors, because they set background-image.
+   Five named blends and no ad-hoc ones: the aesthetic direction allows them on
+   heroes, feature surfaces, progress fills and decorative fields, and nowhere
+   else. no-gradient-on-controls enforces the second half of that. */
+@utility gradient-ember {
+  background-image: var(--halogen-gradient-ember);
+}
+
+@utility gradient-solar {
+  background-image: var(--halogen-gradient-solar);
+}
+
+@utility gradient-dusk {
+  background-image: var(--halogen-gradient-dusk);
+}
+
+@utility gradient-glow {
+  background-image: var(--halogen-gradient-glow);
+}
+
+@utility gradient-ground {
+  background-image: var(--halogen-gradient-ground);
+}
+
+/**
+ * Floating elevation.
+ *
+ * Phase 1 specified an inset top highlight here, on the theory that a shadow is
+ * nearly invisible on a near-black ground so light should appear to catch the
+ * top edge instead. Built in Phase 3 and reversed on sight: on a panel with a
+ * border it reads as a stray line across the top of every dialog, not as light.
+ * The border and the surface change carry the elevation on their own.
+ */
+/**
+ * A panel nested inside a card: elevation 2.
+ *
+ * Reads as a no-op in the dark theme and as a real shadow in the light one,
+ * because that is where the fill ramp has run out. A component asks for
+ * "elevation 2" and the theme decides how to express it.
+ */
+@utility elevated-raised {
+  box-shadow: var(--halogen-elevation-2);
+}
+
+@utility elevated-floating {
+  box-shadow: var(--halogen-shadow-md);
+}
+
+@utility elevated-modal {
+  box-shadow: var(--halogen-shadow-lg);
+}
+
+/**
+ * The flat scrim that makes light text legal over a gradient.
+ *
+ * Flat, never blurred: a blurred scrim makes the contrast of whatever sits
+ * above it impossible to verify, and the aesthetic direction rejects the look.
+ * The opacity is a token because it is a measured accessibility figure rather
+ * than a taste call - see SCRIM_OPACITY.
+ */
+@utility gradient-scrim {
+  background-color: color-mix(
+    in srgb,
+    var(--halogen-surface-scrim) calc(var(--halogen-scrim-opacity) * 100%),
+    transparent
+  );
+}
+
+/**
+ * The modal scrim. Fade only — a scrim that slides reads as a mistake.
+ */
+@utility overlay-scrim {
+  /* The only backdrop-filter in Halogen, and deliberately the only one.
+     The blur namespace stays abolished so no component can reach for
+     backdrop-blur-md; a modal scrim gets exactly one blur, from a token. */
+  backdrop-filter: blur(var(--halogen-scrim-blur));
+
+  &[data-state='open'] {
+    animation: halogen-fade-in var(--halogen-duration-fade) var(--halogen-easing-enter);
+  }
+  &[data-state='closed'] {
+    animation: halogen-fade-out var(--halogen-duration-fade) var(--halogen-easing-exit);
+  }
+}
+
+/**
+ * A centered panel: dialogs. Fades and settles in from fractionally small.
+ * Exit is faster than entry, per the system enter/exit rule.
+ */
+@utility overlay-panel {
+  &[data-state='open'] {
+    animation:
+      halogen-fade-in var(--halogen-duration-fade) var(--halogen-easing-enter),
+      halogen-zoom-in var(--halogen-duration-base) var(--halogen-easing-enter);
+  }
+  &[data-state='closed'] {
+    animation:
+      halogen-fade-out var(--halogen-duration-fade) var(--halogen-easing-exit),
+      halogen-zoom-out var(--halogen-duration-fast) var(--halogen-easing-exit);
+  }
+}
+
+/**
+ * An anchored surface: popover, tooltip, menu.
+ *
+ * Enters from the direction of its trigger, which Radix reports as data-side.
+ * A popover placed below its trigger starts slightly above and travels down, so
+ * it reads as emerging from the thing that opened it rather than arriving from
+ * nowhere.
+ */
+@utility overlay-pop {
+  --halogen-overlay-x: 0px;
+  --halogen-overlay-y: 0px;
+
+  &[data-side='top'] { --halogen-overlay-y: var(--halogen-travel-ui); }
+  &[data-side='bottom'] { --halogen-overlay-y: calc(-1 * var(--halogen-travel-ui)); }
+  &[data-side='left'] { --halogen-overlay-x: var(--halogen-travel-ui); }
+  &[data-side='right'] { --halogen-overlay-x: calc(-1 * var(--halogen-travel-ui)); }
+
+  &[data-state='open'],
+  &[data-state='delayed-open'] {
+    animation:
+      halogen-fade-in var(--halogen-duration-fade) var(--halogen-easing-enter),
+      halogen-slide-in var(--halogen-duration-fast) var(--halogen-easing-enter);
+  }
+  &[data-state='closed'] {
+    animation:
+      halogen-fade-out var(--halogen-duration-fade) var(--halogen-easing-exit),
+      halogen-slide-out var(--halogen-duration-fast) var(--halogen-easing-exit);
+  }
+}
+
+/**
+ * An edge panel: the sheet. Travels its own full width or height, so the
+ * distance is a percentage rather than the 8px product-UI travel budget — the
+ * panel IS the movement, not a nudge on top of one.
+ */
+@utility overlay-sheet {
+  &[data-side='right'] { --halogen-overlay-x: var(--halogen-overlay-sheet-travel); }
+  &[data-side='left'] { --halogen-overlay-x: calc(-1 * var(--halogen-overlay-sheet-travel)); }
+  &[data-side='top'] { --halogen-overlay-y: calc(-1 * var(--halogen-overlay-sheet-travel)); }
+  &[data-side='bottom'] { --halogen-overlay-y: var(--halogen-overlay-sheet-travel); }
+
+  &[data-state='open'] {
+    animation:
+      halogen-fade-in var(--halogen-duration-fade) var(--halogen-easing-enter),
+      halogen-slide-in var(--halogen-duration-base) var(--halogen-easing-enter);
+  }
+  &[data-state='closed'] {
+    animation:
+      halogen-fade-out var(--halogen-duration-fade) var(--halogen-easing-exit),
+      halogen-slide-out var(--halogen-duration-fast) var(--halogen-easing-exit);
+  }
+}
+
+/**
+ * The toast viewport. Sets the direction its toasts travel from.
+ *
+ * Declared here rather than on the toast because the vars inherit, and the
+ * viewport is the thing that knows which corner it is pinned to. Corner
+ * positions slide horizontally — a diagonal entrance reads as a glitch.
+ */
+@utility toast-viewport {
+  &[data-position='top-left'],
+  &[data-position='bottom-left'] {
+    --halogen-overlay-x: calc(-1 * var(--halogen-travel-expressive));
+    --halogen-overlay-y: 0px;
+  }
+  &[data-position='top-right'],
+  &[data-position='bottom-right'] {
+    --halogen-overlay-x: var(--halogen-travel-expressive);
+    --halogen-overlay-y: 0px;
+  }
+  &[data-position='top-center'] {
+    --halogen-overlay-x: 0px;
+    --halogen-overlay-y: calc(-1 * var(--halogen-travel-expressive));
+  }
+  &[data-position='bottom-center'] {
+    --halogen-overlay-x: 0px;
+    --halogen-overlay-y: var(--halogen-travel-expressive);
+  }
+}
+
+/**
+ * A toast.
+ *
+ * Its own motion rather than overlay-pop, because a toast that dismisses itself
+ * needs a leave you can actually watch. The exit runs on ease-move at
+ * duration-slow: an auto-dismiss that vanishes on the exit curve reads as a
+ * glitch, since nobody was looking at the moment it decided to go.
+ *
+ * Deliberately does not reset the travel vars — they are inherited from the
+ * viewport, which knows which corner it sits in.
+ */
+@utility overlay-toast {
+  &[data-state='open'] {
+    animation:
+      halogen-fade-in var(--halogen-duration-fade) var(--halogen-easing-enter),
+      halogen-slide-in var(--halogen-duration-base) var(--halogen-easing-enter);
+  }
+  &[data-state='closed'] {
+    animation:
+      halogen-fade-out var(--halogen-duration-slow) var(--halogen-easing-move),
+      halogen-slide-out var(--halogen-duration-slow) var(--halogen-easing-move);
+  }
+  /* A deliberate swipe should leave immediately — the person is watching. */
+  &[data-swipe='end'] {
+    animation:
+      halogen-fade-out var(--halogen-duration-fast) var(--halogen-easing-exit),
+      halogen-slide-out var(--halogen-duration-fast) var(--halogen-easing-exit);
+  }
+}
+
+/**
+ * Accordion panel motion.
+ *
+ * Height is the one exception to the transform-and-opacity rule, and it is
+ * unavoidable: an accordion has to animate to its content's height, which is
+ * not knowable in advance. Radix measures it and hands it over as a variable,
+ * which is what makes this possible at all.
+ */
+@utility accordion-panel {
+  overflow: hidden;
+
+  &[data-state='open'] {
+    animation: halogen-accordion-open var(--halogen-duration-base) var(--halogen-easing-move);
+  }
+  &[data-state='closed'] {
+    animation: halogen-accordion-close var(--halogen-duration-fast) var(--halogen-easing-move);
+  }
+}
+
+/**
+ * A fill that reveals rather than resizes.
+ *
+ * Progress is the one place a gradient is allowed outside a brand surface, and
+ * the point is that the fill travels UP the warm ramp as it advances. Scaling
+ * the fill squashes the whole gradient into whatever width it currently has,
+ * so a bar at 10% shows the entire orange-to-yellow blend in a sliver and the
+ * ramp reads as decoration. A clip reveals it instead, and unlike width it is
+ * composited rather than layout-triggering.
+ */
+@utility transition-clip {
+  transition-property: clip-path;
+  transition-timing-function: var(--halogen-easing-move);
+  transition-duration: var(--halogen-duration-slow);
+}
+
+@utility focus-fade {
+  outline: var(--halogen-border-width-2) solid transparent;
+  outline-offset: var(--halogen-space-half);
+
+  /* Supersedes transition-surface rather than composing with it: two rules each
+     setting transition-property means the later one wins outright, and the
+     first version of this utility was silently overridden — the ring never
+     faded. Declared as one full list here, with the ring given a longer
+     duration than the colors so the fade is perceptible while hover stays
+     snappy. Do not apply transition-surface alongside this. */
+  /* The ring gets ease-move at duration-slow; the colors keep ease-enter's
+     snap. Measured on the first version: with ease-enter the ring was 38%
+     opaque at 27ms and 90% at 79ms — animating correctly and perceptually
+     instant. A fade nobody can see is not a fade. */
+  transition-property: color, background-color, border-color, outline-color, box-shadow;
+  transition-timing-function:
+    var(--halogen-easing-enter),
+    var(--halogen-easing-enter),
+    var(--halogen-easing-enter),
+    var(--halogen-easing-move),
+    var(--halogen-easing-move);
+  transition-duration:
+    var(--halogen-duration-fast),
+    var(--halogen-duration-fast),
+    var(--halogen-duration-fast),
+    var(--halogen-duration-slow),
+    var(--halogen-duration-slow);
+
+  &:focus-visible {
+    outline-color: var(--halogen-line-focus);
+    /* A soft accent halo outside the ring. The ring is still the indicator and
+       is still contrast-asserted; this only makes the moment land. */
+    box-shadow: 0 0 0 5px var(--halogen-line-focus-glow);
+  }
+}