/* Luxen design tokens — primitives (core 5 color families + spacing + radius
   + text + …) and semantic aliases (text-primary, bg-fill-brand, …) in one
   import. Equivalent to combining:

     @import 'luxen-ui/css/tokens/primitives';
     @import 'luxen-ui/css/tokens/aliases';
*/

/* Luxen design-tokens entry — imports primitives + semantic aliases. */

/* Luxen design-tokens — primitives (palette). */

:root {
  --l-color-white: #ffffff;
  --l-color-black: #000000;
  --l-color-transparent: transparent;
  --l-color-blue-50: oklch(97% 0.014 254.604);
  --l-color-blue-100: oklch(93.2% 0.032 255.585);
  --l-color-blue-300: oklch(80.9% 0.105 251.813);
  --l-color-blue-500: oklch(62.3% 0.214 259.815);
  --l-color-blue-600: oklch(54.6% 0.245 262.881);
  --l-color-blue-700: oklch(48.8% 0.243 264.376);
  --l-color-blue-900: oklch(37.9% 0.146 265.522);
  --l-color-blue-950: oklch(28.2% 0.091 267.935);
  --l-color-gray-50: oklch(98.5% 0.002 247.839);
  --l-color-gray-100: oklch(96.7% 0.003 264.542);
  --l-color-gray-200: oklch(92.8% 0.006 264.531);
  --l-color-gray-300: oklch(87.2% 0.01 258.338);
  --l-color-gray-400: oklch(70.7% 0.022 261.325);
  --l-color-gray-500: oklch(55.1% 0.027 264.364);
  --l-color-gray-600: oklch(44.6% 0.03 256.802);
  --l-color-gray-700: oklch(37.3% 0.034 259.733);
  --l-color-gray-800: oklch(27.8% 0.033 256.848);
  --l-color-gray-900: oklch(21% 0.034 264.665);
  --l-color-green-50: oklch(98.2% 0.018 155.826);
  --l-color-green-100: oklch(96.2% 0.044 156.743);
  --l-color-green-300: oklch(87.1% 0.15 154.449);
  --l-color-green-500: oklch(72.3% 0.219 149.579);
  --l-color-green-600: oklch(62.7% 0.194 149.214);
  --l-color-green-700: oklch(52.7% 0.154 150.069);
  --l-color-green-900: oklch(39.3% 0.095 152.535);
  --l-color-green-950: oklch(26.6% 0.065 152.934);
  --l-color-red-50: oklch(97.1% 0.013 17.38);
  --l-color-red-100: oklch(93.6% 0.032 17.717);
  --l-color-red-300: oklch(80.8% 0.114 19.571);
  --l-color-red-600: oklch(57.7% 0.245 27.325);
  --l-color-red-700: oklch(50.5% 0.213 27.518);
  --l-color-red-900: oklch(39.6% 0.141 25.723);
  --l-color-red-950: oklch(25.8% 0.092 26.042);
  --l-color-yellow-50: oklch(98.7% 0.026 102.212);
  --l-color-yellow-100: oklch(97.3% 0.071 103.193);
  --l-color-yellow-300: oklch(90.5% 0.182 98.111);
  --l-color-yellow-500: oklch(79.5% 0.184 86.047);
  --l-color-yellow-600: oklch(68.1% 0.162 75.834);
  --l-color-yellow-700: oklch(55.4% 0.135 66.442);
  --l-color-yellow-900: oklch(42.1% 0.095 57.708);
  --l-color-yellow-950: oklch(28.6% 0.066 53.813);
  --l-font-weight-thin: 100;
  --l-font-weight-extralight: 200;
  --l-font-weight-light: 300;
  --l-font-weight-normal: 400;
  --l-font-weight-medium: 500;
  --l-font-weight-semibold: 600;
  --l-font-weight-bold: 700;
  --l-font-weight-extrabold: 800;
  --l-font-weight-black: 900;
  --l-font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --l-font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --l-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  /* Luxen-specific neo-grotesque stack (badge, labels). Override at :root to use a project font. */
  --l-font-neo-grotesque: Inter, ui-sans-serif, system-ui, sans-serif;
  --l-leading-tight: 1.25;
  --l-leading-snug: 1.375;
  --l-leading-normal: 1.5;
  --l-leading-relaxed: 1.625;
  --l-leading-loose: 2;
  --l-radius: 0.25rem;
  --l-radius-xs: 0.125rem;
  --l-radius-sm: 0.25rem;
  --l-radius-md: 0.375rem;
  --l-radius-lg: 0.5rem;
  --l-radius-xl: 0.75rem;
  --l-radius-2xl: 1rem;
  --l-radius-3xl: 1.5rem;
  --l-radius-4xl: 2rem;
  /* Fully round border-radius for pill shapes, avatars, and circular elements. Luxen-specific — Tailwind v4 does not ship this. */
  --l-radius-full: calc(infinity * 1px);
  --l-spacing: 0.25rem;
  --l-spacing-0: 0;
  --l-spacing-px: 1px;
  --l-spacing-0_5: calc(var(--l-spacing) * 0.5);
  --l-spacing-1: calc(var(--l-spacing) * 1);
  --l-spacing-1_5: calc(var(--l-spacing) * 1.5);
  --l-spacing-2: calc(var(--l-spacing) * 2);
  --l-spacing-2_5: calc(var(--l-spacing) * 2.5);
  --l-spacing-3: calc(var(--l-spacing) * 3);
  --l-spacing-4: calc(var(--l-spacing) * 4);
  --l-spacing-5: calc(var(--l-spacing) * 5);
  --l-spacing-6: calc(var(--l-spacing) * 6);
  --l-spacing-8: calc(var(--l-spacing) * 8);
  --l-spacing-10: calc(var(--l-spacing) * 10);
  --l-spacing-12: calc(var(--l-spacing) * 12);
  --l-spacing-16: calc(var(--l-spacing) * 16);
  --l-spacing-20: calc(var(--l-spacing) * 20);
  --l-spacing-24: calc(var(--l-spacing) * 24);
  --l-spacing-32: calc(var(--l-spacing) * 32);
  --l-text-xs: 0.75rem;
  --l-text-xs--line-height: calc(1 / 0.75);
  --l-text-sm: 0.875rem;
  --l-text-sm--line-height: calc(1.25 / 0.875);
  --l-text-base: 1rem;
  --l-text-base--line-height: calc(1.5 / 1);
  --l-text-lg: 1.125rem;
  --l-text-lg--line-height: calc(1.75 / 1.125);
  --l-text-xl: 1.25rem;
  --l-text-xl--line-height: calc(1.75 / 1.25);
  --l-text-2xl: 1.5rem;
  --l-text-2xl--line-height: calc(2 / 1.5);
  --l-text-3xl: 1.875rem;
  --l-text-3xl--line-height: calc(2.25 / 1.875);
  --l-text-4xl: 2.25rem;
  --l-text-4xl--line-height: calc(2.5 / 2.25);
  --l-text-5xl: 3rem;
  --l-text-5xl--line-height: 1;
  --l-text-6xl: 3.75rem;
  --l-text-6xl--line-height: 1;
  --l-text-7xl: 4.5rem;
  --l-text-7xl--line-height: 1;
  --l-text-8xl: 6rem;
  --l-text-8xl--line-height: 1;
  --l-text-9xl: 8rem;
  --l-text-9xl--line-height: 1;
  --l-tracking-tighter: -0.05em;
  --l-tracking-tight: -0.025em;
  --l-tracking-normal: 0em;
  --l-tracking-wide: 0.025em;
  --l-tracking-wider: 0.05em;
  --l-tracking-widest: 0.1em;
}

/* Luxen design-tokens — semantic aliases. */

:root {
  /* Main body text, headings, and high-emphasis content. Use as the default text color throughout the UI. */
  --l-color-text-primary: light-dark(var(--l-color-gray-700), var(--l-color-gray-200));
  /* Supporting text, descriptions, captions, and medium-emphasis content like helper text beneath form fields. */
  --l-color-text-secondary: light-dark(var(--l-color-gray-600), var(--l-color-gray-400));
  /* Placeholder text, disabled labels, and low-emphasis content like timestamps or metadata. */
  --l-color-text-tertiary: light-dark(var(--l-color-gray-500), var(--l-color-gray-500));
  /* Neutral semantic text for default-state badges, tags, and status labels with no specific severity. */
  --l-color-text-neutral: light-dark(var(--l-color-gray-700), var(--l-color-gray-300));
  /* Informational semantic text for badges, alerts, banners, and status indicators conveying neutral information. */
  --l-color-text-info: light-dark(var(--l-color-blue-700), var(--l-color-blue-300));
  /* Warning semantic text for badges, alerts, and status indicators conveying caution or non-blocking issues. */
  --l-color-text-warning: light-dark(var(--l-color-yellow-700), var(--l-color-yellow-300));
  /* Danger/error semantic text for badges, alerts, validation messages, and destructive action labels. */
  --l-color-text-danger: light-dark(var(--l-color-red-700), var(--l-color-red-300));
  /* Success semantic text for badges, alerts, and status indicators conveying completion or positive outcomes. */
  --l-color-text-success: light-dark(var(--l-color-green-700), var(--l-color-green-300));
  /* Text color for disabled labels, values, and icons in form controls, buttons, and interactive elements. */
  --l-color-text-disabled: light-dark(var(--l-color-gray-400), var(--l-color-gray-500));
  /* Text on brand-filled surfaces like primary buttons. Maximum contrast against --l-color-bg-fill-brand. */
  --l-color-text-on-fill-brand: light-dark(var(--l-color-white), var(--l-color-gray-900));
  /* Default page-level background. Use on <body>, main content areas, and cards at the base layer. */
  --l-color-surface: light-dark(var(--l-color-white), var(--l-color-gray-900));
  /* Elevated overlay background for modals, dialogs, drawers, popovers, and any surface that floats above the page with a backdrop. Slightly lighter than --l-color-surface in dark mode to create visual separation from the page beneath. */
  --l-color-surface-overlay: light-dark(var(--l-color-white), var(--l-color-gray-800));
  /* Default border for form controls, secondary buttons, inputs, selects, and any element that needs a thin neutral outline. Visible enough to delimit the element without competing with surrounding content. */
  --l-color-border: light-dark(var(--l-color-gray-300), var(--l-color-gray-600));
  /* Subtle border or ring for interactive elements like close buttons, toggles, and icon buttons on hover. Provides low-contrast visual feedback without competing with primary content. */
  --l-color-border-interactive: light-dark(var(--l-color-gray-300), var(--l-color-gray-600));
  /* Border for floating surfaces like popovers, dropdowns, menus, tooltips, and combobox listboxes. Aliases --l-color-border so overlays stay visually consistent with form controls, but exposed as a separate semantic so consumers can soften overlay borders independently if needed. Pairs with --l-color-surface-overlay. */
  --l-color-border-overlay: var(--l-color-border);
  /* Border color for disabled form controls, buttons, and interactive elements. Faded to signal non-interactivity. */
  --l-color-border-disabled: light-dark(var(--l-color-gray-300), var(--l-color-gray-700));
  /* Subtle divider line for separating content sections, list items, and card groups. Lighter than --l-color-border to avoid visual competition with interactive element borders. */
  --l-color-divider: light-dark(var(--l-color-gray-200), var(--l-color-gray-700));
  /* Background color for disabled form controls, buttons, and interactive elements. Subtle tint to reinforce non-interactivity. */
  --l-color-bg-disabled: light-dark(var(--l-color-gray-100), var(--l-color-gray-800));
  /* Translucent background tint for hovered rows in lists, menus, trees, tables, and similar roving collections. Alpha-based so underlying indent guides, borders, or zebra stripes stay visible. */
  --l-color-bg-state-hover: light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 6%));
  /* Translucent background tint for the selected (persistent) row in lists, trees, menus, listboxes, and tables. Alpha-based so underlying indent guides, borders, or zebra stripes stay visible. Semantically paired with `aria-selected="true"` / `:state(selected)`. */
  --l-color-bg-state-selected: light-dark(rgb(0 0 0 / 7%), rgb(255 255 255 / 9%));
  /* Primary brand fill for CTA buttons, active toggles, and primary action backgrounds. */
  --l-color-bg-fill-brand: light-dark(var(--l-color-gray-900), var(--l-color-gray-50));
  /* Hover state of brand-filled elements like primary buttons and active toggles. */
  --l-color-bg-fill-brand-hover: light-dark(var(--l-color-gray-800), var(--l-color-gray-200));
  /* Active/pressed state of brand-filled elements like primary buttons during click or tap. */
  --l-color-bg-fill-brand-active: light-dark(var(--l-color-gray-700), var(--l-color-gray-300));
  /* Secondary control fill for buttons, toggles, and non-primary interactive surfaces. */
  --l-color-bg-fill-secondary: light-dark(var(--l-color-white), var(--l-color-gray-700));
  /* Soft neutral fill — palest tint for toast backgrounds, alert containers, and callout boxes. */
  --l-color-bg-fill-neutral-soft: light-dark(var(--l-color-gray-50), var(--l-color-gray-800));
  /* Subtle neutral fill — tinted background for badges, tags, selected states, and secondary highlights. */
  --l-color-bg-fill-neutral-subtle: light-dark(var(--l-color-gray-100), var(--l-color-gray-700));
  /* Strong neutral fill — solid background for solid badges and high-emphasis status indicators. Pair with --l-color-surface for foreground. */
  --l-color-bg-fill-neutral-strong: light-dark(var(--l-color-gray-800), var(--l-color-gray-200));
  /* Soft info fill — palest tint for toast backgrounds, alert containers, and callout boxes. */
  --l-color-bg-fill-info-soft: light-dark(var(--l-color-blue-50), var(--l-color-blue-950));
  /* Subtle info fill — tinted background for badges, tags, selected states, and secondary highlights. */
  --l-color-bg-fill-info-subtle: light-dark(var(--l-color-blue-100), var(--l-color-blue-900));
  /* Strong info fill — solid background for solid badges and high-emphasis status indicators. */
  --l-color-bg-fill-info-strong: light-dark(var(--l-color-blue-600), var(--l-color-blue-500));
  /* Soft warning fill — palest tint for toast backgrounds, alert containers, and callout boxes. */
  --l-color-bg-fill-warning-soft: light-dark(var(--l-color-yellow-50), var(--l-color-yellow-950));
  /* Subtle warning fill — tinted background for badges, tags, selected states, and secondary highlights. */
  --l-color-bg-fill-warning-subtle: light-dark(var(--l-color-yellow-100), var(--l-color-yellow-900));
  /* Strong warning fill — solid background for solid badges and high-emphasis status indicators. */
  --l-color-bg-fill-warning-strong: light-dark(var(--l-color-yellow-600), var(--l-color-yellow-500));
  /* Soft danger fill — palest tint for toast backgrounds, alert containers, and callout boxes. */
  --l-color-bg-fill-danger-soft: light-dark(var(--l-color-red-50), var(--l-color-red-950));
  /* Subtle danger fill — tinted background for badges, tags, selected states, and secondary highlights. */
  --l-color-bg-fill-danger-subtle: light-dark(var(--l-color-red-100), var(--l-color-red-900));
  /* Strong danger fill — solid background for solid badges, high-emphasis status indicators, and destructive buttons. Dark uses red-600 (not red-500) so white text clears WCAG AA 4.5:1. */
  --l-color-bg-fill-danger-strong: light-dark(var(--l-color-red-600), var(--l-color-red-600));
  /* Soft success fill — palest tint for toast backgrounds, alert containers, and callout boxes. */
  --l-color-bg-fill-success-soft: light-dark(var(--l-color-green-50), var(--l-color-green-950));
  /* Subtle success fill — tinted background for badges, tags, selected states, and secondary highlights. */
  --l-color-bg-fill-success-subtle: light-dark(var(--l-color-green-100), var(--l-color-green-900));
  /* Strong success fill — solid background for solid badges and high-emphasis status indicators. */
  --l-color-bg-fill-success-strong: light-dark(var(--l-color-green-600), var(--l-color-green-500));
  /* Semi-transparent backdrop behind modals, dialogs, drawers, and any overlay that dims the page content. Darker in dark mode for better contrast against dark surfaces. */
  --l-backdrop: light-dark(oklch(46% 0.01 260 / 33%), oklch(15% 0.01 260 / 60%));
  /* Stronger backdrop for immersive overlays where the underlying page should fade well into the background — media viewers (`<l-stories-viewer>`), lightboxes, and full-screen players. The page stays barely perceptible but visual focus is unambiguously on the foreground. */
  --l-backdrop-strong: light-dark(oklch(15% 0.01 260 / 78%), oklch(5% 0 0 / 88%));
  /* Subtle elevation for resting surfaces that lift only slightly off the page — cards, raised list items, sticky bars. The shadow color uses light-dark() so it deepens in dark mode, where a faint black shadow would otherwise vanish against a dark surface. */
  --l-shadow-sm: 0 1px 2px 0 light-dark(rgb(0 0 0 / 8%), rgb(0 0 0 / 40%));
  /* Medium elevation for floating overlays anchored to a trigger — popovers, dropdown menus, comboboxes. The shadow color uses light-dark() so it deepens in dark mode. */
  --l-shadow-md: 0 4px 6px -1px light-dark(rgb(0 0 0 / 8%), rgb(0 0 0 / 40%)), 0 2px 4px -2px light-dark(rgb(0 0 0 / 6%), rgb(0 0 0 / 34%));
  /* Large elevation for prominent detached surfaces that float free of any edge — inset drawers, floating panels, large menus. The shadow color uses light-dark() so it deepens in dark mode. */
  --l-shadow-lg: 0 10px 15px -3px light-dark(rgb(0 0 0 / 10%), rgb(0 0 0 / 50%)), 0 4px 6px -4px light-dark(rgb(0 0 0 / 10%), rgb(0 0 0 / 44%));
  /* Focus ring color for :focus-visible outlines on interactive elements like buttons, inputs, and links. */
  --l-focus-ring: #d9461f;
  /* Standard interactive control height (28px) for extra-small elements like compact buttons, tags, and inline controls. */
  --l-size-control-xs: 1.75rem;
  /* Standard interactive control height (32px) for small elements like secondary buttons, small selects, and tight-layout controls. */
  --l-size-control-sm: 2rem;
  /* Standard interactive control height (36px) for medium (default) elements like buttons, inputs, selects, and form controls. */
  --l-size-control-md: 2.25rem;
  /* Standard interactive control height (40px) for large elements like prominent buttons, inputs in spacious layouts, and hero CTAs. */
  --l-size-control-lg: 2.5rem;
  /* Standard interactive control height (44px) for extra-large elements like oversized buttons, landing page CTAs, and touch-optimized controls — meets the 44px WCAG 2.5.5 / Apple HIG touch-target minimum. */
  --l-size-control-xl: 2.75rem;
}

/* Form component tokens (--l-form-control-*, --l-form-field-*). */

/* Luxen design-tokens — form component tokens.
   Opt-in via `@import "luxen-ui/css/tokens/forms"` (already bundled in the
   Luxen preset). Reference semantic aliases, so dark mode is inherited. */

:root {
  /* Color of a control when activated (checked checkbox, selected radio, on switch). Form-wide accent, akin to native `accent-color`. A stable, saturated color that does not invert between light and dark, so the baked white glyph stays legible in both modes — override per brand. */
  --l-form-control-activated-color: var(--l-color-blue-600);
  /* Color of the glyph on the activated fill (checkmark, radio dot, switch thumb). Pairs with the stable accent. */
  --l-form-control-activated-content-color: var(--l-color-white);
  /* Control background (input, textarea, select, unchecked toggle box). */
  --l-form-control-background-color: var(--l-color-surface);
  /* Color of the user-entered value text. */
  --l-form-control-value-color: var(--l-color-text-primary);
  /* Placeholder text color. */
  --l-form-control-placeholder-color: var(--l-color-text-tertiary);
  /* Control border color. */
  --l-form-control-border-color: var(--l-color-border);
  /* Control border width. */
  --l-form-control-border-width: 1px;
  /* Control border radius. */
  --l-form-control-border-radius: var(--l-radius-md);
  /* Control border color on hover. */
  --l-form-control-border-color-hover: var(--l-color-text-tertiary);
  /* Control border color when invalid. */
  --l-form-control-border-color-invalid: var(--l-color-bg-fill-danger-strong);
  /* Background of a disabled text control — a subtle grey fill (reinforces non-interactivity, instead of fading the whole control with opacity). */
  --l-form-control-disabled-background: var(--l-color-bg-disabled);
  /* Border color of a disabled text control. */
  --l-form-control-disabled-border: var(--l-color-border-disabled);
  /* Value/placeholder text color of a disabled text control. */
  --l-form-control-disabled-color: var(--l-color-text-disabled);
  /* Box size of toggle controls (checkbox, radio, switch). Relative to font size so it scales with the label. */
  --l-form-control-toggle-size: 1.25em;
  /* Thickness of the hover halo ring on toggle controls (checkbox, radio, switch), as a fraction of the toggle size. Single source for the shared toggle hover language. */
  --l-form-control-toggle-halo-ratio: 0.22;
  /* Off-state track fill of the switch. A mid grey that holds in both light and dark so the white thumb keeps ~5:1 contrast either way — decoupled from text tokens so re-theming body text never moves the track. */
  --l-form-control-track-off-color: var(--l-color-gray-500);
  /* Height of text controls (input, select, textarea). */
  --l-form-control-height: var(--l-size-control-md);
  /* Horizontal padding of text controls. */
  --l-form-control-padding-inline: var(--l-spacing-3);
  /* Field label color. */
  --l-form-control-label-color: var(--l-color-text-primary);
  /* Helper/description text color (`l-hint`). */
  --l-form-control-hint-color: var(--l-color-text-secondary);
  /* Error message text color (`l-error`). */
  --l-form-control-error-color: var(--l-color-text-danger);
  /* Marker appended to a required field's label. */
  --l-form-control-required-content: '*';
  /* Color of the required marker. */
  --l-form-control-required-color: var(--l-color-text-danger);
  /* Vertical gap between label, control, and messages in a stacked field. Tight, so the label and helper text sit close to the control. */
  --l-form-field-gap: var(--l-spacing-1);
  /* Horizontal gap between a toggle control and its label in an inline field. */
  --l-form-field-choice-gap: var(--l-spacing-2);
}

/* Tooltip component token (--l-tooltip-background-color). */

/* Luxen design-tokens — tooltip component token.
   Bundled in the Luxen preset via `luxen-ui/css/tokens`. A neutral inverse
   surface, decoupled from the brand fill so re-theming primary does not
   recolor tooltips. */

:root {
  /* Tooltip surface color — dark in light mode, light in dark mode. Neutral by design; not tied to --l-color-bg-fill-brand, so changing the brand color does not recolor tooltips. Override globally to re-skin every tooltip, or use the per-instance --background-color custom property on a single `<l-tooltip>`. */
  --l-tooltip-background-color: light-dark(var(--l-color-gray-900), var(--l-color-gray-50));
}