@halogen-ui/tokens 0.1.0

package/dist/tokens.css

@@ -0,0 +1,782 @@
+/**
+ * Halogen design tokens — GENERATED. Do not edit.
+ * Source: packages/tokens/src/  ·  Rebuild: pnpm --filter @halogen-ui/tokens build
+ */
+
+/* ---- Primitives. Theme-independent; never referenced directly by a component. ---- */
+:root {
+  --halogen-color-neutral-0: #ffffff;
+  --halogen-color-neutral-25: #f8f7f6;
+  --halogen-color-neutral-50: #f0efed;
+  --halogen-color-neutral-100: #e4e2e0;
+  --halogen-color-neutral-200: #d3d1cf;
+  --halogen-color-neutral-300: #bbb9b6;
+  --halogen-color-neutral-400: #a7a5a3;
+  --halogen-color-neutral-450: #969492;
+  --halogen-color-neutral-500: #8c8a88;
+  --halogen-color-neutral-550: #7c7a77;
+  --halogen-color-neutral-600: #6e6c69;
+  --halogen-color-neutral-700: #54524f;
+  --halogen-color-neutral-800: #3b3936;
+  --halogen-color-neutral-850: #2f2d2b;
+  --halogen-color-neutral-900: #292725;
+  --halogen-color-neutral-950: #1e1c1a;
+  --halogen-color-neutral-1000: #12100e;
+  --halogen-color-state-hover-dark: rgba(255, 255, 255, 0.08);
+  --halogen-color-state-active-dark: rgba(255, 255, 255, 0.14);
+  --halogen-color-state-hover-light: rgba(0, 0, 0, 0.06);
+  --halogen-color-state-active-light: rgba(0, 0, 0, 0.1);
+  --halogen-color-state-focus-glow: rgba(255, 100, 31, 0.24);
+  --halogen-color-state-selection-dark: rgba(255, 100, 31, 0.35);
+  --halogen-color-state-selection-light: rgba(255, 100, 31, 0.32);
+  --halogen-color-heat-dark-0: #4d2f29;
+  --halogen-color-heat-dark-1: #7b513c;
+  --halogen-color-heat-dark-2: #aa7647;
+  --halogen-color-heat-dark-3: #d8a147;
+  --halogen-color-heat-dark-4: #fdd345;
+  --halogen-color-heat-light-0: #eee1df;
+  --halogen-color-heat-light-1: #e1b49f;
+  --halogen-color-heat-light-2: #c98c55;
+  --halogen-color-heat-light-3: #99712f;
+  --halogen-color-heat-light-4: #6a560b;
+  --halogen-color-orange-base: #ff641f;
+  --halogen-color-orange-bright: #ff875b;
+  --halogen-color-orange-dim: #ee5500;
+  --halogen-color-orange-text-light: #bf4200;
+  --halogen-color-orange-mark-light: #ef5500;
+  --halogen-color-orange-surface-dark: #351f17;
+  --halogen-color-orange-surface-light: #f6eae6;
+  --halogen-color-orange-surface-dark-hover: #482c22;
+  --halogen-color-orange-surface-light-hover: #f0dad3;
+  --halogen-color-orange-border-dark: #a36047;
+  --halogen-color-orange-border-light: #ce5f34;
+  --halogen-color-orange-text-light-strong: #8e3000;
+  --halogen-color-orange-text-on-chip-light: #bc4100;
+  --halogen-color-coral-base: #ff493f;
+  --halogen-color-coral-bright: #ff7466;
+  --halogen-color-coral-dim: #ee3730;
+  --halogen-color-coral-text-light: #da0010;
+  --halogen-color-coral-mark-light: #ff3d35;
+  --halogen-color-amber-base: #ff9f00;
+  --halogen-color-amber-bright: #ffba6d;
+  --halogen-color-amber-dim: #ec9300;
+  --halogen-color-amber-text-light: #9b5e00;
+  --halogen-color-amber-mark-light: #c27700;
+  --halogen-color-yellow-base: #ffd21a;
+  --halogen-color-yellow-bright: #ffe89d;
+  --halogen-color-yellow-dim: #efc400;
+  --halogen-color-yellow-text-light: #826900;
+  --halogen-color-yellow-mark-light: #a48500;
+  --halogen-color-peach-base: #ffb46b;
+  --halogen-color-peach-bright: #ffcda0;
+  --halogen-color-peach-dim: #f0a65d;
+  --halogen-color-peach-text-light: #9f5c00;
+  --halogen-color-peach-mark-light: #c67500;
+  --halogen-color-pink-base: #e8a6d8;
+  --halogen-color-pink-bright: #fbb7ea;
+  --halogen-color-pink-dim: #d998c9;
+  --halogen-color-pink-text-light: #a54a94;
+  --halogen-color-pink-mark-light: #ce5fb9;
+  --halogen-color-teal-base: #22b8a8;
+  --halogen-color-teal-bright: #3ecab9;
+  --halogen-color-teal-dim: #00a99a;
+  --halogen-color-teal-text-light: #13796f;
+  --halogen-color-teal-mark-light: #1a988b;
+  --halogen-color-teal-surface-dark: #1a2926;
+  --halogen-color-teal-surface-light: #d2f6ef;
+  --halogen-color-teal-surface-dark-hover: #263835;
+  --halogen-color-teal-surface-light-hover: #abefe4;
+  --halogen-color-teal-border-dark: #4d7a73;
+  --halogen-color-teal-border-light: #3d8c82;
+  --halogen-color-teal-text-light-strong: #0b5951;
+  --halogen-color-teal-text-on-chip-light: #13786e;
+  --halogen-color-success-solid: #62c84a;
+  --halogen-color-success-on-solid: #12100e;
+  --halogen-color-success-surface-dark: #1d291b;
+  --halogen-color-success-surface-light: #dff4da;
+  --halogen-color-success-text-dark: #62c94a;
+  --halogen-color-success-text-light: #28591c;
+  --halogen-color-success-border-dark: #577b50;
+  --halogen-color-success-border-light: #538d46;
+  --halogen-color-warning-solid: #d6a453;
+  --halogen-color-warning-on-solid: #12100e;
+  --halogen-color-warning-surface-dark: #2a241b;
+  --halogen-color-warning-surface-light: #f3ece0;
+  --halogen-color-warning-text-dark: #deaa56;
+  --halogen-color-warning-text-light: #634a22;
+  --halogen-color-warning-border-dark: #816f53;
+  --halogen-color-warning-border-light: #997b4d;
+  --halogen-color-error-solid: #cd1f2c;
+  --halogen-color-error-on-solid: #ffffff;
+  --halogen-color-error-surface-dark: #381c1a;
+  --halogen-color-error-surface-light: #f5eae9;
+  --halogen-color-error-text-dark: #fa9891;
+  --halogen-color-error-text-light: #9b151f;
+  --halogen-color-error-border-dark: #b05752;
+  --halogen-color-error-border-light: #e14b4a;
+  --halogen-space-0: 0px;
+  --halogen-space-1: 4px;
+  --halogen-space-2: 8px;
+  --halogen-space-3: 12px;
+  --halogen-space-4: 16px;
+  --halogen-space-5: 20px;
+  --halogen-space-6: 24px;
+  --halogen-space-8: 32px;
+  --halogen-space-10: 40px;
+  --halogen-space-12: 48px;
+  --halogen-space-16: 64px;
+  --halogen-space-20: 80px;
+  --halogen-space-24: 96px;
+  --halogen-space-32: 128px;
+  --halogen-space-40: 160px;
+  --halogen-space-48: 192px;
+  --halogen-space-64: 256px;
+  --halogen-space-80: 320px;
+  --halogen-space-px: 1px;
+  --halogen-space-half: 2px;
+  --halogen-radius-none: 0px;
+  --halogen-radius-xs: 4px;
+  --halogen-radius-sm: 6px;
+  --halogen-radius-md: 10px;
+  --halogen-radius-lg: 16px;
+  --halogen-radius-xl: 24px;
+  --halogen-radius-2xl: 32px;
+  --halogen-radius-full: 9999px;
+  --halogen-control-sm: 32px;
+  --halogen-control-md: 40px;
+  --halogen-control-lg: 48px;
+  --halogen-control-xl: 56px;
+  --halogen-icon-sm: 16px;
+  --halogen-icon-md: 20px;
+  --halogen-icon-lg: 24px;
+  --halogen-icon-stroke-sm: 1.5;
+  --halogen-icon-stroke-md: 1.75;
+  --halogen-icon-stroke-lg: 2;
+  --halogen-border-width-0: 0px;
+  --halogen-border-width-1: 1px;
+  --halogen-border-width-2: 2px;
+  --halogen-target-min: 24px;
+  --halogen-target-touch: 44px;
+  --halogen-container-prose: 720px;
+  --halogen-container-default: 1280px;
+  --halogen-container-wide: 1440px;
+  --halogen-breakpoint-sm: 640px;
+  --halogen-breakpoint-md: 768px;
+  --halogen-breakpoint-lg: 1024px;
+  --halogen-breakpoint-xl: 1280px;
+  --halogen-breakpoint-2xl: 1536px;
+  --halogen-layer-base: 0;
+  --halogen-layer-raised: 10;
+  --halogen-layer-sticky: 100;
+  --halogen-layer-overlay: 1000;
+  --halogen-layer-modal: 1100;
+  --halogen-layer-popover: 1200;
+  --halogen-layer-toast: 1300;
+  --halogen-layer-tooltip: 1400;
+  --halogen-aspect-video: 16 / 9;
+  --halogen-aspect-square: 1 / 1;
+  --halogen-aspect-wide: 21 / 9;
+  --halogen-font-family-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --halogen-font-family-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+  --halogen-font-weight-regular: 400;
+  --halogen-font-weight-medium: 500;
+  --halogen-font-weight-semibold: 600;
+  --halogen-font-weight-bold: 700;
+  --halogen-font-size-2xs: 11px;
+  --halogen-font-size-xs: 12px;
+  --halogen-font-size-sm: 13px;
+  --halogen-font-size-base: 14px;
+  --halogen-font-size-md: 16px;
+  --halogen-font-size-lg: 18px;
+  --halogen-font-size-xl: 20px;
+  --halogen-display-size-xs: clamp(1.5rem, 1.4rem + 0.5vw, 1.5rem);
+  --halogen-display-size-sm: clamp(1.75rem, 1.6rem + 0.75vw, 1.875rem);
+  --halogen-display-size-md: clamp(2.25rem, 1.9rem + 1.5vw, 2.75rem);
+  --halogen-display-size-lg: clamp(2.75rem, 2.1rem + 3vw, 3.75rem);
+  --halogen-display-size-xl: clamp(3.5rem, 2.4rem + 5vw, 5.5rem);
+  --halogen-display-size-2xl: clamp(4.5rem, 2.6rem + 8vw, 8rem);
+  --halogen-line-height-none: 1;
+  --halogen-line-height-display-2xl: 0.95;
+  --halogen-line-height-display-xl: 1;
+  --halogen-line-height-display-lg: 1.05;
+  --halogen-line-height-display-md: 1.1;
+  --halogen-line-height-display-sm: 1.2;
+  --halogen-line-height-display-xs: 1.25;
+  --halogen-line-height-snug: 1.35;
+  --halogen-line-height-normal: 1.5;
+  --halogen-line-height-relaxed: 1.6;
+  --halogen-tracking-wider: 0.015em;
+  --halogen-tracking-wide: 0.005em;
+  --halogen-tracking-normal: 0em;
+  --halogen-tracking-tight: -0.01em;
+  --halogen-tracking-tighter: -0.015em;
+  --halogen-tracking-tightest: -0.02em;
+  --halogen-tracking-display: -0.03em;
+  --halogen-tracking-display-tight: -0.035em;
+  --halogen-measure-prose: 68ch;
+  --halogen-measure-narrow: 46ch;
+  --halogen-duration-instant: 0ms;
+  --halogen-duration-press: 70ms;
+  --halogen-duration-fast: 120ms;
+  --halogen-duration-base: 180ms;
+  --halogen-duration-slow: 260ms;
+  --halogen-duration-slower: 400ms;
+  --halogen-duration-deliberate: 600ms;
+  --halogen-easing-enter: cubic-bezier(0.22, 1, 0.36, 1);
+  --halogen-easing-exit: cubic-bezier(0.64, 0, 0.78, 0);
+  --halogen-easing-move: cubic-bezier(0.65, 0, 0.35, 1);
+  --halogen-easing-overshoot: cubic-bezier(0.34, 1.4, 0.64, 1);
+  --halogen-easing-linear: linear;
+  --halogen-travel-ui: 8px;
+  --halogen-travel-expressive: 24px;
+  --halogen-press-scale: 0.97;
+  --halogen-reel-travel: 100%;
+  --halogen-overlay-zoom-from: 0.96;
+  --halogen-overlay-sheet-travel: 100%;
+  --halogen-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.16);
+  --halogen-shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.24), 0 2px 4px -2px rgb(0 0 0 / 0.16);
+  --halogen-shadow-lg: 0 16px 40px -8px rgb(0 0 0 / 0.36), 0 4px 8px -4px rgb(0 0 0 / 0.2);
+  --halogen-shadow-none: none;
+  --halogen-alpha-hairline-dark: 0.08;
+  --halogen-alpha-hairline-light: 0.08;
+  --halogen-alpha-edge-highlight: 0.06;
+  --halogen-alpha-scrim-dark: 0.72;
+  --halogen-alpha-scrim-light: 0.48;
+  --halogen-alpha-disabled: 0.38;
+  --halogen-scrim-blur: 5px;
+  --halogen-scrim-opacity: 0.7;
+}
+
+/* ---- Semantic: dark. The default theme. ---- */
+:root {
+  --halogen-surface-ground: #12100e;
+  --halogen-surface-raised: #1e1c1a;
+  --halogen-surface-overlay: #292725;
+  --halogen-surface-floating: #292725;
+  --halogen-surface-modal: #292725;
+  --halogen-surface-subtle: #292725;
+  --halogen-surface-field: #292725;
+  --halogen-surface-subtle-hover: #2f2d2b;
+  --halogen-surface-subtle-active: #3b3936;
+  --halogen-surface-state-hover: rgba(255, 255, 255, 0.08);
+  --halogen-surface-state-active: rgba(255, 255, 255, 0.14);
+  --halogen-surface-selection: rgba(255, 100, 31, 0.35);
+  --halogen-surface-knob: #f0efed;
+  --halogen-surface-inverse: #f0efed;
+  --halogen-surface-accent: #ff641f;
+  --halogen-surface-accent-hover: #ff875b;
+  --halogen-surface-accent-active: #ee5500;
+  --halogen-surface-accent-subtle: #351f17;
+  --halogen-surface-accent-subtle-hover: #482c22;
+  --halogen-surface-disabled: #292725;
+  --halogen-surface-scrim: #12100e;
+  --halogen-ink-primary: #f0efed;
+  --halogen-ink-secondary: #bbb9b6;
+  --halogen-ink-tertiary: #969492;
+  --halogen-ink-placeholder: #969492;
+  --halogen-ink-disabled: #6e6c69;
+  --halogen-ink-accent: #ff641f;
+  --halogen-ink-on-accent-subtle: #ff641f;
+  --halogen-ink-on-accent: #12100e;
+  --halogen-ink-on-gradient: #12100e;
+  --halogen-ink-on-scrim: #f0efed;
+  --halogen-ink-on-scrim-secondary: #d3d1cf;
+  --halogen-ink-inverse: #12100e;
+  --halogen-ink-link: #ff641f;
+  --halogen-ink-link-hover: #ff875b;
+  --halogen-line-subtle: #2f2d2b;
+  --halogen-line-divider: #3b3936;
+  --halogen-line-control: #3b3936;
+  --halogen-line-strong: #969492;
+  --halogen-line-focus: #ff641f;
+  --halogen-line-focus-glow: rgba(255, 100, 31, 0.24);
+  --halogen-line-accent: #a36047;
+  --halogen-line-disabled: #2f2d2b;
+  --halogen-line-edge-highlight: #54524f;
+  --halogen-status-success-solid: #62c84a;
+  --halogen-status-success-on-solid: #12100e;
+  --halogen-status-success-ink: #62c94a;
+  --halogen-status-success-surface: #1d291b;
+  --halogen-status-success-line: #577b50;
+  --halogen-status-warning-solid: #d6a453;
+  --halogen-status-warning-on-solid: #12100e;
+  --halogen-status-warning-ink: #deaa56;
+  --halogen-status-warning-surface: #2a241b;
+  --halogen-status-warning-line: #816f53;
+  --halogen-status-error-solid: #cd1f2c;
+  --halogen-status-error-on-solid: #ffffff;
+  --halogen-status-error-ink: #fa9891;
+  --halogen-status-error-surface: #381c1a;
+  --halogen-status-error-line: #b05752;
+  --halogen-status-info-solid: #22b8a8;
+  --halogen-status-info-on-solid: #12100e;
+  --halogen-status-info-ink: #22b8a8;
+  --halogen-status-info-surface: #1a2926;
+  --halogen-status-info-line: #4d7a73;
+  --halogen-viz-1: #ff641f;
+  --halogen-viz-2: #22b8a8;
+  --halogen-viz-3: #ffd21a;
+  --halogen-viz-4: #e8a6d8;
+  --halogen-viz-5: #ff493f;
+  --halogen-viz-6: #ffb46b;
+  --halogen-viz-7: #bbb9b6;
+  --halogen-viz-grid: #2f2d2b;
+  --halogen-viz-axis: #969492;
+  --halogen-viz-sequential-0: #4d2f29;
+  --halogen-viz-sequential-1: #7b513c;
+  --halogen-viz-sequential-2: #aa7647;
+  --halogen-viz-sequential-3: #d8a147;
+  --halogen-viz-sequential-4: #fdd345;
+  --halogen-viz-diverging-neg-2: #00a99a;
+  --halogen-viz-diverging-neg-1: #3ecab9;
+  --halogen-viz-diverging-0: #8c8a88;
+  --halogen-viz-diverging-pos-1: #ff875b;
+  --halogen-viz-diverging-pos-2: #ee5500;
+  --halogen-gradient-ember: linear-gradient(135deg, #ff641f 0%, #ff493f 100%);
+  --halogen-gradient-solar: linear-gradient(135deg, #ff641f 0%, #ff9f00 50%, #ffd21a 100%);
+  --halogen-gradient-dusk: linear-gradient(135deg, #ff493f 0%, #e8a6d8 100%);
+  --halogen-gradient-glow: radial-gradient(circle at 50% 0%, #351f17 0%, transparent 70%);
+  --halogen-gradient-ground: linear-gradient(180deg, #12100e 0%, #1e1c1a 100%);
+  --halogen-elevation-1: none;
+  --halogen-elevation-2: none;
+  --halogen-elevation-3: 0 4px 12px -2px rgb(0 0 0 / 0.24), 0 2px 4px -2px rgb(0 0 0 / 0.16);
+  --halogen-elevation-4: 0 16px 40px -8px rgb(0 0 0 / 0.36), 0 4px 8px -4px rgb(0 0 0 / 0.2);
+}
+
+/**
+ * Three-state theming.
+ *   - no attribute  -> follow the OS, defaulting to dark
+ *   - [data-theme]  -> an explicit choice wins in both directions
+ * The :not() guard is what stops an explicit dark choice being overridden by a
+ * light OS preference.
+ */
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme='dark']) {
+    --halogen-surface-ground: #ffffff;
+    --halogen-surface-raised: #f8f7f6;
+    --halogen-surface-overlay: #ffffff;
+    --halogen-surface-floating: #ffffff;
+    --halogen-surface-modal: #ffffff;
+    --halogen-surface-subtle: #e4e2e0;
+    --halogen-surface-field: #f8f7f6;
+    --halogen-surface-subtle-hover: #d3d1cf;
+    --halogen-surface-subtle-active: #bbb9b6;
+    --halogen-surface-state-hover: rgba(0, 0, 0, 0.06);
+    --halogen-surface-state-active: rgba(0, 0, 0, 0.1);
+    --halogen-surface-selection: rgba(255, 100, 31, 0.32);
+    --halogen-surface-knob: #ffffff;
+    --halogen-surface-inverse: #12100e;
+    --halogen-surface-accent: #ff641f;
+    --halogen-surface-accent-hover: #ff875b;
+    --halogen-surface-accent-active: #ee5500;
+    --halogen-surface-accent-subtle: #f6eae6;
+    --halogen-surface-accent-subtle-hover: #f0dad3;
+    --halogen-surface-disabled: #e4e2e0;
+    --halogen-surface-scrim: #12100e;
+    --halogen-ink-primary: #12100e;
+    --halogen-ink-secondary: #54524f;
+    --halogen-ink-tertiary: #6e6c69;
+    --halogen-ink-placeholder: #54524f;
+    --halogen-ink-disabled: #a7a5a3;
+    --halogen-ink-accent: #bf4200;
+    --halogen-ink-on-accent-subtle: #bc4100;
+    --halogen-ink-on-accent: #12100e;
+    --halogen-ink-on-gradient: #12100e;
+    --halogen-ink-on-scrim: #f0efed;
+    --halogen-ink-on-scrim-secondary: #d3d1cf;
+    --halogen-ink-inverse: #ffffff;
+    --halogen-ink-link: #bf4200;
+    --halogen-ink-link-hover: #8e3000;
+    --halogen-line-subtle: #e4e2e0;
+    --halogen-line-divider: #d3d1cf;
+    --halogen-line-control: #e4e2e0;
+    --halogen-line-strong: #54524f;
+    --halogen-line-focus: #ff641f;
+    --halogen-line-focus-glow: rgba(255, 100, 31, 0.24);
+    --halogen-line-accent: #ce5f34;
+    --halogen-line-disabled: #d3d1cf;
+    --halogen-line-edge-highlight: #e4e2e0;
+    --halogen-status-success-solid: #62c84a;
+    --halogen-status-success-on-solid: #12100e;
+    --halogen-status-success-ink: #28591c;
+    --halogen-status-success-surface: #dff4da;
+    --halogen-status-success-line: #538d46;
+    --halogen-status-warning-solid: #d6a453;
+    --halogen-status-warning-on-solid: #12100e;
+    --halogen-status-warning-ink: #634a22;
+    --halogen-status-warning-surface: #f3ece0;
+    --halogen-status-warning-line: #997b4d;
+    --halogen-status-error-solid: #cd1f2c;
+    --halogen-status-error-on-solid: #ffffff;
+    --halogen-status-error-ink: #9b151f;
+    --halogen-status-error-surface: #f5eae9;
+    --halogen-status-error-line: #e14b4a;
+    --halogen-status-info-solid: #22b8a8;
+    --halogen-status-info-on-solid: #12100e;
+    --halogen-status-info-ink: #13786e;
+    --halogen-status-info-surface: #d2f6ef;
+    --halogen-status-info-line: #3d8c82;
+    --halogen-viz-1: #ef5500;
+    --halogen-viz-2: #1a988b;
+    --halogen-viz-3: #a48500;
+    --halogen-viz-4: #ce5fb9;
+    --halogen-viz-5: #ff3d35;
+    --halogen-viz-6: #c67500;
+    --halogen-viz-7: #6e6c69;
+    --halogen-viz-grid: #e4e2e0;
+    --halogen-viz-axis: #6e6c69;
+    --halogen-viz-sequential-0: #eee1df;
+    --halogen-viz-sequential-1: #e1b49f;
+    --halogen-viz-sequential-2: #c98c55;
+    --halogen-viz-sequential-3: #99712f;
+    --halogen-viz-sequential-4: #6a560b;
+    --halogen-viz-diverging-neg-2: #13796f;
+    --halogen-viz-diverging-neg-1: #1a988b;
+    --halogen-viz-diverging-0: #bbb9b6;
+    --halogen-viz-diverging-pos-1: #ef5500;
+    --halogen-viz-diverging-pos-2: #bf4200;
+    --halogen-gradient-ember: linear-gradient(135deg, #ff641f 0%, #ff493f 100%);
+    --halogen-gradient-solar: linear-gradient(135deg, #ff641f 0%, #ff9f00 50%, #ffd21a 100%);
+    --halogen-gradient-dusk: linear-gradient(135deg, #ff493f 0%, #e8a6d8 100%);
+    --halogen-gradient-glow: radial-gradient(circle at 50% 0%, #f6eae6 0%, transparent 70%);
+    --halogen-gradient-ground: linear-gradient(180deg, #f0efed 0%, #e4e2e0 100%);
+    --halogen-elevation-1: none;
+    --halogen-elevation-2: 0 1px 2px 0 rgb(0 0 0 / 0.16);
+    --halogen-elevation-3: 0 4px 12px -2px rgb(0 0 0 / 0.24), 0 2px 4px -2px rgb(0 0 0 / 0.16);
+    --halogen-elevation-4: 0 16px 40px -8px rgb(0 0 0 / 0.36), 0 4px 8px -4px rgb(0 0 0 / 0.2);
+  }
+}
+
+[data-theme='light'] {
+  --halogen-surface-ground: #ffffff;
+  --halogen-surface-raised: #f8f7f6;
+  --halogen-surface-overlay: #ffffff;
+  --halogen-surface-floating: #ffffff;
+  --halogen-surface-modal: #ffffff;
+  --halogen-surface-subtle: #e4e2e0;
+  --halogen-surface-field: #f8f7f6;
+  --halogen-surface-subtle-hover: #d3d1cf;
+  --halogen-surface-subtle-active: #bbb9b6;
+  --halogen-surface-state-hover: rgba(0, 0, 0, 0.06);
+  --halogen-surface-state-active: rgba(0, 0, 0, 0.1);
+  --halogen-surface-selection: rgba(255, 100, 31, 0.32);
+  --halogen-surface-knob: #ffffff;
+  --halogen-surface-inverse: #12100e;
+  --halogen-surface-accent: #ff641f;
+  --halogen-surface-accent-hover: #ff875b;
+  --halogen-surface-accent-active: #ee5500;
+  --halogen-surface-accent-subtle: #f6eae6;
+  --halogen-surface-accent-subtle-hover: #f0dad3;
+  --halogen-surface-disabled: #e4e2e0;
+  --halogen-surface-scrim: #12100e;
+  --halogen-ink-primary: #12100e;
+  --halogen-ink-secondary: #54524f;
+  --halogen-ink-tertiary: #6e6c69;
+  --halogen-ink-placeholder: #54524f;
+  --halogen-ink-disabled: #a7a5a3;
+  --halogen-ink-accent: #bf4200;
+  --halogen-ink-on-accent-subtle: #bc4100;
+  --halogen-ink-on-accent: #12100e;
+  --halogen-ink-on-gradient: #12100e;
+  --halogen-ink-on-scrim: #f0efed;
+  --halogen-ink-on-scrim-secondary: #d3d1cf;
+  --halogen-ink-inverse: #ffffff;
+  --halogen-ink-link: #bf4200;
+  --halogen-ink-link-hover: #8e3000;
+  --halogen-line-subtle: #e4e2e0;
+  --halogen-line-divider: #d3d1cf;
+  --halogen-line-control: #e4e2e0;
+  --halogen-line-strong: #54524f;
+  --halogen-line-focus: #ff641f;
+  --halogen-line-focus-glow: rgba(255, 100, 31, 0.24);
+  --halogen-line-accent: #ce5f34;
+  --halogen-line-disabled: #d3d1cf;
+  --halogen-line-edge-highlight: #e4e2e0;
+  --halogen-status-success-solid: #62c84a;
+  --halogen-status-success-on-solid: #12100e;
+  --halogen-status-success-ink: #28591c;
+  --halogen-status-success-surface: #dff4da;
+  --halogen-status-success-line: #538d46;
+  --halogen-status-warning-solid: #d6a453;
+  --halogen-status-warning-on-solid: #12100e;
+  --halogen-status-warning-ink: #634a22;
+  --halogen-status-warning-surface: #f3ece0;
+  --halogen-status-warning-line: #997b4d;
+  --halogen-status-error-solid: #cd1f2c;
+  --halogen-status-error-on-solid: #ffffff;
+  --halogen-status-error-ink: #9b151f;
+  --halogen-status-error-surface: #f5eae9;
+  --halogen-status-error-line: #e14b4a;
+  --halogen-status-info-solid: #22b8a8;
+  --halogen-status-info-on-solid: #12100e;
+  --halogen-status-info-ink: #13786e;
+  --halogen-status-info-surface: #d2f6ef;
+  --halogen-status-info-line: #3d8c82;
+  --halogen-viz-1: #ef5500;
+  --halogen-viz-2: #1a988b;
+  --halogen-viz-3: #a48500;
+  --halogen-viz-4: #ce5fb9;
+  --halogen-viz-5: #ff3d35;
+  --halogen-viz-6: #c67500;
+  --halogen-viz-7: #6e6c69;
+  --halogen-viz-grid: #e4e2e0;
+  --halogen-viz-axis: #6e6c69;
+  --halogen-viz-sequential-0: #eee1df;
+  --halogen-viz-sequential-1: #e1b49f;
+  --halogen-viz-sequential-2: #c98c55;
+  --halogen-viz-sequential-3: #99712f;
+  --halogen-viz-sequential-4: #6a560b;
+  --halogen-viz-diverging-neg-2: #13796f;
+  --halogen-viz-diverging-neg-1: #1a988b;
+  --halogen-viz-diverging-0: #bbb9b6;
+  --halogen-viz-diverging-pos-1: #ef5500;
+  --halogen-viz-diverging-pos-2: #bf4200;
+  --halogen-gradient-ember: linear-gradient(135deg, #ff641f 0%, #ff493f 100%);
+  --halogen-gradient-solar: linear-gradient(135deg, #ff641f 0%, #ff9f00 50%, #ffd21a 100%);
+  --halogen-gradient-dusk: linear-gradient(135deg, #ff493f 0%, #e8a6d8 100%);
+  --halogen-gradient-glow: radial-gradient(circle at 50% 0%, #f6eae6 0%, transparent 70%);
+  --halogen-gradient-ground: linear-gradient(180deg, #f0efed 0%, #e4e2e0 100%);
+  --halogen-elevation-1: none;
+  --halogen-elevation-2: 0 1px 2px 0 rgb(0 0 0 / 0.16);
+  --halogen-elevation-3: 0 4px 12px -2px rgb(0 0 0 / 0.24), 0 2px 4px -2px rgb(0 0 0 / 0.16);
+  --halogen-elevation-4: 0 16px 40px -8px rgb(0 0 0 / 0.36), 0 4px 8px -4px rgb(0 0 0 / 0.2);
+}
+
+[data-theme='dark'] {
+  --halogen-surface-ground: #12100e;
+  --halogen-surface-raised: #1e1c1a;
+  --halogen-surface-overlay: #292725;
+  --halogen-surface-floating: #292725;
+  --halogen-surface-modal: #292725;
+  --halogen-surface-subtle: #292725;
+  --halogen-surface-field: #292725;
+  --halogen-surface-subtle-hover: #2f2d2b;
+  --halogen-surface-subtle-active: #3b3936;
+  --halogen-surface-state-hover: rgba(255, 255, 255, 0.08);
+  --halogen-surface-state-active: rgba(255, 255, 255, 0.14);
+  --halogen-surface-selection: rgba(255, 100, 31, 0.35);
+  --halogen-surface-knob: #f0efed;
+  --halogen-surface-inverse: #f0efed;
+  --halogen-surface-accent: #ff641f;
+  --halogen-surface-accent-hover: #ff875b;
+  --halogen-surface-accent-active: #ee5500;
+  --halogen-surface-accent-subtle: #351f17;
+  --halogen-surface-accent-subtle-hover: #482c22;
+  --halogen-surface-disabled: #292725;
+  --halogen-surface-scrim: #12100e;
+  --halogen-ink-primary: #f0efed;
+  --halogen-ink-secondary: #bbb9b6;
+  --halogen-ink-tertiary: #969492;
+  --halogen-ink-placeholder: #969492;
+  --halogen-ink-disabled: #6e6c69;
+  --halogen-ink-accent: #ff641f;
+  --halogen-ink-on-accent-subtle: #ff641f;
+  --halogen-ink-on-accent: #12100e;
+  --halogen-ink-on-gradient: #12100e;
+  --halogen-ink-on-scrim: #f0efed;
+  --halogen-ink-on-scrim-secondary: #d3d1cf;
+  --halogen-ink-inverse: #12100e;
+  --halogen-ink-link: #ff641f;
+  --halogen-ink-link-hover: #ff875b;
+  --halogen-line-subtle: #2f2d2b;
+  --halogen-line-divider: #3b3936;
+  --halogen-line-control: #3b3936;
+  --halogen-line-strong: #969492;
+  --halogen-line-focus: #ff641f;
+  --halogen-line-focus-glow: rgba(255, 100, 31, 0.24);
+  --halogen-line-accent: #a36047;
+  --halogen-line-disabled: #2f2d2b;
+  --halogen-line-edge-highlight: #54524f;
+  --halogen-status-success-solid: #62c84a;
+  --halogen-status-success-on-solid: #12100e;
+  --halogen-status-success-ink: #62c94a;
+  --halogen-status-success-surface: #1d291b;
+  --halogen-status-success-line: #577b50;
+  --halogen-status-warning-solid: #d6a453;
+  --halogen-status-warning-on-solid: #12100e;
+  --halogen-status-warning-ink: #deaa56;
+  --halogen-status-warning-surface: #2a241b;
+  --halogen-status-warning-line: #816f53;
+  --halogen-status-error-solid: #cd1f2c;
+  --halogen-status-error-on-solid: #ffffff;
+  --halogen-status-error-ink: #fa9891;
+  --halogen-status-error-surface: #381c1a;
+  --halogen-status-error-line: #b05752;
+  --halogen-status-info-solid: #22b8a8;
+  --halogen-status-info-on-solid: #12100e;
+  --halogen-status-info-ink: #22b8a8;
+  --halogen-status-info-surface: #1a2926;
+  --halogen-status-info-line: #4d7a73;
+  --halogen-viz-1: #ff641f;
+  --halogen-viz-2: #22b8a8;
+  --halogen-viz-3: #ffd21a;
+  --halogen-viz-4: #e8a6d8;
+  --halogen-viz-5: #ff493f;
+  --halogen-viz-6: #ffb46b;
+  --halogen-viz-7: #bbb9b6;
+  --halogen-viz-grid: #2f2d2b;
+  --halogen-viz-axis: #969492;
+  --halogen-viz-sequential-0: #4d2f29;
+  --halogen-viz-sequential-1: #7b513c;
+  --halogen-viz-sequential-2: #aa7647;
+  --halogen-viz-sequential-3: #d8a147;
+  --halogen-viz-sequential-4: #fdd345;
+  --halogen-viz-diverging-neg-2: #00a99a;
+  --halogen-viz-diverging-neg-1: #3ecab9;
+  --halogen-viz-diverging-0: #8c8a88;
+  --halogen-viz-diverging-pos-1: #ff875b;
+  --halogen-viz-diverging-pos-2: #ee5500;
+  --halogen-gradient-ember: linear-gradient(135deg, #ff641f 0%, #ff493f 100%);
+  --halogen-gradient-solar: linear-gradient(135deg, #ff641f 0%, #ff9f00 50%, #ffd21a 100%);
+  --halogen-gradient-dusk: linear-gradient(135deg, #ff493f 0%, #e8a6d8 100%);
+  --halogen-gradient-glow: radial-gradient(circle at 50% 0%, #351f17 0%, transparent 70%);
+  --halogen-gradient-ground: linear-gradient(180deg, #12100e 0%, #1e1c1a 100%);
+  --halogen-elevation-1: none;
+  --halogen-elevation-2: none;
+  --halogen-elevation-3: 0 4px 12px -2px rgb(0 0 0 / 0.24), 0 2px 4px -2px rgb(0 0 0 / 0.16);
+  --halogen-elevation-4: 0 16px 40px -8px rgb(0 0 0 / 0.36), 0 4px 8px -4px rgb(0 0 0 / 0.2);
+}
+
+/* ---- Derived defaults. Declared BEFORE the overrides that follow. ---- */
+:root {
+  --halogen-duration-fade: var(--halogen-duration-fast);
+  --halogen-duration-spin: 700ms;
+  --halogen-duration-pulse: 1800ms;
+  color-scheme: dark light;
+}
+
+/**
+ * Reduced motion. Transforms are zeroed and movement durations collapse, but
+ * opacity fades are RETAINED at 120ms: removing state-change feedback entirely
+ * makes changes harder to perceive, which is a worse outcome for the people
+ * this preference exists to serve.
+ *
+ * Source order is load-bearing, and it was wrong once. With the
+ * --duration-fade: var(--duration-fast) default declared AFTER this block, it
+ * won on equal specificity and dragged the fade down to 1ms along with
+ * everything else — the retained-feedback rule was written, documented, tested
+ * at the token layer, and completely inert in the browser.
+ *
+ * A spinner IS motion, so it stops here rather than inheriting a 1ms duration,
+ * which would produce a strobing disc. aria-busy and the visible loading text
+ * still convey the state; only the rotation stops.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --halogen-duration-fast: 1ms;
+    --halogen-duration-base: 1ms;
+    --halogen-duration-slow: 1ms;
+    --halogen-duration-slower: 1ms;
+    --halogen-duration-deliberate: 1ms;
+    --halogen-travel-ui: 0px;
+    --halogen-travel-expressive: 0px;
+    --halogen-easing-overshoot: linear;
+    --halogen-duration-spin: 0ms;
+    /* The skeleton stops breathing; the placeholder simply sits there. */
+    --halogen-duration-pulse: 0ms;
+    /* A press is motion, so the scale is neutralised. Feedback survives: the
+       active background color still changes, so the control still confirms it
+       was pressed — only the movement stops. */
+    --halogen-press-scale: 1;
+    /* The reel stops travelling; the icon simply stays put. */
+    --halogen-reel-travel: 0%;
+    /* Overlays stop moving and stop scaling, but still fade.
+       Collapsing the durations rather than setting animation:none is what
+       keeps the fade: none would remove the opacity animation along with the
+       travel, and retaining feedback while removing movement is the rule the
+       press and the spinner already follow.
+       (It is NOT an unmount hazard — that was an assumption, and it was wrong.
+       Radix reads animationName, treats none as "no animation", and unmounts
+       immediately. Verified in a browser rather than reasoned about.) */
+    --halogen-overlay-zoom-from: 1;
+    --halogen-overlay-sheet-travel: 0%;
+    /* Opacity transitions keep a perceptible duration. */
+    --halogen-duration-fade: 120ms;
+  }
+  [class*='animate-spin'] { animation: none; }
+}
+
+/**
+ * The 44px touch-target house standard, applied where it actually matters.
+ *
+ * WCAG 2.5.8 AA requires 24x24, which every Halogen control already exceeds.
+ * The house standard is 44x44 on touch — but forcing that on a mouse-driven
+ * dashboard would destroy the dense mode the aesthetic direction calls for.
+ * A coarse pointer is the honest signal, so compact controls grow only there.
+ * This is one rule at the token layer instead of a pseudo-element hit area
+ * bolted onto every small control, and it cannot be forgotten on a new one.
+ */
+@media (pointer: coarse) {
+  :root {
+    --halogen-control-sm: var(--halogen-target-touch);
+    --halogen-control-md: var(--halogen-target-touch);
+  }
+}
+
+/* A heading never clips.
+   A display step floors at 36px (display-md) and cannot clamp below it, which
+   is correct for a display face — but a single long word at 36px is wider than
+   a 320px screen has room for, and the default overflow-wrap silently cuts it.
+   The document scroll width stays at zero, so nothing reports a problem: the
+   text is simply gone. Breaking the word is the only behavior that keeps the
+   words on screen without redesigning the scale. */
+h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+/* Text selection. The browser default is a blue-gray belonging to no design
+   system; on a warm palette it reads as an accident. */
+::selection {
+  background: var(--halogen-surface-selection);
+  color: var(--halogen-ink-primary);
+}
+
+@keyframes halogen-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* A skeleton breathes rather than flashes: opacity only, never a moving
+   highlight sweeping across the page. */
+@keyframes halogen-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.45; }
+}
+
+/* Accordion. Radix measures the panel and exposes its height as a variable,
+   which is the only way to animate to auto. */
+@keyframes halogen-accordion-open {
+  from { height: 0; opacity: 0; }
+  to { height: var(--radix-accordion-content-height); opacity: 1; }
+}
+@keyframes halogen-accordion-close {
+  from { height: var(--radix-accordion-content-height); opacity: 1; }
+  to { height: 0; opacity: 0; }
+}
+
+/* ---- Overlay keyframes ----
+   Split by property on purpose: opacity and transform run as separate
+   animations so reduced motion can collapse one and keep the other. */
+@keyframes halogen-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes halogen-fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+@keyframes halogen-zoom-in {
+  from { scale: var(--halogen-overlay-zoom-from); }
+  to { scale: 1; }
+}
+@keyframes halogen-zoom-out {
+  from { scale: 1; }
+  to { scale: var(--halogen-overlay-zoom-from); }
+}
+@keyframes halogen-slide-in {
+  from { translate: var(--halogen-overlay-x, 0) var(--halogen-overlay-y, 0); }
+  to { translate: 0 0; }
+}
+@keyframes halogen-slide-out {
+  from { translate: 0 0; }
+  to { translate: var(--halogen-overlay-x, 0) var(--halogen-overlay-y, 0); }
+}