/* Luxen CSS preset — opinionated default, take the wheel anytime.

   Each layer below is independently overridable: swap one for your own
   implementation, override individual `--l-*` properties at :root, or
   `npx luxen-ui import <thing>` to copy a layer into your project for full
   ownership. */

/* Runtime helpers (a11y, custom-element FOUC prevention). */

/* Luxen runtime base — the 15 lines required for the library to function:
   - .l-visually-hidden a11y helper
   - Custom element FOUC prevention (l-dialog:not(:defined), etc.)
   - css-extras CSS utility functions

   Imports zero tokens. Use this if you want to swap the token layer entirely
   (e.g. plug in Radix UI primitives + your own aliases). */

/**
CSS Extras - A collection of useful CSS custom functions

@author Sindre Sorhus
@license (MIT OR CC0-1.0)
*/

/* ===================================
	 Math & Number Functions
	 =================================== */

/**
Negates a value (returns the negative).

@param {Number} --value - The value to negate.
@returns {Number} The negated value.
@example padding: --negate(1em);
*/

@function --negate(--value) {
	result: calc(-1 * var(--value));
}

/**
Linear interpolation between two values.

@param {Number} --from - Start value.
@param {Number} --to - End value.
@param {Number} --progress - Progress between 0 and 1.
@returns {Number} Interpolated value.
@example width: --lerp(100px, 200px, 0.5);
*/

@function --lerp(--from, --to, --progress) {
	result: calc(var(--from) + (var(--to) - var(--from)) * var(--progress));
}

/**
Maps a value from one range to another.

@param {Number} --value - Input value.
@param {Number} --in-min - Input range minimum.
@param {Number} --in-max - Input range maximum.
@param {Number} --out-min - Output range minimum.
@param {Number} --out-max - Output range maximum.
@returns {Number} Mapped value.
@example font-size: --map-range(50vw, 320px, 1920px, 14px, 24px);
*/

@function --map-range(--value, --in-min, --in-max, --out-min, --out-max) {
	--progress: clamp(0, calc((var(--value) - var(--in-min)) / (var(--in-max) - var(--in-min))), 1);
	result: calc(var(--out-min) + (var(--out-max) - var(--out-min)) * var(--progress));
}

/**
Returns the ratio of two values. Supports values with different units, unlike regular division.

@param {CalcSum} --value - Input value.
@param {CalcSum} --to-value - Another input value.
@returns {Number} The ratio between two values.
@example scale: --ratio(16px, 1em);
*/

@function --ratio(--value, --to-value) {
	result: tan(atan2(var(--value), var(--to-value)));
}

/* ===================================
	 Color Functions
	 =================================== */

/**
Returns a semi-transparent version of any color.

@param {Color} --color - The base color.
@param {Number} --opacity - Opacity value (0-100% or 0-1).
@returns {Color} Color with opacity.
@example background: --opacity(blue, 50%);
*/

@function --opacity(--color, --opacity) {
	result: rgb(from var(--color) r g b / var(--opacity));
}

/**
Lightens a color by mixing with white.

Uses OKLab color space for perceptually uniform mixing.

@param {Color} --color - The base color.
@param {Number} --amount - Amount to lighten (0-100%).
@returns {Color} Lightened color.
@example background: --tint(blue, 20%);
*/

@function --tint(--color, --amount: 10%) {
	result: color-mix(in oklab, var(--color), white var(--amount));
}

/**
Darkens a color by mixing with black.

Uses OKLab color space for perceptually uniform mixing.

@param {Color} --color - The base color.
@param {Number} --amount - Amount to darken (0-100%).
@returns {Color} Darkened color.
@example background: --shade(blue, 20%);
*/

@function --shade(--color, --amount: 10%) {
	result: color-mix(in oklab, var(--color), black var(--amount));
}

/**
Adjusts color saturation.

Uses OKLCH color space for perceptually uniform chroma adjustment. Chroma is clamped to 0.4 for safe display.

@param {Color} --color - The base color.
@param {Number} --amount - Chroma multiplier.
@returns {Color} Adjusted color.
@example color: --saturate(red, 1.5);
*/

@function --saturate(--color, --amount: 1.2) {
	result: oklch(from var(--color) l clamp(0, calc(c * var(--amount)), 0.4) h);
}

/**
Adjusts color lightness.

Uses OKLCH color space for perceptually uniform lightness adjustment. Maintains chroma independently.

@param {Color} --color - The base color.
@param {Number} --amount - Lightness adjustment (-100% to 100%).
@returns {Color} Adjusted color.
@example background: --lighten(blue, 20%);
*/

@function --lighten(--color, --amount: 10%) {
	result: oklch(from var(--color) clamp(0, calc(l + var(--amount) / 100%), 1) c h);
}

/**
Darkens a color by reducing lightness.

Uses OKLCH color space for perceptually uniform lightness adjustment. Unlike `--shade()` which mixes with black, this directly reduces the lightness value.

@param {Color} --color - The base color.
@param {Number} --amount - Lightness reduction (0-100%).
@returns {Color} Darkened color.
@example background: --darken(blue, 20%);
*/

@function --darken(--color, --amount: 10%) {
	result: oklch(from var(--color) clamp(0, calc(l - var(--amount) / 100%), 1) c h);
}

/**
Rotates the hue of a color.

Uses OKLCH color space for perceptually uniform hue rotation.

@param {Color} --color - The base color.
@param {Angle} --degrees - Degrees to rotate hue.
@returns {Color} Color with rotated hue.
@example background: --rotate-hue(blue, 180deg);
*/

@function --rotate-hue(--color, --degrees: 30deg) {
	result: oklch(from var(--color) l c calc(h + var(--degrees)));
}

/**
Returns the complementary color.

Uses OKLCH color space for perceptually accurate complementary colors.

@param {Color} --color - The base color.
@returns {Color} Complementary color.
@example border-color: --complement(blue);
*/

@function --complement(--color) {
	result: oklch(from var(--color) l c calc(h + 180deg));
}

/**
Inverts a color.

@param {Color} --color - The color to invert.
@returns {Color} Inverted color.
@example background: --invert(white);
*/

@function --invert(--color) {
	result: rgb(from var(--color) calc(255 - r) calc(255 - g) calc(255 - b) / alpha);
}

/**
Converts a color to grayscale.

Uses OKLCH color space by setting chroma to 0.

@param {Color} --color - The color to convert.
@returns {Color} Grayscale color.
@example filter: --grayscale(var(--brand-color));
*/

@function --grayscale(--color) {
	result: oklch(from var(--color) l 0 h);
}

/*
Uses HWB color space trick: converts to grayscale in OKLCH, then uses HWB's blackness/whiteness values amplified by a large multiplier to create a binary black/white decision based on brightness. This provides excellent contrast decisions without needing numeric luminance extraction.
*/

/**
Returns black or white text color for optimal contrast on a background.

@param {Color} --bg - Background color.
@returns {Color} Black or white for optimal readability.
@example color: --text-on(var(--bg-color));
*/

@function --text-on(--bg) {
	result: hwb(from oklch(from var(--bg) l 0 0) h calc((b - 50) * 999) calc((w - 50) * 999));
}

/**
Removes transparency from a color, making it fully opaque.

@param {Color} --color - Color with alpha channel.
@returns {Color} Fully opaque version of the color.
@example background: --opaque(var(--semi-transparent-bg));
*/

@function --opaque(--color) {
	result: rgb(from var(--color) r g b / 1);
}

/**
Mixes two colors in OKLab color space.

Uses perceptually uniform OKLab color space for natural-looking color mixing.

@param {Color} --color1 - First color.
@param {Color} --color2 - Second color.
@param {Number} --amount - Amount of second color to mix (0-100%).
@returns {Color} Mixed color.
@example background: --mix(red, blue, 30%);
*/

@function --mix(--color1, --color2, --amount: 50%) {
	result: color-mix(in oklab, var(--color1), var(--color2) var(--amount));
}

/**
Returns a triadic color harmony.

Triadic colors are evenly spaced around the color wheel (120° apart).

@param {Color} --color - Base color.
@param {Number} --index - Which triadic color (1 or 2).
@returns {Color} Triadic color.
@example color: --triadic(blue, 1);
*/

@function --triadic(--color, --index: 1) {
	result: oklch(from var(--color) l c calc(h + 120deg * var(--index)));
}

/**
Returns a tetradic (square) color harmony.

Tetradic colors are evenly spaced around the color wheel (90° apart).

@param {Color} --color - Base color.
@param {Number} --index - Which tetradic color (1, 2, or 3).
@returns {Color} Tetradic color.
@example color: --tetradic(blue, 2);
*/

@function --tetradic(--color, --index: 1) {
	result: oklch(from var(--color) l c calc(h + 90deg * var(--index)));
}

/**
Creates a semi-transparent black.

@param {Number} --opacity - Opacity value (0-100% or 0-1).
@returns {Color} Semi-transparent black.
@example box-shadow: 0 2px 4px --black(20%);
*/

@function --black(--opacity: 50%) {
	result: rgb(0 0 0 / var(--opacity));
}

/**
Creates a semi-transparent white.

@param {Number} --opacity - Opacity value (0-100% or 0-1).
@returns {Color} Semi-transparent white.
@example background: --white(90%);
*/

@function --white(--opacity: 50%) {
	result: rgb(255 255 255 / var(--opacity));
}

/* ===================================
	 Typography Functions
	 =================================== */

/**
Creates fluid typography that scales with viewport.

NOTE: This function is mathematically equivalent to `--responsive-value()` but optimized for typography. Use this for `font-size`, `--responsive-value()` for other properties.

@param {Length} --min - Minimum font size.
@param {Length} --max - Maximum font size.
@param {Length} --min-viewport - Minimum viewport width.
@param {Length} --max-viewport - Maximum viewport width.
@returns {Length} Fluid font size.
@example font-size: --fluid-type(16px, 24px, 320px, 1280px);
*/

@function --fluid-type(--min, --max, --min-viewport: 320px, --max-viewport: 1280px) {
	--slope: calc((var(--max) - var(--min)) / (var(--max-viewport) - var(--min-viewport)));
	--intercept: calc(var(--min) - var(--slope) * var(--min-viewport));
	result: clamp(var(--min), calc(var(--intercept) + var(--slope) * 100vw), var(--max));
}

/**
Creates a modular scale value.

@param {Number} --base - Base size.
@param {Number} --ratio - Scale ratio.
@param {Number} --step - Step in the scale.
@returns {Length} Scaled value.
@example font-size: --modular-scale(1rem, 1.25, 3);
*/

@function --modular-scale(--base: 1rem, --ratio: 1.25, --step: 0) {
	result: calc(var(--base) * pow(var(--ratio), var(--step)));
}

/**
Calculates line height as a length value based on font size.

Returns a length (e.g., 24px) rather than a unitless ratio. Use this when you need an absolute line height value.

@param {Length} --font-size - The font size.
@param {Number} --multiplier - Line height multiplier.
@returns {Length} Line height as a length.
@example line-height: --line-height-length(16px, 1.6);
*/

@function --line-height-length(--font-size, --multiplier: 1.5) {
	result: calc(var(--font-size) * var(--multiplier));
}

/**
Calculates line height as a unitless ratio.

Returns a number (e.g., 1.5) which is recommended for better inheritance in CSS.

@param {Length} --line-height - The desired line height as a length.
@param {Length} --font-size - The font size.
@returns {Number} Unitless line height ratio.
@example line-height: --line-height-ratio(24px, 16px);
*/

@function --line-height-ratio(--line-height, --font-size) {
	result: calc(var(--line-height) / var(--font-size));
}

/**
Creates unitless line height from font size (recommended for better inheritance).

NOTE: Only works correctly with pixel font sizes. For rem/em values, use `--line-height-length()` or `--line-height-ratio()` instead.

@param {Length} --font-size - Font size in pixels.
@param {Number} --multiplier - Line height multiplier.
@returns {Number} Unitless line height.
@example line-height: --line-height-unitless(16px, 1.5);
*/

@function --line-height-unitless(--font-size: 16px, --multiplier: 1.5) {
	result: calc(var(--font-size) * var(--multiplier) / 1px);
}

/* ===================================
	 Layout Functions
	 =================================== */

/**
Creates responsive sidebar layout columns.

@param {Length} --sidebar-width - Width of sidebar.
@param {Length} --content-min - Minimum width of content area.
@returns {Length} Grid template columns value.
@example grid-template-columns: --sidebar-layout(250px, 20ch);
*/

@function --sidebar-layout(--sidebar-width: 20ch, --content-min: 20ch) {
	result: minmax(var(--sidebar-width), 1fr) minmax(var(--content-min), 3fr);
}

/**
Conditional border radius that removes at viewport edges.

@param {Length} --radius - Border radius value.
@param {Length} --edge-dist - Distance from viewport edge.
@returns {Length} Computed border radius.
@example border-radius: --conditional-radius(1rem, 8px);
*/

@function --conditional-radius(--radius, --edge-dist: 4px) {
	/* Multiply by large number to amplify small differences, creating binary 0/radius effect */
	result: clamp(0px, ((100vw - var(--edge-dist)) - 100%) * 1e5, var(--radius));
}

/**
Creates a responsive value that scales between two sizes.

NOTE: This function is mathematically equivalent to `--fluid-type()` but uses a simpler lerp-based approach. Use this for spacing/sizing, `--fluid-type()` for typography.

@param {Length} --small - Minimum value.
@param {Length} --large - Maximum value.
@param {Length} --viewport-min - Minimum viewport width.
@param {Length} --viewport-max - Maximum viewport width.
@returns {Length} Responsive value.
@example padding: --responsive-value(1rem, 2rem, 320px, 1200px);
*/

@function --responsive-value(--small, --large, --viewport-min: 320px, --viewport-max: 1200px) {
	--progress: calc((100vw - var(--viewport-min)) / (var(--viewport-max) - var(--viewport-min)));
	--clamped-progress: clamp(0, var(--progress), 1);
	result: calc(var(--small) + (var(--large) - var(--small)) * var(--clamped-progress));
}

/**
Calculates height from aspect ratio and maximum constraints.

@param {Number} --ratio - Aspect ratio (e.g., 16/9).
@param {Length} --max-width - Maximum width.
@param {Length} --max-height - Maximum height.
@returns {Length} Computed height.
@example height: --aspect-height(16/9, 100vw, 100vh);
*/

@function --aspect-height(--ratio: 1, --max-width: 100%, --max-height: 100%) {
	--computed-height: calc(var(--max-width) / var(--ratio));
	result: min(var(--computed-height), var(--max-height));
}

/**
Calculates width from aspect ratio and maximum constraints.

@param {Number} --ratio - Aspect ratio (e.g., 16/9).
@param {Length} --max-height - Maximum height.
@param {Length} --max-width - Maximum width.
@returns {Length} Computed width.
@example width: --aspect-width(16/9, 100vh, 100vw);
*/

@function --aspect-width(--ratio: 1, --max-height: 100%, --max-width: 100%) {
	--computed-width: calc(var(--max-height) * var(--ratio));
	result: min(var(--computed-width), var(--max-width));
}

/* ===================================
	 Spacing Functions
	 =================================== */

/**
Creates consistent spacing based on a scale.

Recommended range: 0-10. Higher values create exponentially larger spacing.

@param {Number} --level - Spacing level (0-10).
@param {Length} --base - Base spacing unit.
@returns {Length} Computed spacing.
@example margin: --spacing(3);
*/

@function --spacing(--level: 1, --base: 0.25rem) {
	result: calc(var(--base) * pow(2, var(--level)));
}

/**
Creates inset spacing for containers.

@param {Length} --padding - Base padding.
@param {Length} --max-width - Maximum container width.
@returns {Length} Responsive padding.
@example padding: --container-padding(2rem, 1200px);
*/

@function --container-padding(--padding: 1rem, --max-width: 1200px) {
	--available: calc(100vw - var(--max-width));
	--side-space: max(var(--padding), calc(var(--available) / 2));
	result: var(--side-space);
}

/* ===================================
	 Animation Functions
	 =================================== */

/**
Creates a simple easing curve value.

@param {Number} --progress - Animation progress (0-1).
@returns {Number} Eased value.
@example transform: translateY(--ease-out(var(--progress)));
*/

@function --ease-out(--progress) {
	--inverse: calc(1 - var(--progress));
	result: calc(1 - var(--inverse) * var(--inverse));
}

/**
Creates elastic easing.

@param {Number} --progress - Animation progress (0-1).
@param {Number} --amplitude - Amplitude of elasticity.
@returns {Number} Eased value.
@example transform: scale(--elastic-ease(var(--progress), 1.2));
*/

@function --elastic-ease(--progress, --amplitude: 1) {
	--p: calc(var(--progress) * 3.14159);
	result: calc(var(--amplitude) * sin(var(--p) * 10) * exp(calc(-5 * var(--progress))));
}

/* ===================================
	 Utility Functions
	 =================================== */

/**
Converts pixels to rem.

@param {Length} --pixels - Pixel value.
@param {Length} --base - Base font size.
@returns {Length} Rem value.
@example font-size: --px-to-rem(24px);
*/

@function --px-to-rem(--pixels, --base: 16px) {
	result: calc(var(--pixels) / var(--base) * 1rem);
}

/**
Converts rem to pixels.

@param {Length} --rems - Rem value.
@param {Length} --base - Base font size.
@returns {Length} Pixel value.
@example width: --rem-to-px(2rem);
*/

@function --rem-to-px(--rems, --base: 16px) {
	result: calc(var(--rems) / 1rem * var(--base));
}

/* ===================================
	 Grid Functions
	 =================================== */

/**
Creates responsive grid columns.

@param {Number} --min-width - Minimum column width.
@param {Number} --max-cols - Maximum number of columns.
@returns {Grid} Grid template columns value.
@example grid-template-columns: --auto-grid(250px, 4);
*/

@function --auto-grid(--min-width: 250px, --max-cols: 4) {
	result: repeat(
		auto-fit,
		minmax(max(var(--min-width), calc(100% / var(--max-cols))), 1fr)
	);
}

/**
Creates a CSS grid span value.

Ensures the span is an integer value.

@param {Number} --columns - Number of columns to span.
@param {Number} --total - Total columns in grid.
@returns {Span} Grid column span (rounded to integer).
@example grid-column: --grid-span(3, 12);
*/

@function --grid-span(--columns: 1, --total: 12) {
	result: span round(clamp(1, var(--columns), var(--total)));
}

/* ===================================
	 Filter Functions
	 =================================== */

/**
Creates a smooth shadow.

Generates three shadow layers. The spread-factor controls how distributed the shadows are.

@param {Color} --color - Shadow color.
@param {Length} --size - Shadow size.
@param {Number} --spread-factor - Controls shadow distribution (higher = tighter shadows).
@returns {Shadow} Layered box shadow.
@example box-shadow: --smooth-shadow(black, 20px, 3);
*/

@function --smooth-shadow(--color: rgb(0 0 0 / 0.2), --size: 12px, --spread-factor: 3) {
	--step: calc(var(--size) / var(--spread-factor));
	result:
		0 var(--step) calc(var(--step) * 2) rgb(from var(--color) r g b / 0.25),
		0 calc(var(--step) * 2) calc(var(--step) * 3) rgb(from var(--color) r g b / 0.18),
		0 calc(var(--step) * 3) calc(var(--step) * 4) rgb(from var(--color) r g b / 0.12);
}

/**
Creates a glow effect.

@param {Color} --color - Glow color.
@param {Length} --size - Glow size.
@param {Number} --intensity - Glow intensity (0-1).
@returns {Shadow} Glow shadow.
@example box-shadow: --glow(cyan, 10px, 0.5);
*/

@function --glow(--color: white, --size: 10px, --intensity: 0.5) {
	result: 0 0 var(--size) rgb(from var(--color) r g b / var(--intensity));
}

/* ===================================
	 Theme Functions
	 =================================== */

/**
Theme-aware value switcher for light/dark mode.

Uses CSS `if()` with color-scheme query. Requires `color-scheme: light dark` on `:root`.
Works with ANY value type (colors, lengths, etc.), not just colors.

> [!NOTE]
> CSS has a native [`light-dark()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark) function for colors. The custom `--light-dark()` function is more powerful as it works with any value type, not just colors.

@param {Any} --light - Value for light mode.
@param {Any} --dark - Value for dark mode.
@returns {Any} Theme-appropriate value.
@example color: --light-dark(black, white);
@example background-image: --light-dark(url(light.svg), url(dark.svg));
@example padding: --light-dark(0.75rem, 1rem);
*/

@function --light-dark(--light, --dark) {
	result: if(color-scheme(dark): var(--dark); else: var(--light));
}

/**
Creates a theme-aware color with automatic adjustment.

Uses CSS `if()` with color-scheme query. Requires `color-scheme: light dark` on `:root`.

In light mode, mixes the base color with white (default 85% white).
In dark mode, mixes the base color with black (default 15% black).

@param {Color} --base - Base color.
@param {Number} --light-mix - Percentage of white to mix in light mode.
@param {Number} --dark-mix - Percentage of black to mix in dark mode.
@returns {Color} Theme-adjusted color.
@example background: --theme-color(blue, 80%, 20%);
*/

@function --theme-color(--base, --light-mix: 85%, --dark-mix: 15%) {
	--light-result: color-mix(in oklab, white var(--light-mix), var(--base));
	--dark-result: color-mix(in oklab, black var(--dark-mix), var(--base));
	result: if(color-scheme(dark): var(--dark-result); else: var(--light-result));
}

@layer base {
  .l-visually-hidden {
    /* Visually hide this, but keep it accessible to keyboard,
       screen reader and other assistive technologies.

      Also know as CSS helper: `.visually-hidden` / `.sr-only`

      References:
        - https://www.tpgi.com/the-anatomy-of-visually-hidden/
        - https://youtu.be/ob_M_qXeDVE?t=677
    */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0); /* for IE only */
    white-space: nowrap;
    border: 0;
  }

  /* Hide Shadow-DOM overlay elements until their custom element upgrades.
     Without this, slotted/inner content flashes inline before the upgrade. */
  l-dialog:not(:defined),
  l-drawer:not(:defined),
  l-dropdown:not(:defined),
  l-popover:not(:defined),
  l-tooltip:not(:defined) {
    display: none;
  }
}

/* Design tokens — primitives (palette + scales) and semantic aliases. */

/* 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));
}