/* Luxen semantic aliases only — text-primary, bg-fill-brand, border-interactive, … Each one references a primitive via `var(--l-color-*)`, so primitives must be defined (either via 'luxen-ui/css/tokens/primitives' or by your own mapping). */ /* 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 , 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 (``), 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; }