/**
 * Lufa Design System - CSS Entry Point
 * 
 * Uses vanilla CSS with CSS Modules and token-based CSS custom properties.
 */

/* ============================================================================
   DESIGN TOKENS
   ============================================================================ */

/**
 * Do not edit directly, this file was auto-generated.
 */

[data-theme],
[data-theme][data-mode='light'] {
  --lufa-primitive-border-width-scale-thin: 0.0625rem; /** Thin border width - subtle borders */
  --lufa-primitive-border-width-scale-base: 0.125rem; /** Base border width - emphasized borders */
  --lufa-primitive-border-width-scale-thick: 0.25rem; /** Thick border width - very strong emphasis */
  --lufa-primitive-breakpoint-xs: 20rem; /** Extra small - Mobile portrait (320px+) */
  --lufa-primitive-breakpoint-sm: 40rem; /** Small - Mobile landscape, large phones (640px+) */
  --lufa-primitive-breakpoint-md: 48rem; /** Medium - Tablets portrait (768px+) */
  --lufa-primitive-breakpoint-lg: 64rem; /** Large - Tablets landscape, small desktops (1024px+) */
  --lufa-primitive-breakpoint-xl: 80rem; /** Extra large - Desktop (1280px+) */
  --lufa-primitive-breakpoint-2xl: 96rem; /** 2X Extra large - Large desktop, ultra-wide (1536px+) */
  --lufa-primitive-color-gray-50: #f9fafb; /** Lightest gray - backgrounds, subtle borders */
  --lufa-primitive-color-gray-100: #f3f4f6; /** Very light gray - hover states, disabled backgrounds */
  --lufa-primitive-color-gray-200: #e5e7eb; /** Light gray - borders, separators */
  --lufa-primitive-color-gray-300: #d1d5db; /** Medium-light gray - inactive elements */
  --lufa-primitive-color-gray-400: #9ca3af; /** Medium gray - placeholders, disabled text */
  --lufa-primitive-color-gray-500: #6b7280; /** Base gray - secondary text, icons */
  --lufa-primitive-color-gray-600: #4b5563; /** Dark gray - primary text, headings */
  --lufa-primitive-color-gray-700: #374151; /** Darker gray - accented text */
  --lufa-primitive-color-gray-800: #1f2937; /** Very dark gray - high contrast text */
  --lufa-primitive-color-gray-900: #111827; /** Darkest gray - maximum contrast text */
  --lufa-primitive-color-blue-50: #eff6ff; /** Lightest blue - info backgrounds */
  --lufa-primitive-color-blue-100: #dbeafe; /** Very light blue - info hover states */
  --lufa-primitive-color-blue-200: #bfdbfe; /** Light blue - info borders */
  --lufa-primitive-color-blue-300: #93c5fd; /** Medium-light blue - disabled info elements */
  --lufa-primitive-color-blue-400: #60a5fa; /** Medium blue - info icons */
  --lufa-primitive-color-blue-500: #3b82f6; /** Base blue - brand primary, links */
  --lufa-primitive-color-blue-600: #2563eb; /** Dark blue - primary hover */
  --lufa-primitive-color-blue-700: #1d4ed8; /** Darker blue - primary active */
  --lufa-primitive-color-blue-800: #1e40af; /** Very dark blue - primary high contrast */
  --lufa-primitive-color-blue-900: #1e3a8a; /** Darkest blue - primary maximum contrast */
  --lufa-primitive-color-red-50: #fef2f2; /** Lightest red - error backgrounds */
  --lufa-primitive-color-red-100: #fee2e2; /** Very light red - error hover states */
  --lufa-primitive-color-red-200: #fecaca; /** Light red - error borders */
  --lufa-primitive-color-red-300: #fca5a5; /** Medium-light red - disabled error elements */
  --lufa-primitive-color-red-400: #f87171; /** Medium red - error icons */
  --lufa-primitive-color-red-500: #ef4444; /** Base red - error states, destructive actions */
  --lufa-primitive-color-red-600: #dc2626; /** Dark red - error hover */
  --lufa-primitive-color-red-700: #b91c1c; /** Darker red - error active */
  --lufa-primitive-color-red-800: #991b1b; /** Very dark red - error high contrast */
  --lufa-primitive-color-red-900: #7f1d1d; /** Darkest red - error maximum contrast */
  --lufa-primitive-color-green-50: #f0fdf4; /** Lightest green - success backgrounds */
  --lufa-primitive-color-green-100: #dcfce7; /** Very light green - success hover states */
  --lufa-primitive-color-green-200: #bbf7d0; /** Light green - success borders */
  --lufa-primitive-color-green-300: #86efac; /** Medium-light green - disabled success elements */
  --lufa-primitive-color-green-400: #4ade80; /** Medium green - success icons */
  --lufa-primitive-color-green-500: #22c55e; /** Base green - success states, positive actions */
  --lufa-primitive-color-green-600: #16a34a; /** Dark green - success hover */
  --lufa-primitive-color-green-700: #15803d; /** Darker green - success active */
  --lufa-primitive-color-green-800: #166534; /** Very dark green - success high contrast */
  --lufa-primitive-color-green-900: #14532d; /** Darkest green - success maximum contrast */
  --lufa-primitive-color-yellow-50: #fefce8; /** Lightest yellow - alert backgrounds */
  --lufa-primitive-color-yellow-100: #fef9c3; /** Very light yellow - alert hover states */
  --lufa-primitive-color-yellow-200: #fef08a; /** Light yellow - alert borders */
  --lufa-primitive-color-yellow-300: #fde047; /** Medium-light yellow - disabled alert elements */
  --lufa-primitive-color-yellow-400: #facc15; /** Medium yellow - alert icons */
  --lufa-primitive-color-yellow-500: #eab308; /** Base yellow - alert states, attention */
  --lufa-primitive-color-yellow-600: #ca8a04; /** Dark yellow - alert hover */
  --lufa-primitive-color-yellow-700: #a16207; /** Darker yellow - alert active */
  --lufa-primitive-color-yellow-800: #854d0e; /** Very dark yellow - alert high contrast */
  --lufa-primitive-color-yellow-900: #713f12; /** Darkest yellow - alert maximum contrast */
  --lufa-primitive-color-purple-50: #faf5ff; /** Lightest purple - accent backgrounds */
  --lufa-primitive-color-purple-100: #f3e8ff; /** Very light purple - accent hover states */
  --lufa-primitive-color-purple-200: #e9d5ff; /** Light purple - accent borders */
  --lufa-primitive-color-purple-300: #d8b4fe; /** Medium-light purple - disabled accent elements */
  --lufa-primitive-color-purple-400: #c084fc; /** Medium purple - accent icons */
  --lufa-primitive-color-purple-500: #a855f7; /** Base purple - secondary brand, accent */
  --lufa-primitive-color-purple-600: #9333ea; /** Dark purple - accent hover */
  --lufa-primitive-color-purple-700: #7e22ce; /** Darker purple - accent active */
  --lufa-primitive-color-purple-800: #6b21a8; /** Very dark purple - accent high contrast */
  --lufa-primitive-color-purple-900: #581c87; /** Darkest purple - accent maximum contrast */
  --lufa-primitive-color-hc-black: #000000; /** Pure black for high-contrast text and borders - WCAG AAA compliant */
  --lufa-primitive-color-hc-white: #ffffff; /** Pure white for high-contrast backgrounds and inverse text */
  --lufa-primitive-color-hc-blue: #0000ff; /** Pure blue for high-contrast primary actions and links */
  --lufa-primitive-color-hc-red: #ff0000; /** Pure red for high-contrast error states and destructive actions */
  --lufa-primitive-color-hc-green: #00ff00; /** Pure green for high-contrast success states and positive feedback */
  --lufa-primitive-color-hc-yellow: #ffff00; /** Pure yellow for high-contrast warning states and alerts */
  --lufa-primitive-color-hc-purple: #9900ff; /** Pure purple for high-contrast visited links and secondary accents */
  --lufa-primitive-color-alpha-black-4: rgba(0, 0, 0, 0.04); /** 4% opacity black - ultra-subtle overlay */
  --lufa-primitive-color-alpha-black-5: rgba(0, 0, 0, 0.05); /** 5% opacity black - ultra-subtle shadow layer */
  --lufa-primitive-color-alpha-black-8: rgba(0, 0, 0, 0.08); /** 8% opacity black - hover state overlay */
  --lufa-primitive-color-alpha-black-12: rgba(0, 0, 0, 0.12); /** 12% opacity black - hover/scrim variant */
  --lufa-primitive-color-alpha-black-15: rgba(0, 0, 0, 0.15); /** 15% opacity black - soft shadow layer */
  --lufa-primitive-color-alpha-black-16: rgba(0, 0, 0, 0.16); /** 16% opacity black - subtle overlay */
  --lufa-primitive-color-alpha-black-38: rgba(0, 0, 0, 0.38); /** 38% opacity black - disabled state standard (Material Design) */
  --lufa-primitive-color-alpha-black-50: rgba(0, 0, 0, 0.5); /** 50% opacity black - balanced overlay */
  --lufa-primitive-color-alpha-black-60: rgba(0, 0, 0, 0.6); /** 60% opacity black - medium overlay */
  --lufa-primitive-color-alpha-black-80: rgba(0, 0, 0, 0.8); /** 80% opacity black - strong overlay */
  --lufa-primitive-color-alpha-black-90: rgba(0, 0, 0, 0.9); /** 90% opacity black - very strong overlay */
  --lufa-primitive-color-alpha-black-100: #000000; /** Solid black - reference value */
  --lufa-primitive-color-alpha-white-4: rgba(255, 255, 255, 0.04); /** 4% opacity white - ultra-subtle overlay */
  --lufa-primitive-color-alpha-white-5: rgba(255, 255, 255, 0.05); /** 5% opacity white - ultra-subtle shadow layer */
  --lufa-primitive-color-alpha-white-8: rgba(255, 255, 255, 0.08); /** 8% opacity white - hover state overlay */
  --lufa-primitive-color-alpha-white-12: rgba(255, 255, 255, 0.12); /** 12% opacity white - hover/scrim variant */
  --lufa-primitive-color-alpha-white-15: rgba(255, 255, 255, 0.15); /** 15% opacity white - soft shadow layer */
  --lufa-primitive-color-alpha-white-16: rgba(255, 255, 255, 0.16); /** 16% opacity white - subtle overlay */
  --lufa-primitive-color-alpha-white-38: rgba(255, 255, 255, 0.38); /** 38% opacity white - disabled state standard */
  --lufa-primitive-color-alpha-white-50: rgba(255, 255, 255, 0.5); /** 50% opacity white - balanced overlay */
  --lufa-primitive-color-alpha-white-60: rgba(255, 255, 255, 0.6); /** 60% opacity white - medium overlay */
  --lufa-primitive-color-alpha-white-80: rgba(255, 255, 255, 0.8); /** 80% opacity white - strong overlay */
  --lufa-primitive-color-alpha-white-90: rgba(255, 255, 255, 0.9); /** 90% opacity white - very strong overlay */
  --lufa-primitive-color-alpha-white-100: #ffffff; /** Solid white - reference value */
  --lufa-primitive-height-24: 1.5rem; /** Extra small height - Compact UI elements */
  --lufa-primitive-height-32: 2rem; /** Small height - Compact buttons, inputs */
  --lufa-primitive-height-40: 2.5rem; /** Default height - Standard buttons, inputs */
  --lufa-primitive-height-48: 3rem; /** Large height - Prominent buttons, touch-friendly */
  --lufa-primitive-height-56: 3.5rem; /** Extra large height - Headers, app bars */
  --lufa-primitive-height-64: 4rem; /** 2X large height - Desktop headers */
  --lufa-primitive-height-80: 5rem; /** 3X large height - Hero elements */
  --lufa-primitive-height-96: 6rem; /** Maximum height - Extra large headers */
  --lufa-primitive-icon-size-scale-xs: 1rem; /** Extra small icon size - compact UI */
  --lufa-primitive-icon-size-scale-sm: 1.25rem; /** Small icon size - standard UI */
  --lufa-primitive-icon-size-scale-md: 1.5rem; /** Medium icon size - emphasized UI */
  --lufa-primitive-icon-size-scale-lg: 2rem; /** Large icon size - prominent UI */
  --lufa-primitive-icon-size-scale-xl: 2.5rem; /** Extra large icon size - hero UI */
  --lufa-primitive-layout-sidebar-width: 17.5rem; /** Standard sidebar width for desktop navigation panels */
  --lufa-primitive-layout-content-max-width: 45rem; /** Maximum width for readable text content (optimal reading length ~65-75 characters) */
  --lufa-primitive-motion-duration-instant: 100ms; /** Instant duration for immediate feedback (100ms) */
  --lufa-primitive-motion-duration-fast: 150ms; /** Fast duration for quick transitions (150ms) */
  --lufa-primitive-motion-duration-normal: 300ms; /** Normal duration for standard transitions (300ms) */
  --lufa-primitive-motion-duration-slow: 500ms; /** Slow duration for deliberate transitions (500ms) */
  --lufa-primitive-motion-duration-slower: 2s; /** Very slow duration for continuous animations (2s) */
  --lufa-primitive-motion-easing-linear: cubic-bezier(0, 0, 1, 1); /** Linear easing - constant speed (no acceleration) */
  --lufa-primitive-motion-easing-ease-in: cubic-bezier(0.4, 0, 1, 1); /** Ease-in - slow start, fast end (accelerating) */
  --lufa-primitive-motion-easing-ease-out: cubic-bezier(0, 0, 0.2, 1); /** Ease-out - fast start, slow end (decelerating) */
  --lufa-primitive-motion-easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /** Ease-in-out - slow start and end (smooth) */
  --lufa-primitive-motion-easing-ease: ease; /** Standard ease - browser default easing */
  --lufa-primitive-motion-easing-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /** Bounce easing - overshoots and settles back (playful) */
  --lufa-primitive-motion-easing-ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275); /** Elastic easing - slight overshoot (energetic) */
  --lufa-primitive-opacity-scale-disabled: 0.38; /** Opacity for disabled states (Material Design standard - 38%) */
  --lufa-primitive-opacity-scale-placeholder: 0.5; /** Opacity for placeholder elements (50%) */
  --lufa-primitive-opacity-scale-loading: 0.6; /** Opacity for loading states (60%) */
  --lufa-primitive-radius-scale-none: 0rem; /** No rounding - sharp corners */
  --lufa-primitive-radius-scale-sm: 0.125rem; /** Small radius - slightly rounded corners */
  --lufa-primitive-radius-scale-base: 0.25rem; /** Base radius - standard rounding for most elements */
  --lufa-primitive-radius-scale-md: 0.375rem; /** Medium radius - more pronounced rounding */
  --lufa-primitive-radius-scale-lg: 0.5rem; /** Large radius - generous rounding */
  --lufa-primitive-radius-scale-xl: 0.75rem; /** Extra large radius - very pronounced rounding */
  --lufa-primitive-radius-scale-2xl: 1rem; /** 2X Extra large radius - highly pronounced rounding */
  --lufa-primitive-radius-scale-full: 624.9375rem; /** Full radius - perfect circle or pill shape */
  --lufa-primitive-shadow-elevation-none: 0px 0px 0px 0px rgba(0, 0, 0, 0); /** No shadow - surface at base level */
  --lufa-primitive-shadow-elevation-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05); /** Small shadow - subtle elevation for cards and panels */
  --lufa-primitive-shadow-elevation-base: 0px 2px 4px 0px rgba(0, 0, 0, 0.1); /** Base shadow - standard elevation for cards */
  --lufa-primitive-shadow-elevation-md: 0px 4px 6px 0px rgba(0, 0, 0, 0.1); /** Medium shadow - elevation for dropdowns and popovers */
  --lufa-primitive-shadow-elevation-lg: 0px 8px 16px 0px rgba(0, 0, 0, 0.12); /** Large shadow - elevation for modals and sidebars */
  --lufa-primitive-shadow-elevation-xl: 0px 12px 24px 0px rgba(0, 0, 0, 0.15); /** Extra large shadow - maximum elevation for floating elements */
  --lufa-primitive-spacing-0: 0rem; /** Zero spacing - reset/remove gaps */
  --lufa-primitive-spacing-4: 0.25rem; /** Extra tight - minimal gaps between related elements */
  --lufa-primitive-spacing-8: 0.5rem; /** Tight - compact layouts, inline spacing */
  --lufa-primitive-spacing-12: 0.75rem; /** Comfortable - default element spacing */
  --lufa-primitive-spacing-16: 1rem; /** Base spacing - standard component gaps */
  --lufa-primitive-spacing-24: 1.5rem; /** Spacious - wider gaps between sections */
  --lufa-primitive-spacing-32: 2rem; /** Ample - major section spacing */
  --lufa-primitive-spacing-40: 2.5rem; /** Extra ample - emphasized spacing */
  --lufa-primitive-spacing-48: 3rem; /** Very ample - prominent gaps */
  --lufa-primitive-spacing-64: 4rem; /** Large - large page sections */
  --lufa-primitive-spacing-80: 5rem; /** Extra large - major layout spacing */
  --lufa-primitive-spacing-96: 6rem; /** Maximum - largest spacing value */
  --lufa-primitive-typography-font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /** System sans-serif font stack - optimized for readability, 0kb download */
  --lufa-primitive-typography-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /** System monospace font stack - code blocks, technical content */
  --lufa-primitive-typography-font-size-xs: 0.75rem; /** Extra small font size - used for tiny labels, footnotes */
  --lufa-primitive-typography-font-size-sm: 0.875rem; /** Small font size - used for secondary text, descriptions */
  --lufa-primitive-typography-font-size-base: 1rem; /** Base font size - default size for body text */
  --lufa-primitive-typography-font-size-lg: 1.125rem; /** Large font size - used for emphasized text */
  --lufa-primitive-typography-font-size-xl: 1.25rem; /** Extra large font size - used for subtitles */
  --lufa-primitive-typography-font-size-2xl: clamp(1.25rem, 1rem + 1vw, 1.5rem); /** 2x extra large font size - fluid scaling from mobile to desktop */
  --lufa-primitive-typography-font-size-3xl: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); /** 3x extra large font size - fluid scaling from mobile to desktop */
  --lufa-primitive-typography-font-size-4xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem); /** 4x extra large font size - fluid scaling from mobile to desktop */
  --lufa-primitive-typography-font-size-5xl: clamp(2rem, 1.5rem + 2vw, 3rem); /** 5x extra large font size - fluid scaling from mobile to desktop */
  --lufa-primitive-typography-font-size-6xl: clamp(2.5rem, 2rem + 2.5vw, 3.75rem); /** 6x extra large font size - fluid scaling for hero headlines and featured content */
  --lufa-primitive-typography-font-size-7xl: clamp(3rem, 2.5rem + 3vw, 4.5rem); /** 7x extra large font size - fluid scaling for marketing hero sections */
  --lufa-primitive-typography-font-size-8xl: clamp(4rem, 3rem + 4vw, 6rem); /** 8x extra large font size - fluid scaling for display text and brand impact moments (scales from 400px+ viewport) */
  --lufa-primitive-typography-font-weight-normal: 400; /** Normal font weight - used for standard body text */
  --lufa-primitive-typography-font-weight-medium: 500; /** Medium font weight - used for subtle emphasis */
  --lufa-primitive-typography-font-weight-semibold: 600; /** Semibold font weight - used for subtitles and strong emphasis */
  --lufa-primitive-typography-font-weight-bold: 700; /** Bold font weight - used for headings and important elements */
  --lufa-primitive-typography-letter-spacing-tighter: -0.0025rem; /** Extra tight letter spacing for very large headings and display text */
  --lufa-primitive-typography-letter-spacing-tight: -0.00125rem; /** Tight letter spacing for large headings */
  --lufa-primitive-typography-letter-spacing-normal: 0rem; /** Normal letter spacing for body text and default use */
  --lufa-primitive-typography-letter-spacing-wide: 0.003125rem; /** Wide letter spacing for small text and uppercase labels */
  --lufa-primitive-typography-letter-spacing-wider: 0.00625rem; /** Extra wide letter spacing for all-caps headings and emphasis */
  --lufa-primitive-typography-line-height-tight: 1.25; /** Tight line height - used for headings and short text */
  --lufa-primitive-typography-line-height-normal: 1.5; /** Normal line height - used for standard body text (WCAG recommended) */
  --lufa-primitive-typography-line-height-relaxed: 1.75; /** Relaxed line height - used for better readability of long text */
  --lufa-core-color-alpha-black-4: var(--lufa-primitive-color-alpha-black-4); /** Ultra-subtle black overlay - hover state on light surfaces */
  --lufa-core-color-alpha-black-8: var(--lufa-primitive-color-alpha-black-8); /** Subtle black overlay - pressed states and focus glow on light surfaces */
  --lufa-core-color-alpha-black-16: var(--lufa-primitive-color-alpha-black-16); /** Light black overlay - selected states and focus ring on light surfaces */
  --lufa-core-color-alpha-black-38: var(--lufa-primitive-color-alpha-black-38); /** Medium black overlay - scrim for bottom sheets and drawers */
  --lufa-core-color-alpha-black-50: var(--lufa-primitive-color-alpha-black-50); /** Half-opacity black overlay - modal backdrops in light mode */
  --lufa-core-color-alpha-black-60: var(--lufa-primitive-color-alpha-black-60); /** Strong black overlay - scrim in dark mode */
  --lufa-core-color-alpha-black-80: var(--lufa-primitive-color-alpha-black-80); /** Very strong black overlay - modal backdrops in dark mode, high-contrast scrim */
  --lufa-core-color-alpha-black-90: var(--lufa-primitive-color-alpha-black-90); /** Near-opaque black overlay - high-contrast modal backdrops */
  --lufa-core-color-alpha-white-8: var(--lufa-primitive-color-alpha-white-8); /** Subtle white overlay - hover state on dark surfaces */
  --lufa-core-color-alpha-white-16: var(--lufa-primitive-color-alpha-white-16); /** Light white overlay - pressed/selected states on dark surfaces */
  --lufa-core-layout-container-sm: var(--lufa-primitive-breakpoint-sm); /** Small container max-width (640px) */
  --lufa-core-layout-container-md: var(--lufa-primitive-breakpoint-md); /** Medium container max-width (768px) */
  --lufa-core-layout-container-lg: var(--lufa-primitive-breakpoint-lg); /** Large container max-width (1024px) */
  --lufa-core-layout-container-xl: var(--lufa-primitive-breakpoint-xl); /** Extra large container max-width (1280px) */
  --lufa-core-layout-container-2xl: var(--lufa-primitive-breakpoint-2xl); /** 2X extra large container max-width (1536px) */
  --lufa-core-layout-container-gutter-base: var(--lufa-primitive-spacing-16); /** Horizontal gutter between container and content on mobile */
  --lufa-core-layout-container-gutter-md: var(--lufa-primitive-spacing-24); /** Horizontal gutter between container and content on tablet */
  --lufa-core-layout-container-gutter-lg: var(--lufa-primitive-spacing-32); /** Horizontal gutter between container and content on desktop */
  --lufa-core-layout-container-gutter-fluid: clamp(16px, 4vw, 48px); /** Fluid container gutters (scales from 16px to 48px) */
  --lufa-core-layout-content-max-width: var(--lufa-primitive-layout-content-max-width); /** Maximum width for readable text content (optimal reading length) */
  --lufa-core-layout-grid-columns: 12; /** Standard 12-column grid system */
  --lufa-core-layout-grid-gap-tight: var(--lufa-primitive-spacing-8); /** Tight gap between grid items (8px) */
  --lufa-core-layout-grid-gap-default: var(--lufa-primitive-spacing-16); /** Default gap between grid items (16px) */
  --lufa-core-layout-grid-gap-comfortable: var(--lufa-primitive-spacing-24); /** Comfortable gap between grid items (24px) */
  --lufa-core-layout-grid-gap-spacious: var(--lufa-primitive-spacing-32); /** Spacious gap between grid items (32px) */
  --lufa-core-layout-grid-min-column-width: 17.5rem; /** Minimum width for grid columns in auto-fit/auto-fill layouts */
  --lufa-core-layout-header-height-base: var(--lufa-primitive-height-56); /** Header height for mobile viewports */
  --lufa-core-layout-header-height-md: var(--lufa-primitive-height-64); /** Header height for tablet and desktop viewports */
  --lufa-core-layout-header-height-lg: var(--lufa-primitive-height-64); /** Header height for large desktop viewports */
  --lufa-core-layout-hero-padding-fluid: clamp(32px, 6vw, 80px); /** Fluid padding for hero sections (scales from 32px to 80px) */
  --lufa-core-layout-modal-padding-base: var(--lufa-primitive-spacing-24); /** Internal padding for modals on mobile */
  --lufa-core-layout-modal-padding-md: var(--lufa-primitive-spacing-32); /** Internal padding for modals on tablet */
  --lufa-core-layout-modal-padding-lg: var(--lufa-primitive-spacing-40); /** Internal padding for modals on desktop */
  --lufa-core-layout-page-padding-base: var(--lufa-primitive-spacing-16); /** Horizontal padding for page container on mobile viewports */
  --lufa-core-layout-page-padding-md: var(--lufa-primitive-spacing-24); /** Horizontal padding for page container on tablet viewports */
  --lufa-core-layout-page-padding-lg: var(--lufa-primitive-spacing-32); /** Horizontal padding for page container on desktop viewports */
  --lufa-core-layout-page-margin-fluid: clamp(16px, 3vw, 32px); /** Fluid page margins (scales from 16px to 32px) */
  --lufa-core-layout-section-gap-base: var(--lufa-primitive-spacing-48); /** Vertical spacing between major page sections on mobile */
  --lufa-core-layout-section-gap-md: var(--lufa-primitive-spacing-64); /** Vertical spacing between major page sections on tablet */
  --lufa-core-layout-section-gap-lg: var(--lufa-primitive-spacing-80); /** Vertical spacing between major page sections on desktop */
  --lufa-core-layout-section-gap-fluid: clamp(48px, 8vw, 96px); /** Fluid vertical spacing between major sections (scales from 48px to 96px) */
  --lufa-core-layout-sidebar-width: var(--lufa-primitive-layout-sidebar-width); /** Standard width for sidebar navigation (desktop) */
  --lufa-core-typography-body-font-family: var(--lufa-primitive-typography-font-family-sans); /** Font family for body text and general content */
  --lufa-core-typography-body-font-weight: var(--lufa-primitive-typography-font-weight-normal); /** Font weight for body text */
  --lufa-core-typography-body-font-size-large: var(--lufa-primitive-typography-font-size-lg); /** Large body text size */
  --lufa-core-typography-body-font-size-default: var(--lufa-primitive-typography-font-size-base); /** Default body text size (16px) */
  --lufa-core-typography-body-font-size-small: var(--lufa-primitive-typography-font-size-sm); /** Small body text size */
  --lufa-core-typography-body-line-height: var(--lufa-primitive-typography-line-height-normal); /** Line height for body text (1.5 for optimal readability) */
  --lufa-core-typography-button-font-size: var(--lufa-primitive-typography-font-size-base); /** Font size for button text */
  --lufa-core-typography-caption-font-size: var(--lufa-primitive-typography-font-size-xs); /** Font size for captions and metadata */
  --lufa-core-typography-code-font-family: var(--lufa-primitive-typography-font-family-mono); /** Monospace font family for code and technical content */
  --lufa-core-typography-heading-font-family: var(--lufa-primitive-typography-font-family-sans); /** Font family for all heading levels (h1-h6) */
  --lufa-core-typography-heading-font-weight: var(--lufa-primitive-typography-font-weight-bold); /** Font weight for all heading levels */
  --lufa-core-typography-heading-letter-spacing: var(--lufa-primitive-typography-letter-spacing-tight); /** Letter spacing for headings — tight by default, override per theme */
  --lufa-core-typography-heading-font-size-h1: var(--lufa-primitive-typography-font-size-5xl); /** Font size for H1 headings (largest) */
  --lufa-core-typography-heading-font-size-h2: var(--lufa-primitive-typography-font-size-4xl); /** Font size for H2 headings */
  --lufa-core-typography-heading-font-size-h3: var(--lufa-primitive-typography-font-size-3xl); /** Font size for H3 headings */
  --lufa-core-typography-heading-font-size-h4: var(--lufa-primitive-typography-font-size-2xl); /** Font size for H4 headings */
  --lufa-core-typography-heading-font-size-h5: var(--lufa-primitive-typography-font-size-xl); /** Font size for H5 headings */
  --lufa-core-typography-heading-font-size-h6: var(--lufa-primitive-typography-font-size-lg); /** Font size for H6 headings (smallest) */
  --lufa-core-typography-label-font-size: var(--lufa-primitive-typography-font-size-sm); /** Font size for form labels and UI labels */
  --lufa-core-typography-medium-font-weight: var(--lufa-primitive-typography-font-weight-medium); /** Font weight for medium emphasis text (labels, navigation, subtle highlights) */
  --lufa-core-typography-small-font-size: var(--lufa-primitive-typography-font-size-sm); /** Font size for small text and captions */
  --lufa-core-typography-strong-font-weight: var(--lufa-primitive-typography-font-weight-semibold); /** Font weight for emphasized/strong text */
  --lufa-semantic-effect-glow-box-none: none; /** No box glow effect (default for most components) */
  --lufa-semantic-effect-glow-box-primary-default: none; /** Primary box glow effect for interactive elements (cards, buttons) - themeable */
  --lufa-semantic-effect-glow-box-primary-hover: none; /** Enhanced primary box glow on hover - themeable */
  --lufa-semantic-effect-glow-box-focus: 0 0 0 3px rgba(0, 0, 0, 0.16); /** Focus ring glow for accessibility - neutral alpha token, themeable via theme overrides */
  --lufa-semantic-effect-glow-text-none: none; /** No text glow effect (default) */
  --lufa-semantic-effect-glow-text-primary-default: none; /** Primary text glow for neon/cyberpunk effects - themeable */
  --lufa-semantic-effect-glow-text-primary-hover: none; /** Enhanced text glow on hover - themeable */
  --lufa-semantic-effect-glow-border-none: none; /** No border glow effect (default) */
  --lufa-semantic-effect-glow-border-focus: 0 0 0 2px rgba(0, 0, 0, 0.08); /** Border glow for focused inputs - neutral alpha token, themeable via theme overrides */
  --lufa-semantic-z-index-base: 0; /** Base z-index for normal content flow */
  --lufa-semantic-z-index-dropdown: 1000; /** Z-index for dropdown menus - above normal content */
  --lufa-semantic-z-index-sticky: 1100; /** Z-index for sticky positioned elements - above dropdowns */
  --lufa-semantic-z-index-fixed: 1200; /** Z-index for fixed positioned elements - above sticky elements */
  --lufa-semantic-z-index-modal-backdrop: 1300; /** Z-index for modal backdrops - overlays page content */
  --lufa-semantic-z-index-modal: 1400; /** Z-index for modal content - above modal backdrop */
  --lufa-semantic-z-index-popover: 1500; /** Z-index for popovers and tooltips - above modals */
  --lufa-semantic-z-index-toast: 1600; /** Z-index for toast notifications - highest layer for critical messages */
  --lufa-semantic-interactive-action-primary-default: var(--lufa-core-color-brand-primary-default); /** Primary action intent color - default state. Used for primary buttons, toggles, chips, and other actionable elements. */
  --lufa-semantic-interactive-action-primary-hover: var(--lufa-core-color-brand-primary-hover); /** Primary action intent color - hover state */
  --lufa-semantic-interactive-action-primary-active: var(--lufa-core-color-brand-primary-active); /** Primary action intent color - active/pressed state */
  --lufa-semantic-interactive-action-primary-on: var(--lufa-core-color-brand-primary-on-background); /** Text/icon color on primary action backgrounds - ensures WCAG AA contrast */
  --lufa-semantic-interactive-action-secondary-default: var(--lufa-core-color-brand-secondary-default); /** Secondary action intent color - default state. Used for secondary buttons, accents, and alternative actions. */
  --lufa-semantic-interactive-action-secondary-hover: var(--lufa-core-color-brand-secondary-hover); /** Secondary action intent color - hover state */
  --lufa-semantic-interactive-action-secondary-active: var(--lufa-core-color-brand-secondary-active); /** Secondary action intent color - active/pressed state */
  --lufa-semantic-interactive-action-secondary-on: var(--lufa-core-color-brand-secondary-on-background); /** Text/icon color on secondary action backgrounds - ensures WCAG AA contrast */
  --lufa-semantic-interactive-action-destructive-default: var(--lufa-core-color-feedback-error-default); /** Destructive action intent color - default state. Used for danger/delete buttons and destructive actions. */
  --lufa-semantic-interactive-action-destructive-hover: var(--lufa-core-color-feedback-error-hover); /** Destructive action intent color - hover state */
  --lufa-semantic-interactive-action-destructive-active: var(--lufa-core-color-feedback-error-active); /** Destructive action intent color - active/pressed state */
  --lufa-semantic-interactive-action-destructive-on: var(--lufa-core-color-feedback-error-on-background); /** Text/icon color on destructive action backgrounds - ensures WCAG AA contrast */
  --lufa-semantic-interactive-action-success-default: var(--lufa-core-color-feedback-success-default); /** Success action intent color - default state. Used for positive/confirmation action elements. */
  --lufa-semantic-interactive-action-success-hover: var(--lufa-core-color-feedback-success-hover); /** Success action intent color - hover state */
  --lufa-semantic-interactive-action-success-active: var(--lufa-core-color-feedback-success-active); /** Success action intent color - active/pressed state */
  --lufa-semantic-interactive-action-success-on: var(--lufa-core-color-feedback-success-on-background); /** Text/icon color on success action backgrounds - ensures WCAG AA contrast */
  --lufa-semantic-interactive-action-warning-default: var(--lufa-core-color-feedback-warning-default); /** Warning action intent color - default state. Used for caution/warning action elements. */
  --lufa-semantic-interactive-action-warning-hover: var(--lufa-core-color-feedback-warning-hover); /** Warning action intent color - hover state */
  --lufa-semantic-interactive-action-warning-active: var(--lufa-core-color-feedback-warning-active); /** Warning action intent color - active/pressed state */
  --lufa-semantic-interactive-action-warning-on: var(--lufa-core-color-feedback-warning-on-background); /** Text/icon color on warning action backgrounds - ensures WCAG AA contrast */
  --lufa-semantic-interactive-action-info-default: var(--lufa-core-color-feedback-info-default); /** Info action intent color - default state. Used for informational action elements. */
  --lufa-semantic-interactive-action-info-hover: var(--lufa-core-color-feedback-info-hover); /** Info action intent color - hover state */
  --lufa-semantic-interactive-action-info-active: var(--lufa-core-color-feedback-info-active); /** Info action intent color - active/pressed state */
  --lufa-semantic-interactive-action-info-on: var(--lufa-core-color-feedback-info-on-background); /** Text/icon color on info action backgrounds - ensures WCAG AA contrast */
  --lufa-semantic-interactive-action-neutral-default: var(--lufa-core-color-neutral-surface-default); /** Neutral action intent color - default state. Used for neutral/default action elements, slightly elevated above surface. */
  --lufa-semantic-interactive-action-neutral-hover: var(--lufa-core-color-neutral-surface-hover); /** Neutral action intent color - hover state */
  --lufa-semantic-interactive-action-neutral-active: var(--lufa-core-color-neutral-surface-active); /** Neutral action intent color - active/pressed state */
  --lufa-semantic-interactive-action-neutral-on: var(--lufa-core-color-neutral-text-primary); /** Text/icon color on neutral action backgrounds - uses primary text for readability */
  --lufa-semantic-interactive-background-default: var(--lufa-core-color-neutral-surface-default); /** Default background for interactive elements like buttons and inputs in their resting state */
  --lufa-semantic-interactive-background-hover: var(--lufa-core-color-neutral-surface-hover); /** Background color when hovering over interactive elements - provides visual feedback */
  --lufa-semantic-interactive-background-active: var(--lufa-core-color-brand-primary-active); /** Background color when pressing/clicking interactive elements - provides immediate feedback */
  --lufa-semantic-interactive-background-disabled: var(--lufa-core-color-neutral-surface-default); /** Background color for disabled interactive elements - indicates non-interactive state */
  --lufa-semantic-interactive-background-focus: var(--lufa-core-color-neutral-surface-default); /** Background color for focused interactive elements — same as default. Focus indication is provided by focus ring/border, not background change. */
  --lufa-semantic-interactive-border-default: var(--lufa-core-color-neutral-border-default); /** Default border color for interactive elements in resting state */
  --lufa-semantic-interactive-border-hover: var(--lufa-core-color-neutral-border-strong); /** Border color when hovering over interactive elements - stronger emphasis */
  --lufa-semantic-interactive-border-focus: var(--lufa-core-color-brand-primary-default); /** Border color for focused interactive elements - indicates keyboard focus and accessibility */
  --lufa-semantic-interactive-border-disabled: var(--lufa-core-color-neutral-border-default); /** Border color for disabled interactive elements - subtle indication of disabled state */
  --lufa-semantic-interactive-cursor-default: pointer; /** Default cursor for interactive elements (buttons, links, clickable items) */
  --lufa-semantic-interactive-cursor-disabled: not-allowed; /** Cursor for disabled interactive elements, indicating the action is not available */
  --lufa-semantic-interactive-cursor-loading: wait; /** Cursor for elements in a loading/busy state, indicating the user should wait */
  --lufa-semantic-interactive-focus-ring: var(--lufa-core-color-brand-primary-default); /** Color for focus rings around interactive elements - ensures accessibility compliance */
  --lufa-semantic-interactive-focus-ring-offset: var(--lufa-primitive-border-width-scale-base); /** Offset distance for focus rings from element edge - improves visibility (standard UX constant) */
  --lufa-semantic-interactive-focus-background: var(--lufa-core-color-brand-primary-default); /** Background color for focused interactive elements (rare use case) */
  --lufa-semantic-interactive-link-default: var(--lufa-core-color-brand-primary-default); /** Default link color for all link states in resting state */
  --lufa-semantic-interactive-link-hover: var(--lufa-core-color-brand-primary-hover); /** Link color when hovering - provides visual feedback */
  --lufa-semantic-interactive-link-visited: var(--lufa-core-color-brand-accent-visited); /** Color for visited links - helps users track navigation history */
  --lufa-semantic-interactive-link-focus: var(--lufa-core-color-brand-primary-default); /** Link color when focused via keyboard - accessibility focus state */
  --lufa-semantic-interactive-link-active: var(--lufa-core-color-brand-primary-active); /** Link color when being clicked/activated */
  --lufa-semantic-interactive-opacity-disabled: var(--lufa-primitive-opacity-scale-disabled); /** Opacity value for disabled interactive elements (Material Design standard) */
  --lufa-semantic-interactive-opacity-loading: var(--lufa-primitive-opacity-scale-loading); /** Opacity value for loading states and skeleton loaders */
  --lufa-semantic-interactive-opacity-placeholder: var(--lufa-primitive-opacity-scale-placeholder); /** Opacity value for placeholder text and empty states */
  --lufa-semantic-interactive-selected-background: var(--lufa-semantic-ui-overlay-selected); /** Background color for selected items in lists and menus */
  --lufa-semantic-interactive-selected-text: var(--lufa-core-color-brand-primary-default); /** Text color for selected items */
  --lufa-semantic-interactive-text-default: var(--lufa-core-color-neutral-text-primary); /** Default text color for interactive elements in resting state */
  --lufa-semantic-interactive-text-hover: var(--lufa-core-color-neutral-text-primary); /** Text color when hovering over interactive elements - maintains readability */
  --lufa-semantic-interactive-text-active: var(--lufa-core-color-neutral-text-primary); /** Text color when pressing/clicking interactive elements */
  --lufa-semantic-interactive-text-disabled: var(--lufa-core-color-neutral-text-disabled); /** Text color for disabled interactive elements - low contrast indicates non-interactive */
  --lufa-semantic-interactive-text-focus: var(--lufa-core-color-neutral-text-primary); /** Text color for focused interactive elements — same as default. Text color does not change on focus; the focus ring provides the visual indicator. */
  --lufa-semantic-layout-breakpoint-xs: var(--lufa-primitive-breakpoint-xs); /** Extra small layout breakpoint - mobile portrait */
  --lufa-semantic-layout-breakpoint-sm: var(--lufa-primitive-breakpoint-sm); /** Small layout breakpoint - mobile landscape, large phones */
  --lufa-semantic-layout-breakpoint-md: var(--lufa-primitive-breakpoint-md); /** Medium layout breakpoint - tablets portrait */
  --lufa-semantic-layout-breakpoint-lg: var(--lufa-primitive-breakpoint-lg); /** Large layout breakpoint - tablets landscape, small desktops */
  --lufa-semantic-layout-breakpoint-xl: var(--lufa-primitive-breakpoint-xl); /** Extra large layout breakpoint - desktop */
  --lufa-semantic-layout-breakpoint-2xl: var(--lufa-primitive-breakpoint-2xl); /** 2X extra large layout breakpoint - large desktop, ultra-wide */
  --lufa-semantic-typography-body-large: var(--lufa-core-typography-body-font-size-large); /** Large body text size - for emphasized paragraphs and lead text */
  --lufa-semantic-typography-body-default: var(--lufa-core-typography-body-font-size-default); /** Default body text size - standard for all paragraphs and content */
  --lufa-semantic-typography-body-small: var(--lufa-core-typography-body-font-size-small); /** Small body text size - for secondary content and descriptions */
  --lufa-semantic-typography-button: var(--lufa-core-typography-button-font-size); /** Button text size - for button labels and CTAs */
  --lufa-semantic-typography-caption: var(--lufa-core-typography-caption-font-size); /** Caption text size - smallest text for metadata and labels */
  --lufa-semantic-typography-heading-h1: var(--lufa-core-typography-heading-font-size-h1); /** Font size for H1 headings - largest heading for page titles and hero sections */
  --lufa-semantic-typography-heading-h2: var(--lufa-core-typography-heading-font-size-h2); /** Font size for H2 headings - major section titles */
  --lufa-semantic-typography-heading-h3: var(--lufa-core-typography-heading-font-size-h3); /** Font size for H3 headings - subsection titles */
  --lufa-semantic-typography-heading-h4: var(--lufa-core-typography-heading-font-size-h4); /** Font size for H4 headings - minor section titles */
  --lufa-semantic-typography-heading-h5: var(--lufa-core-typography-heading-font-size-h5); /** Font size for H5 headings - small section titles */
  --lufa-semantic-typography-heading-h6: var(--lufa-core-typography-heading-font-size-h6); /** Font size for H6 headings - smallest heading level */
  --lufa-semantic-typography-label: var(--lufa-core-typography-label-font-size); /** Label text size - for form labels and UI labels */
  --lufa-semantic-ui-animation-pulse-duration: var(--lufa-primitive-motion-duration-slower); /** Duration for pulse animation (breathing, pulsing effects) */
  --lufa-semantic-ui-animation-pulse-timing: var(--lufa-primitive-motion-easing-ease-in-out); /** Timing function for pulse animation */
  --lufa-semantic-ui-animation-shimmer-duration: var(--lufa-primitive-motion-duration-slower); /** Duration for shimmer animation (loading skeleton, shine effects) */
  --lufa-semantic-ui-animation-shimmer-timing: var(--lufa-primitive-motion-easing-linear); /** Timing function for shimmer animation */
  --lufa-semantic-ui-animation-slide-in-duration: var(--lufa-primitive-motion-duration-normal); /** Duration for slide-in animation */
  --lufa-semantic-ui-animation-slide-in-timing: var(--lufa-primitive-motion-easing-ease-out); /** Timing function for slide-in animation */
  --lufa-semantic-ui-background-pattern: none; /** Optional decorative background pattern overlay — none by default, themeable via theme overrides */
  --lufa-semantic-ui-background-page: var(--lufa-core-color-neutral-background); /** Main page background - base canvas for entire application */
  --lufa-semantic-ui-background-surface-default: var(--lufa-core-color-neutral-surface-default); /** Surface background for cards, panels, and elevated content */
  --lufa-semantic-ui-background-surface-raised: var(--lufa-core-color-neutral-surface-raised); /** Raised surface background - slightly elevated above default surface */
  --lufa-semantic-ui-background-surface-active: var(--lufa-core-color-neutral-surface-active); /** Active surface background - for pressed/active interactive surfaces */
  --lufa-semantic-ui-background-success: var(--lufa-core-color-feedback-success-subtle); /** Background for success messages and positive feedback */
  --lufa-semantic-ui-background-error: var(--lufa-core-color-feedback-error-subtle); /** Background for error messages and validation failures */
  --lufa-semantic-ui-background-warning: var(--lufa-core-color-feedback-warning-subtle); /** Background for warning messages and caution notices */
  --lufa-semantic-ui-background-info: var(--lufa-core-color-feedback-info-subtle); /** Background for informational messages and neutral notifications */
  --lufa-semantic-ui-background-on-success: var(--lufa-core-color-feedback-success-default); /** Text and icons on success background - for use with background-success (subtle background) */
  --lufa-semantic-ui-background-on-error: var(--lufa-core-color-feedback-error-default); /** Text and icons on error background - for use with background-error (subtle background) */
  --lufa-semantic-ui-background-on-warning: var(--lufa-core-color-feedback-warning-default); /** Text and icons on warning background - for use with background-warning (subtle background) */
  --lufa-semantic-ui-background-on-info: var(--lufa-core-color-feedback-info-default); /** Text and icons on info background - for use with background-info (subtle background) */
  --lufa-semantic-ui-background-on-primary: var(--lufa-core-color-brand-primary-on-background); /** Text and icons on primary brand background - themeable for accessibility */
  --lufa-semantic-ui-background-on-secondary: var(--lufa-core-color-brand-secondary-on-background); /** Text and icons on secondary brand background - themeable for accessibility */
  --lufa-semantic-ui-border-radius-small: var(--lufa-primitive-radius-scale-base); /** Small border radius for subtle rounding (4px) */
  --lufa-semantic-ui-border-radius-default: var(--lufa-primitive-radius-scale-lg); /** Default border radius for standard components (8px - most common) */
  --lufa-semantic-ui-border-radius-medium: var(--lufa-primitive-radius-scale-xl); /** Medium border radius for emphasized rounding (12px) */
  --lufa-semantic-ui-border-radius-large: var(--lufa-primitive-radius-scale-2xl); /** Large border radius for prominent rounding (16px) */
  --lufa-semantic-ui-border-radius-full: var(--lufa-primitive-radius-scale-full); /** Full border radius for pill-shaped elements (9999px) */
  --lufa-semantic-ui-border-width-thin: var(--lufa-primitive-border-width-scale-thin); /** Thin border width for subtle borders (1px) */
  --lufa-semantic-ui-border-width-medium: var(--lufa-primitive-border-width-scale-base); /** Medium border width for emphasized borders (2px) */
  --lufa-semantic-ui-border-width-thick: var(--lufa-primitive-border-width-scale-thick); /** Thick border width for very strong emphasis (4px) */
  --lufa-semantic-ui-text-primary: var(--lufa-core-color-neutral-text-primary); /** Primary text color for headings and body content */
  --lufa-semantic-ui-text-secondary: var(--lufa-core-color-neutral-text-secondary); /** Secondary text color for supporting content */
  --lufa-semantic-ui-text-tertiary: var(--lufa-core-color-neutral-text-tertiary); /** Tertiary text color for subtle content */
  --lufa-semantic-ui-text-success: var(--lufa-core-color-feedback-success-default); /** Text color for success messages and positive feedback */
  --lufa-semantic-ui-text-error: var(--lufa-core-color-feedback-error-default); /** Text color for error messages and validation failures */
  --lufa-semantic-ui-text-warning: var(--lufa-core-color-feedback-warning-default); /** Text color for warning messages and caution notices */
  --lufa-semantic-ui-text-info: var(--lufa-core-color-feedback-info-default); /** Text color for informational messages */
  --lufa-semantic-ui-border-default: var(--lufa-core-color-neutral-border-default); /** Default border color for dividers and element boundaries */
  --lufa-semantic-ui-border-strong: var(--lufa-core-color-neutral-border-strong); /** Stronger border for emphasis and visual hierarchy */
  --lufa-semantic-ui-border-success: var(--lufa-core-color-feedback-success-border); /** Border color for success contexts */
  --lufa-semantic-ui-border-error: var(--lufa-core-color-feedback-error-border); /** Border color for error contexts */
  --lufa-semantic-ui-border-warning: var(--lufa-core-color-feedback-warning-border); /** Border color for warning contexts */
  --lufa-semantic-ui-border-info: var(--lufa-core-color-feedback-info-border); /** Border color for informational contexts */
  --lufa-semantic-ui-typography-caption: var(--lufa-semantic-typography-caption); /** Caption text size alias for UI components */
  --lufa-semantic-ui-divider-dash-size: var(--lufa-primitive-spacing-8); /** Length of each dash segment in a dashed divider */
  --lufa-semantic-ui-divider-dash-gap: var(--lufa-primitive-spacing-12); /** Total step between dash starts (dash + gap) in a dashed divider */
  --lufa-semantic-ui-height-sm: var(--lufa-primitive-height-32); /** Small UI component height - compact buttons, inputs */
  --lufa-semantic-ui-height-md: var(--lufa-primitive-height-40); /** Medium UI component height - default buttons, inputs */
  --lufa-semantic-ui-height-lg: var(--lufa-primitive-height-48); /** Large UI component height - prominent buttons, touch-friendly */
  --lufa-semantic-ui-icon-size-xs: var(--lufa-primitive-icon-size-scale-xs); /** Extra small icon size - compact UI elements */
  --lufa-semantic-ui-icon-size-sm: var(--lufa-primitive-icon-size-scale-sm); /** Small icon size - standard UI elements */
  --lufa-semantic-ui-icon-size-md: var(--lufa-primitive-icon-size-scale-md); /** Medium icon size - emphasized UI elements */
  --lufa-semantic-ui-icon-size-lg: var(--lufa-primitive-icon-size-scale-lg); /** Large icon size - prominent UI elements */
  --lufa-semantic-ui-icon-size-xl: var(--lufa-primitive-icon-size-scale-xl); /** Extra large icon size - hero UI elements */
  --lufa-semantic-ui-shadow-small: var(--lufa-primitive-shadow-elevation-sm); /** Small shadow for subtle elevation (cards, panels) */
  --lufa-semantic-ui-shadow-medium: var(--lufa-primitive-shadow-elevation-base); /** Medium shadow for standard elevation (default for cards) */
  --lufa-semantic-ui-shadow-large: var(--lufa-primitive-shadow-elevation-lg); /** Large shadow for strong elevation (modals, popovers) */
  --lufa-semantic-ui-shadow-extra-large: var(--lufa-primitive-shadow-elevation-xl); /** Extra large shadow for maximum elevation (floating elements) */
  --lufa-semantic-ui-spacing-tight: var(--lufa-primitive-spacing-4); /** Tight spacing for very dense layouts - minimal spacing between elements */
  --lufa-semantic-ui-spacing-compact: var(--lufa-primitive-spacing-8); /** Compact spacing for tight layouts and dense UIs */
  --lufa-semantic-ui-spacing-snug: var(--lufa-primitive-spacing-12); /** Snug spacing — between compact (8px) and default (16px), for components that need a mid-step */
  --lufa-semantic-ui-spacing-default: var(--lufa-primitive-spacing-16); /** Default spacing for standard layouts (most common) */
  --lufa-semantic-ui-spacing-comfortable: var(--lufa-primitive-spacing-24); /** Comfortable spacing for relaxed, breathable layouts */
  --lufa-semantic-ui-spacing-spacious: var(--lufa-primitive-spacing-32); /** Spacious spacing for generous, airy layouts */
  --lufa-semantic-ui-transition-duration-fast: var(--lufa-primitive-motion-duration-fast); /** Fast transition duration for quick interactions (150ms) */
  --lufa-semantic-ui-transition-duration-normal: var(--lufa-primitive-motion-duration-normal); /** Normal transition duration for standard animations (250ms) */
  --lufa-semantic-ui-transition-duration-slow: var(--lufa-primitive-motion-duration-slow); /** Slow transition duration for deliberate animations (400ms) */
  --lufa-semantic-ui-transition-timing-function-default: var(--lufa-primitive-motion-easing-ease-in-out); /** Default timing function for smooth animations (ease-in-out) */
  --lufa-component-badge-padding-compact-block: var(--lufa-semantic-ui-spacing-tight); /** Compact badge block-axis padding (top/bottom) — semantic tight (4px) */
  --lufa-component-badge-padding-compact-inline: var(--lufa-semantic-ui-spacing-compact); /** Compact badge inline-axis padding (left/right) — semantic compact (8px) */
  --lufa-component-badge-padding-default-block: var(--lufa-semantic-ui-spacing-compact); /** Default badge block-axis padding (top/bottom) — semantic compact (8px) */
  --lufa-component-badge-padding-default-inline: var(--lufa-semantic-ui-spacing-snug); /** Default badge inline-axis padding (left/right) — semantic snug (12px) */
  --lufa-component-badge-padding-large-block: var(--lufa-semantic-ui-spacing-snug); /** Large badge block-axis padding (top/bottom) — semantic snug (12px) */
  --lufa-component-badge-padding-large-inline: var(--lufa-semantic-ui-spacing-default); /** Large badge inline-axis padding (left/right) — semantic default (16px) */
  --lufa-component-badge-font-size-compact: var(--lufa-semantic-typography-caption); /** Compact badge font size — semantic caption (12px) */
  --lufa-component-badge-font-size-default: var(--lufa-semantic-typography-body-small); /** Default badge font size — semantic body small (14px) */
  --lufa-component-badge-font-size-large: var(--lufa-semantic-typography-body-default); /** Large badge font size — semantic body default (16px) */
  --lufa-component-badge-border-radius: var(--lufa-semantic-ui-border-radius-full); /** Badge border radius (pill shape) */
  --lufa-component-badge-variant-default-background: var(--lufa-semantic-ui-background-surface-default); /** Default badge background (neutral) */
  --lufa-component-badge-variant-default-text: var(--lufa-semantic-ui-text-secondary); /** Default badge text color */
  --lufa-component-badge-variant-default-border: var(--lufa-semantic-ui-border-default); /** Default badge border (for outlined variant) */
  --lufa-component-badge-variant-success-background: var(--lufa-semantic-ui-background-success); /** Success badge background */
  --lufa-component-badge-variant-success-text: var(--lufa-semantic-ui-text-success); /** Success badge text color */
  --lufa-component-badge-variant-success-border: var(--lufa-semantic-ui-border-success); /** Success badge border (for outlined variant) */
  --lufa-component-badge-variant-error-background: var(--lufa-semantic-ui-background-error); /** Error badge background */
  --lufa-component-badge-variant-error-text: var(--lufa-semantic-ui-text-error); /** Error badge text color */
  --lufa-component-badge-variant-error-border: var(--lufa-semantic-ui-border-error); /** Error badge border (for outlined variant) */
  --lufa-component-badge-variant-warning-background: var(--lufa-semantic-ui-background-warning); /** Warning badge background */
  --lufa-component-badge-variant-warning-text: var(--lufa-semantic-ui-text-warning); /** Warning badge text color */
  --lufa-component-badge-variant-warning-border: var(--lufa-semantic-ui-border-warning); /** Warning badge border (for outlined variant) */
  --lufa-component-badge-variant-info-background: var(--lufa-semantic-ui-background-info); /** Info badge background */
  --lufa-component-badge-variant-info-text: var(--lufa-semantic-ui-text-info); /** Info badge text color */
  --lufa-component-badge-variant-info-border: var(--lufa-semantic-ui-border-info); /** Info badge border (for outlined variant) */
  --lufa-component-badge-dot-size: 0.375rem; /** Badge dot indicator size */
  --lufa-component-badge-effect-glow: var(--lufa-semantic-effect-glow-box-primary-default); /** Badge box-shadow glow effect */
  --lufa-component-badge-effect-animation-pulse: none; /** Badge pulse animation (for live/active indicators) */
  --lufa-component-button-effect-glow-default: var(--lufa-semantic-effect-glow-box-primary-default); /** Button box-shadow glow effect (default state) */
  --lufa-component-button-effect-glow-hover: var(--lufa-semantic-effect-glow-box-primary-hover); /** Button box-shadow glow effect (hover state) */
  --lufa-component-button-effect-text-glow-default: var(--lufa-semantic-effect-glow-text-primary-default); /** Button text-shadow glow effect (default state) */
  --lufa-component-button-effect-text-glow-hover: var(--lufa-semantic-effect-glow-text-primary-hover); /** Button text-shadow glow effect (hover state) */
  --lufa-component-button-type-solid-variant-primary-background-default: var(--lufa-semantic-interactive-action-primary-default); /** Solid primary button background color */
  --lufa-component-button-type-solid-variant-primary-background-hover: var(--lufa-semantic-interactive-action-primary-hover); /** Solid primary button hover state background */
  --lufa-component-button-type-solid-variant-primary-background-active: var(--lufa-semantic-interactive-action-primary-active); /** Solid primary button active/pressed state background */
  --lufa-component-button-type-solid-variant-primary-text: var(--lufa-semantic-interactive-action-primary-on); /** Solid primary button text color */
  --lufa-component-button-type-solid-variant-secondary-background-default: var(--lufa-semantic-interactive-action-secondary-default); /** Solid secondary button background color */
  --lufa-component-button-type-solid-variant-secondary-background-hover: var(--lufa-semantic-interactive-action-secondary-hover); /** Solid secondary button hover state background */
  --lufa-component-button-type-solid-variant-secondary-background-active: var(--lufa-semantic-interactive-action-secondary-active); /** Solid secondary button active/pressed state background */
  --lufa-component-button-type-solid-variant-secondary-text: var(--lufa-semantic-interactive-action-secondary-on); /** Solid secondary button text color */
  --lufa-component-button-type-solid-variant-destructive-background-default: var(--lufa-semantic-interactive-action-destructive-default); /** Solid destructive button background (danger actions) */
  --lufa-component-button-type-solid-variant-destructive-background-hover: var(--lufa-semantic-interactive-action-destructive-hover); /** Solid destructive button hover state background */
  --lufa-component-button-type-solid-variant-destructive-background-active: var(--lufa-semantic-interactive-action-destructive-active); /** Solid destructive button active/pressed state background */
  --lufa-component-button-type-solid-variant-destructive-text: var(--lufa-semantic-interactive-action-destructive-on); /** Solid destructive button text color */
  --lufa-component-button-type-solid-variant-success-background-default: var(--lufa-semantic-interactive-action-success-default); /** Solid success button background (positive actions) */
  --lufa-component-button-type-solid-variant-success-background-hover: var(--lufa-semantic-interactive-action-success-hover); /** Solid success button hover state background */
  --lufa-component-button-type-solid-variant-success-background-active: var(--lufa-semantic-interactive-action-success-active); /** Solid success button active/pressed state background */
  --lufa-component-button-type-solid-variant-success-text: var(--lufa-semantic-interactive-action-success-on); /** Solid success button text color */
  --lufa-component-button-type-solid-variant-warning-background-default: var(--lufa-semantic-interactive-action-warning-default); /** Solid warning button background */
  --lufa-component-button-type-solid-variant-warning-background-hover: var(--lufa-semantic-interactive-action-warning-hover); /** Solid warning button hover state background */
  --lufa-component-button-type-solid-variant-warning-background-active: var(--lufa-semantic-interactive-action-warning-active); /** Solid warning button active/pressed state background */
  --lufa-component-button-type-solid-variant-warning-text: var(--lufa-semantic-interactive-action-warning-on); /** Solid warning button text color */
  --lufa-component-button-type-solid-variant-info-background-default: var(--lufa-semantic-interactive-action-info-default); /** Solid info button background */
  --lufa-component-button-type-solid-variant-info-background-hover: var(--lufa-semantic-interactive-action-info-hover); /** Solid info button hover state background */
  --lufa-component-button-type-solid-variant-info-background-active: var(--lufa-semantic-interactive-action-info-active); /** Solid info button active/pressed state background */
  --lufa-component-button-type-solid-variant-info-text: var(--lufa-semantic-interactive-action-info-on); /** Solid info button text color */
  --lufa-component-button-type-solid-variant-neutral-background-default: var(--lufa-semantic-interactive-action-neutral-default); /** Solid neutral button background - resting state, slightly elevated above page surface */
  --lufa-component-button-type-solid-variant-neutral-background-hover: var(--lufa-semantic-interactive-action-neutral-hover); /** Solid neutral button hover state background */
  --lufa-component-button-type-solid-variant-neutral-background-active: var(--lufa-semantic-interactive-action-neutral-active); /** Solid neutral button active/pressed state background */
  --lufa-component-button-type-solid-variant-neutral-text: var(--lufa-semantic-interactive-action-neutral-on); /** Solid neutral button text color */
  --lufa-component-button-type-ghost-background-default: rgba(0, 0, 0, 0); /** Ghost button background (transparent) */
  --lufa-component-button-type-ghost-background-hover: var(--lufa-semantic-interactive-background-hover); /** Ghost button hover state background */
  --lufa-component-button-type-ghost-background-active: var(--lufa-semantic-ui-background-surface-active); /** Ghost button active/pressed state background - shared across all ghost variants */
  --lufa-component-button-type-ghost-text-default: var(--lufa-semantic-interactive-action-primary-default); /** Ghost button text color */
  --lufa-component-button-type-ghost-text-hover: var(--lufa-semantic-interactive-action-primary-hover); /** Ghost button hover state text color */
  --lufa-component-button-type-ghost-variant-primary-text-active: var(--lufa-semantic-interactive-action-primary-active); /** Ghost primary button active state text color */
  --lufa-component-button-type-ghost-variant-secondary-text-active: var(--lufa-semantic-interactive-action-secondary-active); /** Ghost secondary button active state text color */
  --lufa-component-button-type-ghost-variant-success-text-active: var(--lufa-semantic-interactive-action-success-active); /** Ghost success button active state text color */
  --lufa-component-button-type-ghost-variant-destructive-text-active: var(--lufa-semantic-interactive-action-destructive-active); /** Ghost destructive button active state text color */
  --lufa-component-button-type-ghost-variant-warning-text-active: var(--lufa-semantic-interactive-action-warning-active); /** Ghost warning button active state text color */
  --lufa-component-button-type-ghost-variant-info-text-active: var(--lufa-semantic-interactive-action-info-active); /** Ghost info button active state text color */
  --lufa-component-button-type-ghost-variant-neutral-text-active: var(--lufa-semantic-interactive-action-neutral-on); /** Ghost neutral button active state text color */
  --lufa-component-button-type-outline-background-default: rgba(0, 0, 0, 0); /** Outline button background (transparent) */
  --lufa-component-button-type-outline-background-hover: var(--lufa-semantic-interactive-action-primary-default); /** Outline button hover state background */
  --lufa-component-button-type-outline-border-default: var(--lufa-semantic-interactive-action-primary-default); /** Outline button border color */
  --lufa-component-button-type-outline-border-hover: var(--lufa-semantic-interactive-action-primary-hover); /** Outline button hover state border */
  --lufa-component-button-type-outline-text-default: var(--lufa-semantic-interactive-action-primary-default); /** Outline button text color */
  --lufa-component-button-type-outline-text-hover: var(--lufa-semantic-interactive-action-primary-on); /** Outline button hover state text */
  --lufa-component-button-type-outline-variant-primary-background-active: var(--lufa-semantic-interactive-action-primary-active); /** Outline primary button active state background */
  --lufa-component-button-type-outline-variant-primary-border-active: var(--lufa-semantic-interactive-action-primary-active); /** Outline primary button active state border color */
  --lufa-component-button-type-outline-variant-secondary-background-active: var(--lufa-semantic-interactive-action-secondary-active); /** Outline secondary button active state background */
  --lufa-component-button-type-outline-variant-secondary-border-active: var(--lufa-semantic-interactive-action-secondary-active); /** Outline secondary button active state border color */
  --lufa-component-button-type-outline-variant-success-background-active: var(--lufa-semantic-interactive-action-success-active); /** Outline success button active state background */
  --lufa-component-button-type-outline-variant-success-border-active: var(--lufa-semantic-interactive-action-success-active); /** Outline success button active state border color */
  --lufa-component-button-type-outline-variant-destructive-background-active: var(--lufa-semantic-interactive-action-destructive-active); /** Outline destructive button active state background */
  --lufa-component-button-type-outline-variant-destructive-border-active: var(--lufa-semantic-interactive-action-destructive-active); /** Outline destructive button active state border color */
  --lufa-component-button-type-outline-variant-warning-background-active: var(--lufa-semantic-interactive-action-warning-active); /** Outline warning button active state background */
  --lufa-component-button-type-outline-variant-warning-border-active: var(--lufa-semantic-interactive-action-warning-active); /** Outline warning button active state border color */
  --lufa-component-button-type-outline-variant-info-background-active: var(--lufa-semantic-interactive-action-info-active); /** Outline info button active state background */
  --lufa-component-button-type-outline-variant-info-border-active: var(--lufa-semantic-interactive-action-info-active); /** Outline info button active state border color */
  --lufa-component-button-type-outline-variant-neutral-background-active: var(--lufa-semantic-interactive-action-neutral-active); /** Outline neutral button active state background */
  --lufa-component-button-type-outline-variant-neutral-border-active: var(--lufa-semantic-interactive-action-neutral-active); /** Outline neutral button active state border color */
  --lufa-component-button-state-default-cursor: var(--lufa-semantic-interactive-cursor-default); /** Default button cursor — applied to the base button in all clickable states */
  --lufa-component-button-state-disabled-opacity: var(--lufa-semantic-interactive-opacity-disabled); /** Disabled button opacity */
  --lufa-component-button-state-disabled-cursor: var(--lufa-semantic-interactive-cursor-disabled); /** Disabled button cursor style */
  --lufa-component-button-state-loading-cursor: var(--lufa-semantic-interactive-cursor-loading); /** Loading button cursor style */
  --lufa-component-card-padding-sm: var(--lufa-semantic-ui-spacing-default); /** Small card padding for compact layouts */
  --lufa-component-card-padding-md: var(--lufa-semantic-ui-spacing-comfortable); /** Medium card padding (default) */
  --lufa-component-card-padding-lg: var(--lufa-semantic-ui-spacing-spacious); /** Large card padding for spacious layouts */
  --lufa-component-card-border-radius-sm: var(--lufa-semantic-ui-border-radius-small); /** Small border radius for subtle rounding */
  --lufa-component-card-border-radius-md: var(--lufa-semantic-ui-border-radius-medium); /** Medium border radius (default) */
  --lufa-component-card-border-radius-lg: var(--lufa-semantic-ui-border-radius-large); /** Large border radius for prominent rounding */
  --lufa-component-card-shadow-sm: var(--lufa-semantic-ui-shadow-small); /** Small shadow for subtle elevation */
  --lufa-component-card-shadow-md: var(--lufa-semantic-ui-shadow-medium); /** Medium shadow for standard elevation (default) */
  --lufa-component-card-shadow-lg: var(--lufa-semantic-ui-shadow-large); /** Large shadow for strong elevation */
  --lufa-component-card-background: var(--lufa-semantic-ui-background-surface-default); /** Card background color */
  --lufa-component-card-border: var(--lufa-semantic-ui-border-default); /** Card border color (for outlined variant) */
  --lufa-component-card-header-padding: var(--lufa-semantic-ui-spacing-default); /** Card header padding */
  --lufa-component-card-header-border: var(--lufa-semantic-ui-border-default); /** Card header bottom border (divider) */
  --lufa-component-card-footer-padding: var(--lufa-semantic-ui-spacing-default); /** Card footer padding */
  --lufa-component-card-footer-border: var(--lufa-semantic-ui-border-default); /** Card footer top border (divider) */
  --lufa-component-card-glow-default: var(--lufa-semantic-effect-glow-box-primary-default); /** Card glow effect (default state) - references semantic, themes can override */
  --lufa-component-card-glow-hover: var(--lufa-semantic-effect-glow-box-primary-hover); /** Card glow effect on hover - references semantic, themes can override */
  --lufa-component-card-glow-focus: var(--lufa-semantic-effect-glow-box-focus); /** Card focus ring glow for accessibility - references semantic, themes can override */
  --lufa-component-card-hover-shadow: var(--lufa-semantic-ui-shadow-large); /** Card shadow on hover state (for interactive cards) */
  --lufa-component-card-hover-scale: var(--lufa-semantic-interactive-transform-scale-hover); /** Card scale transformation on hover (mode-aware) */
  --lufa-component-card-hover-translate: var(--lufa-semantic-interactive-transform-translate-hover); /** Card vertical translation on hover (mode-aware lift) */
  --lufa-component-container-max-width-xs: var(--lufa-semantic-layout-breakpoint-xs); /** Max-width for extra small screens */
  --lufa-component-container-max-width-sm: var(--lufa-semantic-layout-breakpoint-sm); /** Max-width for small screens */
  --lufa-component-container-max-width-md: var(--lufa-semantic-layout-breakpoint-md); /** Max-width for medium screens */
  --lufa-component-container-max-width-lg: var(--lufa-semantic-layout-breakpoint-lg); /** Max-width for large screens */
  --lufa-component-container-max-width-xl: var(--lufa-semantic-layout-breakpoint-xl); /** Max-width for extra large screens */
  --lufa-component-container-max-width-2xl: var(--lufa-semantic-layout-breakpoint-2xl); /** Max-width for 2x extra large screens */
  --lufa-component-container-padding-default: var(--lufa-semantic-ui-spacing-default); /** Default horizontal padding for container */
  --lufa-component-divider-emphasis-subtle-color: var(--lufa-semantic-ui-border-default); /** Subtle emphasis divider color (light gray) */
  --lufa-component-divider-emphasis-subtle-thickness: var(--lufa-semantic-ui-border-width-thin); /** Subtle emphasis thickness */
  --lufa-component-divider-emphasis-default-color: var(--lufa-semantic-ui-border-default); /** Default emphasis divider color (gray) */
  --lufa-component-divider-emphasis-default-thickness: var(--lufa-semantic-ui-border-width-thin); /** Default emphasis thickness */
  --lufa-component-divider-emphasis-moderate-color: var(--lufa-semantic-ui-border-default); /** Moderate emphasis divider color (gray) */
  --lufa-component-divider-emphasis-moderate-thickness: var(--lufa-semantic-ui-border-width-medium); /** Moderate emphasis thickness - more visible */
  --lufa-component-divider-emphasis-strong-color: var(--lufa-semantic-ui-border-strong); /** Strong emphasis divider color (darker gray) */
  --lufa-component-divider-emphasis-strong-thickness: var(--lufa-semantic-ui-border-width-medium); /** Strong emphasis thickness */
  --lufa-component-divider-emphasis-bold-color: var(--lufa-semantic-ui-border-strong); /** Bold emphasis divider color (darker gray) */
  --lufa-component-divider-emphasis-bold-thickness: var(--lufa-semantic-ui-border-width-thick); /** Bold emphasis thickness - major section breaks */
  --lufa-component-divider-spacing-compact: var(--lufa-semantic-ui-spacing-compact); /** Compact spacing around divider */
  --lufa-component-divider-spacing-default: var(--lufa-semantic-ui-spacing-default); /** Default spacing around divider */
  --lufa-component-divider-spacing-comfortable: var(--lufa-semantic-ui-spacing-comfortable); /** Comfortable spacing around divider */
  --lufa-component-divider-dash-size: var(--lufa-semantic-ui-divider-dash-size); /** Length of each dash segment in a dashed divider */
  --lufa-component-divider-dash-gap: var(--lufa-semantic-ui-divider-dash-gap); /** Total step between dash starts (dash + gap) in a dashed divider */
  --lufa-component-input-padding-sm-block: var(--lufa-semantic-ui-spacing-compact); /** Small input block-axis padding (top/bottom, 8px) */
  --lufa-component-input-padding-sm-inline: var(--lufa-semantic-ui-spacing-default); /** Small input inline-axis padding (left/right, 16px) */
  --lufa-component-input-padding-md-block: var(--lufa-semantic-ui-spacing-default); /** Medium input block-axis padding (top/bottom, 16px) */
  --lufa-component-input-padding-md-inline: var(--lufa-semantic-ui-spacing-comfortable); /** Medium input inline-axis padding (left/right, 24px) */
  --lufa-component-input-padding-lg-block: var(--lufa-semantic-ui-spacing-comfortable); /** Large input block-axis padding (top/bottom, 24px) */
  --lufa-component-input-padding-lg-inline: var(--lufa-semantic-ui-spacing-spacious); /** Large input inline-axis padding (left/right, 32px) */
  --lufa-component-input-height-sm: var(--lufa-semantic-ui-height-sm); /** Small input minimum height */
  --lufa-component-input-height-md: var(--lufa-semantic-ui-height-md); /** Medium input minimum height (default) */
  --lufa-component-input-height-lg: var(--lufa-semantic-ui-height-lg); /** Large input minimum height */
  --lufa-component-input-font-size-sm: var(--lufa-semantic-typography-body-small); /** Small input font size */
  --lufa-component-input-font-size-md: var(--lufa-semantic-typography-body-default); /** Medium input font size (default) */
  --lufa-component-input-font-size-lg: var(--lufa-semantic-typography-body-large); /** Large input font size */
  --lufa-component-input-border-radius: var(--lufa-semantic-ui-border-radius-default); /** Input border radius */
  --lufa-component-input-border-width: var(--lufa-semantic-ui-border-width-thin); /** Input border width */
  --lufa-component-input-background-default: var(--lufa-semantic-ui-background-surface-default); /** Input background color (default state) */
  --lufa-component-input-background-hover: var(--lufa-semantic-interactive-background-hover); /** Input background color (hover state) */
  --lufa-component-input-background-disabled: var(--lufa-semantic-interactive-background-disabled); /** Input background color (disabled state) */
  --lufa-component-input-border-default: var(--lufa-semantic-interactive-border-default); /** Input border color (default state) */
  --lufa-component-input-border-hover: var(--lufa-semantic-interactive-border-hover); /** Input border color (hover state) */
  --lufa-component-input-border-focus: var(--lufa-semantic-interactive-border-focus); /** Input border color (focus state) */
  --lufa-component-input-border-error: var(--lufa-semantic-ui-border-error); /** Input border color (error/invalid state) */
  --lufa-component-input-border-disabled: var(--lufa-semantic-interactive-border-disabled); /** Input border color (disabled state) */
  --lufa-component-input-text-default: var(--lufa-semantic-interactive-text-default); /** Input text color (default state) */
  --lufa-component-input-text-placeholder: var(--lufa-semantic-ui-text-tertiary); /** Input placeholder text color */
  --lufa-component-input-text-disabled: var(--lufa-semantic-interactive-text-disabled); /** Input text color (disabled state) */
  --lufa-component-input-label-font-size: var(--lufa-semantic-typography-label); /** Input label font size */
  --lufa-component-input-label-color: var(--lufa-semantic-ui-text-secondary); /** Input label text color */
  --lufa-component-input-label-spacing: var(--lufa-semantic-ui-spacing-compact); /** Spacing between label and input field */
  --lufa-component-input-helper-text-font-size: var(--lufa-semantic-typography-caption); /** Helper/error text font size */
  --lufa-component-input-helper-text-color-default: var(--lufa-semantic-ui-text-tertiary); /** Helper text color (default) */
  --lufa-component-input-helper-text-color-error: var(--lufa-semantic-ui-text-error); /** Helper text color (error state) */
  --lufa-component-input-helper-spacing: var(--lufa-semantic-ui-spacing-compact); /** Spacing between input field and helper text */
  --lufa-component-input-icon-spacing: var(--lufa-component-shared-icon-spacing); /** Spacing between input icon and text */
  --lufa-component-input-effect-glow-border-default: var(--lufa-semantic-effect-glow-border-none); /** Input border glow effect (default state) */
  --lufa-component-input-effect-glow-border-focus: var(--lufa-semantic-effect-glow-border-focus); /** Input border glow effect (focus state) */
  --lufa-component-input-opacity-inactive: 1; /** Input opacity when inactive/disabled */
  --lufa-component-input-state-disabled-cursor: var(--lufa-semantic-interactive-cursor-disabled); /** Cursor for disabled input state */
  --lufa-component-modal-backdrop-background: var(--lufa-semantic-ui-overlay-backdrop); /** Modal backdrop background (semi-transparent overlay) */
  --lufa-component-modal-backdrop-blur: var(--lufa-semantic-ui-backdrop-blur); /** Backdrop blur effect for modal overlay */
  --lufa-component-modal-content-background: var(--lufa-semantic-ui-background-surface-default); /** Modal content background */
  --lufa-component-modal-content-padding: var(--lufa-semantic-ui-spacing-comfortable); /** Modal content padding */
  --lufa-component-modal-content-max-width-sm: 25rem; /** Small modal max width — intentionally raw (400px). Breakpoint-aligned modal width not covered by the semantic spacing scale. */
  --lufa-component-modal-content-max-width-md: 37.5rem; /** Medium modal max width (default) — intentionally raw (600px). Breakpoint-aligned modal width not covered by the semantic spacing scale. */
  --lufa-component-modal-content-max-width-lg: 50rem; /** Large modal max width — intentionally raw (800px). Breakpoint-aligned modal width not covered by the semantic spacing scale. */
  --lufa-component-modal-content-max-width-xl: 75rem; /** Extra large modal max width — intentionally raw (1200px). Breakpoint-aligned modal width not covered by the semantic spacing scale. */
  --lufa-component-modal-content-border-radius: var(--lufa-semantic-ui-border-radius-large); /** Modal content border radius */
  --lufa-component-modal-content-shadow: var(--lufa-semantic-ui-shadow-extra-large); /** Modal content shadow for strong elevation */
  --lufa-component-modal-header-padding: var(--lufa-semantic-ui-spacing-comfortable); /** Modal header padding */
  --lufa-component-modal-header-border: var(--lufa-semantic-ui-border-default); /** Modal header bottom border */
  --lufa-component-modal-footer-padding: var(--lufa-semantic-ui-spacing-comfortable); /** Modal footer padding */
  --lufa-component-modal-footer-border: var(--lufa-semantic-ui-border-default); /** Modal footer top border */
  --lufa-component-modal-close-button-size: 2rem; /** Close button size (width and height) — intentionally raw (32px). Fixed touch-target constant; minimum recommended interactive target size. */
  --lufa-component-modal-close-button-position-offset: var(--lufa-semantic-ui-spacing-default); /** Close button offset from modal edges */
  --lufa-component-modal-close-button-color-default: var(--lufa-semantic-ui-text-secondary); /** Close button icon color */
  --lufa-component-modal-close-button-color-hover: var(--lufa-semantic-ui-text-primary); /** Close button icon color on hover */
  --lufa-component-modal-animation-duration-enter: var(--lufa-semantic-ui-transition-duration-normal); /** Modal enter animation duration */
  --lufa-component-modal-animation-duration-exit: var(--lufa-semantic-ui-transition-duration-fast); /** Modal exit animation duration */
  --lufa-component-modal-animation-timing-function: var(--lufa-component-shared-transition-timing-function); /** Modal animation timing function */
  --lufa-component-modal-z-index-backdrop: var(--lufa-semantic-z-index-modal-backdrop); /** Modal backdrop z-index — references semantic modal-backdrop layer */
  --lufa-component-modal-z-index-content: var(--lufa-semantic-z-index-modal); /** Modal content z-index — references semantic modal layer (above backdrop) */
  --lufa-component-popover-background: var(--lufa-semantic-ui-background-surface-default); /** Popover background color */
  --lufa-component-popover-text: var(--lufa-semantic-ui-text-primary); /** Popover text color */
  --lufa-component-popover-padding: var(--lufa-semantic-ui-spacing-default); /** Popover content padding */
  --lufa-component-popover-border: var(--lufa-semantic-ui-border-default); /** Popover border color */
  --lufa-component-popover-border-radius: var(--lufa-semantic-ui-border-radius-medium); /** Popover border radius */
  --lufa-component-popover-shadow: var(--lufa-semantic-ui-shadow-large); /** Popover shadow for elevation */
  --lufa-component-popover-max-width: 25rem; /** Popover maximum width — intentionally raw (400px). Component-specific layout constraint not represented in the semantic spacing or container scale. */
  --lufa-component-popover-arrow-width: 0.75rem; /** Popover arrow width (base of triangle) — intentionally raw (12px). Geometric constant for CSS border-based arrow; not part of the spacing scale. */
  --lufa-component-popover-arrow-height: 0.375rem; /** Popover arrow height (triangle height) — intentionally raw (6px). Geometric constant for CSS border-based arrow; not part of the spacing scale. */
  --lufa-component-popover-offset: var(--lufa-semantic-ui-spacing-default); /** Popover offset distance from target element */
  --lufa-component-popover-z-index: var(--lufa-semantic-z-index-popover); /** Popover z-index — references semantic popover layer */
  --lufa-component-shared-divider-thickness: var(--lufa-semantic-ui-border-width-thin); /** Standard divider/separator thickness */
  --lufa-component-shared-divider-color: var(--lufa-semantic-ui-border-default); /** Divider color using semantic border */
  --lufa-component-shared-icon-size-xs: var(--lufa-semantic-ui-icon-size-xs); /** Extra small icon size for compact UI */
  --lufa-component-shared-icon-size-sm: var(--lufa-semantic-ui-icon-size-sm); /** Small icon size for standard UI */
  --lufa-component-shared-icon-size-md: var(--lufa-semantic-ui-icon-size-md); /** Medium icon size for emphasized UI */
  --lufa-component-shared-icon-size-lg: var(--lufa-semantic-ui-icon-size-lg); /** Large icon size for prominent UI */
  --lufa-component-shared-icon-size-xl: var(--lufa-semantic-ui-icon-size-xl); /** Extra large icon size for hero UI */
  --lufa-component-shared-icon-spacing: var(--lufa-semantic-ui-spacing-tight); /** Spacing between icon and adjacent text */
  --lufa-component-shared-focus-outline-width: var(--lufa-semantic-ui-border-width-medium); /** Focus outline width for keyboard navigation */
  --lufa-component-shared-focus-outline-offset: var(--lufa-semantic-ui-border-width-medium); /** Focus outline offset from element edge */
  --lufa-component-shared-focus-outline-color: var(--lufa-semantic-interactive-focus-ring); /** Focus outline color */
  --lufa-component-shared-transition-duration-fast: var(--lufa-semantic-ui-transition-duration-fast); /** Fast transition for subtle interactions */
  --lufa-component-shared-transition-duration-normal: var(--lufa-semantic-ui-transition-duration-normal); /** Normal transition for standard interactions */
  --lufa-component-shared-transition-timing-function: var(--lufa-semantic-ui-transition-timing-function-default); /** Standard easing function for smooth transitions */
  --lufa-component-tooltip-background: var(--lufa-semantic-ui-text-primary); /** Tooltip background color (typically dark for high contrast) */
  --lufa-component-tooltip-text: var(--lufa-semantic-ui-background-surface-default); /** Tooltip text color (inverted for contrast) */
  --lufa-component-tooltip-padding-block: var(--lufa-semantic-ui-spacing-compact); /** Tooltip block-axis padding (top/bottom, 8px) */
  --lufa-component-tooltip-padding-inline: var(--lufa-semantic-ui-spacing-default); /** Tooltip inline-axis padding (left/right, 16px) */
  --lufa-component-tooltip-border-radius: var(--lufa-semantic-ui-border-radius-small); /** Tooltip border radius */
  --lufa-component-tooltip-font-size: var(--lufa-semantic-ui-typography-caption); /** Tooltip font size */
  --lufa-component-tooltip-max-width: 20rem; /** Tooltip maximum width — intentionally raw (320px). Component-specific layout constraint not represented in the semantic spacing or container scale. */
  --lufa-component-tooltip-shadow: var(--lufa-semantic-ui-shadow-medium); /** Tooltip shadow for elevation */
  --lufa-component-tooltip-arrow-width: 0.5rem; /** Tooltip arrow width (base of triangle) — intentionally raw (8px). Geometric constant for CSS border-based arrow; not part of the spacing scale. */
  --lufa-component-tooltip-arrow-height: 0.25rem; /** Tooltip arrow height (triangle height) — intentionally raw (4px). Geometric constant for CSS border-based arrow; not part of the spacing scale. */
  --lufa-component-tooltip-offset: var(--lufa-semantic-ui-spacing-compact); /** Tooltip offset distance from target element */
  --lufa-component-tooltip-animation-duration: var(--lufa-semantic-ui-transition-duration-fast); /** Tooltip fade-in/fade-out duration */
  --lufa-component-tooltip-animation-delay: 200ms; /** Tooltip appearance delay (on hover) — intentionally raw (200ms). UX timing constant to prevent tooltip flicker on quick hover gestures; not part of the transition duration scale. */
  --lufa-component-tooltip-animation-timing-function: var(--lufa-component-shared-transition-timing-function); /** Tooltip animation timing function */
  --lufa-component-tooltip-z-index: var(--lufa-semantic-z-index-popover); /** Tooltip z-index — references semantic popover layer (tooltips share the popover stacking level) */
  --lufa-core-color-brand-primary-default: var(--lufa-primitive-color-blue-600); /** Primary brand color used for main actions, links, and focus states. Represents trust and reliability. */
  --lufa-core-color-brand-primary-hover: var(--lufa-primitive-color-blue-700); /** Primary brand hover state - darker shade for interactive feedback */
  --lufa-core-color-brand-primary-active: var(--lufa-primitive-color-blue-800); /** Primary brand active/pressed state - darkest shade for click feedback */
  --lufa-core-color-brand-primary-on-background: var(--lufa-primitive-color-hc-white); /** Text color to use on primary brand background. Ensures WCAG AA contrast (4.5:1+) against primary brand color. */
  --lufa-core-color-brand-secondary-default: var(--lufa-primitive-color-purple-600); /** Secondary brand color used for accents, highlights, and secondary actions */
  --lufa-core-color-brand-secondary-hover: var(--lufa-primitive-color-purple-700); /** Secondary brand hover state - darker shade for interactive feedback */
  --lufa-core-color-brand-secondary-active: var(--lufa-primitive-color-purple-800); /** Secondary brand active/pressed state - darkest shade for click feedback */
  --lufa-core-color-brand-secondary-on-background: var(--lufa-primitive-color-hc-white); /** Text color to use on secondary brand background. Ensures WCAG AA contrast (4.5:1+) against secondary brand color. */
  --lufa-core-color-brand-accent-visited: var(--lufa-primitive-color-purple-600); /** Visited link color - purple to indicate previously visited links */
  --lufa-core-color-feedback-success-default: var(--lufa-primitive-color-green-700); /** Success state color - positive feedback, confirmations, completed actions */
  --lufa-core-color-feedback-success-subtle: var(--lufa-primitive-color-green-100); /** Subtle success background for alert boxes and banners */
  --lufa-core-color-feedback-success-border: var(--lufa-primitive-color-green-300); /** Success border color for outlined elements */
  --lufa-core-color-feedback-success-hover: var(--lufa-primitive-color-green-800); /** Hover state for success interactive elements - one shade darker than default for visible state change */
  --lufa-core-color-feedback-success-active: var(--lufa-primitive-color-green-900); /** Active/pressed state for success interactive elements - darkest shade for click feedback */
  --lufa-core-color-feedback-success-on-background: var(--lufa-primitive-color-hc-white); /** Text color to use on success feedback background. Ensures WCAG AA contrast (4.5:1+) against success color. */
  --lufa-core-color-feedback-error-default: var(--lufa-primitive-color-red-700); /** Error state color - validation errors, destructive actions, critical warnings - meets WCAG AA on subtle error background */
  --lufa-core-color-feedback-error-subtle: var(--lufa-primitive-color-red-100); /** Subtle error background for alert boxes and banners */
  --lufa-core-color-feedback-error-border: var(--lufa-primitive-color-red-500); /** Error border color for outlined elements - meets WCAG 1.4.11 (3:1) on light backgrounds */
  --lufa-core-color-feedback-error-hover: var(--lufa-primitive-color-red-800); /** Hover state for error/destructive interactive elements - one shade darker than default for visible state change */
  --lufa-core-color-feedback-error-active: var(--lufa-primitive-color-red-900); /** Active/pressed state for error/destructive interactive elements - darkest shade for click feedback */
  --lufa-core-color-feedback-error-on-background: var(--lufa-primitive-color-hc-white); /** Text color to use on error feedback background. Ensures WCAG AA contrast (4.5:1+) against error color. */
  --lufa-core-color-feedback-warning-default: var(--lufa-primitive-color-yellow-700); /** Warning state color - caution messages, important notices, pending actions - meets WCAG AA on page and warning backgrounds */
  --lufa-core-color-feedback-warning-subtle: var(--lufa-primitive-color-yellow-100); /** Subtle warning background for alert boxes and banners */
  --lufa-core-color-feedback-warning-border: var(--lufa-primitive-color-yellow-300); /** Warning border color for outlined elements */
  --lufa-core-color-feedback-warning-hover: var(--lufa-primitive-color-yellow-800); /** Hover state for warning interactive elements - one shade darker than default for visible state change */
  --lufa-core-color-feedback-warning-active: var(--lufa-primitive-color-yellow-900); /** Active/pressed state for warning interactive elements - darkest shade for click feedback */
  --lufa-core-color-feedback-warning-on-background: var(--lufa-primitive-color-hc-white); /** Text color to use on warning feedback background. Ensures WCAG AA contrast (4.5:1+) against warning color. */
  --lufa-core-color-feedback-info-default: var(--lufa-primitive-color-blue-700); /** Info state color - informational messages, tips, neutral notifications */
  --lufa-core-color-feedback-info-subtle: var(--lufa-primitive-color-blue-100); /** Subtle info background for alert boxes and banners */
  --lufa-core-color-feedback-info-border: var(--lufa-primitive-color-blue-300); /** Info border color for outlined elements */
  --lufa-core-color-feedback-info-hover: var(--lufa-primitive-color-blue-800); /** Hover state for info interactive elements - one shade darker than default for visible state change */
  --lufa-core-color-feedback-info-active: var(--lufa-primitive-color-blue-900); /** Active/pressed state for info interactive elements - darkest shade for click feedback */
  --lufa-core-color-feedback-info-on-background: var(--lufa-primitive-color-hc-white); /** Text color to use on info feedback background. Ensures WCAG AA contrast (4.5:1+) against info color. */
  --lufa-core-color-neutral-background: var(--lufa-primitive-color-gray-50); /** Page background color - lightest neutral for main canvas */
  --lufa-core-color-neutral-surface-default: var(--lufa-primitive-color-gray-100); /** Surface color for cards, panels, and elevated elements */
  --lufa-core-color-neutral-surface-raised: var(--lufa-primitive-color-gray-200); /** Raised surface color - slightly elevated above default, used as resting state for neutral solid buttons */
  --lufa-core-color-neutral-surface-hover: var(--lufa-primitive-color-gray-200); /** Hover state for interactive surfaces */
  --lufa-core-color-neutral-surface-active: var(--lufa-primitive-color-gray-300); /** Active/pressed state for interactive surfaces - one shade darker than hover for click feedback */
  --lufa-core-color-neutral-border-default: var(--lufa-primitive-color-gray-500); /** Default border color for dividers and element boundaries - meets WCAG 1.4.11 Non-text Contrast (3:1) */
  --lufa-core-color-neutral-border-strong: var(--lufa-primitive-color-gray-600); /** Stronger border color for emphasis or focus states - meets WCAG 1.4.11 Non-text Contrast (3:1) */
  --lufa-core-color-neutral-text-primary: var(--lufa-primitive-color-gray-900); /** Primary text color - highest contrast for body text and headings */
  --lufa-core-color-neutral-text-secondary: var(--lufa-primitive-color-gray-600); /** Secondary text color - medium contrast for supporting text */
  --lufa-core-color-neutral-text-tertiary: var(--lufa-primitive-color-gray-500); /** Tertiary text color - lighter than secondary for optional, non-essential content. Use only for metadata, timestamps, and decorative labels where content is not required reading. Does not guarantee WCAG AA on light surfaces. */
  --lufa-core-color-neutral-text-disabled: var(--lufa-primitive-color-gray-400); /** Disabled text color - lowest contrast for inactive elements */
  --lufa-semantic-interactive-transform-scale-hover: 1.02; /** Scale transformation on hover, adapting per mode for optimal visual feedback */
  --lufa-semantic-interactive-transform-translate-hover: 0rem; /** Vertical translation on hover (upward lift), adapting per mode */
  --lufa-semantic-ui-backdrop-blur: blur(4px); /** Backdrop blur for modals and overlays */
  --lufa-semantic-ui-backdrop-brightness: 0.95; /** Backdrop brightness for overlays */
  --lufa-semantic-ui-overlay-backdrop: var(--lufa-core-color-alpha-black-50); /** Semi-transparent backdrop for modals, dialogs, and drawers */
  --lufa-semantic-ui-overlay-hover: var(--lufa-core-color-alpha-black-4); /** Subtle overlay for hover states on interactive elements */
  --lufa-semantic-ui-overlay-pressed: var(--lufa-core-color-alpha-black-8); /** Overlay for pressed/active states */
  --lufa-semantic-ui-overlay-selected: var(--lufa-core-color-alpha-black-16); /** Overlay for selected states in lists and menus */
  --lufa-semantic-ui-overlay-scrim: var(--lufa-core-color-alpha-black-38); /** Scrim overlay for bottom sheets and temporary surfaces */
}

[data-theme][data-mode='dark'] {
  --lufa-core-color-brand-primary-default: #60a5fa;
  --lufa-core-color-brand-primary-hover: #93c5fd;
  --lufa-core-color-brand-primary-active: #2563eb;
  --lufa-core-color-brand-primary-on-background: #111827;
  --lufa-core-color-brand-secondary-default: #c084fc;
  --lufa-core-color-brand-secondary-hover: #d8b4fe;
  --lufa-core-color-brand-secondary-active: #a855f7;
  --lufa-core-color-brand-secondary-on-background: #111827;
  --lufa-core-color-brand-accent-visited: #c084fc;
  --lufa-core-color-feedback-success-default: #4ade80;
  --lufa-core-color-feedback-success-subtle: #14532d;
  --lufa-core-color-feedback-success-border: #15803d;
  --lufa-core-color-feedback-success-hover: #86efac;
  --lufa-core-color-feedback-success-active: #bbf7d0;
  --lufa-core-color-feedback-success-on-background: #111827;
  --lufa-core-color-feedback-error-default: #f87171;
  --lufa-core-color-feedback-error-subtle: #7f1d1d;
  --lufa-core-color-feedback-error-border: #b91c1c;
  --lufa-core-color-feedback-error-hover: #fca5a5;
  --lufa-core-color-feedback-error-active: #fecaca;
  --lufa-core-color-feedback-error-on-background: #111827;
  --lufa-core-color-feedback-warning-default: #facc15;
  --lufa-core-color-feedback-warning-subtle: #713f12;
  --lufa-core-color-feedback-warning-border: #a16207;
  --lufa-core-color-feedback-warning-hover: #fde047;
  --lufa-core-color-feedback-warning-active: #fef08a;
  --lufa-core-color-feedback-warning-on-background: #111827;
  --lufa-core-color-feedback-info-default: #93c5fd;
  --lufa-core-color-feedback-info-subtle: #1e3a8a;
  --lufa-core-color-feedback-info-border: #1d4ed8;
  --lufa-core-color-feedback-info-hover: #93c5fd;
  --lufa-core-color-feedback-info-active: #bfdbfe;
  --lufa-core-color-feedback-info-on-background: #111827;
  --lufa-core-color-neutral-background: #111827;
  --lufa-core-color-neutral-surface-default: #1f2937;
  --lufa-core-color-neutral-surface-raised: #374151;
  --lufa-core-color-neutral-surface-hover: #374151;
  --lufa-core-color-neutral-surface-active: #4b5563;
  --lufa-core-color-neutral-border-default: #374151;
  --lufa-core-color-neutral-border-strong: #4b5563;
  --lufa-core-color-neutral-text-primary: #f9fafb;
  --lufa-core-color-neutral-text-secondary: #9ca3af;
  --lufa-core-color-neutral-text-tertiary: #6b7280;
  --lufa-core-color-neutral-text-disabled: #4b5563;
  --lufa-semantic-interactive-transform-scale-hover: 1.05;
  --lufa-semantic-interactive-transform-translate-hover: -2px;
  --lufa-semantic-ui-backdrop-blur: blur(8px);
  --lufa-semantic-ui-backdrop-brightness: 0.7;
  --lufa-semantic-ui-overlay-backdrop: rgba(0, 0, 0, 0.8);
  --lufa-semantic-ui-overlay-hover: rgba(255, 255, 255, 0.08);
  --lufa-semantic-ui-overlay-pressed: rgba(255, 255, 255, 0.16);
  --lufa-semantic-ui-overlay-selected: rgba(255, 255, 255, 0.16);
  --lufa-semantic-ui-overlay-scrim: rgba(0, 0, 0, 0.6);
}

[data-theme][data-mode='high-contrast'] {
  --lufa-core-color-brand-primary-default: #0000ff;
  --lufa-core-color-brand-primary-hover: #0000ff;
  --lufa-core-color-brand-primary-active: #0000ff;
  --lufa-core-color-brand-primary-on-background: #ffffff;
  --lufa-core-color-brand-secondary-default: #9333ea;
  --lufa-core-color-brand-secondary-hover: #7e22ce;
  --lufa-core-color-brand-secondary-active: #6b21a8;
  --lufa-core-color-brand-secondary-on-background: #ffffff;
  --lufa-core-color-brand-accent-visited: #9900ff;
  --lufa-core-color-feedback-success-default: #00ff00;
  --lufa-core-color-feedback-success-subtle: #000000;
  --lufa-core-color-feedback-success-border: #00ff00;
  --lufa-core-color-feedback-success-hover: #00ff00;
  --lufa-core-color-feedback-success-active: #00ff00;
  --lufa-core-color-feedback-success-on-background: #ffffff;
  --lufa-core-color-feedback-error-default: #ff0000;
  --lufa-core-color-feedback-error-subtle: #000000;
  --lufa-core-color-feedback-error-border: #ff0000;
  --lufa-core-color-feedback-error-hover: #ff0000;
  --lufa-core-color-feedback-error-active: #ff0000;
  --lufa-core-color-feedback-error-on-background: #ffffff;
  --lufa-core-color-feedback-warning-default: #ffff00;
  --lufa-core-color-feedback-warning-subtle: #000000;
  --lufa-core-color-feedback-warning-border: #ffff00;
  --lufa-core-color-feedback-warning-hover: #ffff00;
  --lufa-core-color-feedback-warning-active: #ffff00;
  --lufa-core-color-feedback-warning-on-background: #ffffff;
  --lufa-core-color-feedback-info-default: #0000ff;
  --lufa-core-color-feedback-info-subtle: #000000;
  --lufa-core-color-feedback-info-border: #0000ff;
  --lufa-core-color-feedback-info-hover: #0000ff;
  --lufa-core-color-feedback-info-active: #0000ff;
  --lufa-core-color-feedback-info-on-background: #ffffff;
  --lufa-core-color-neutral-background: #000000;
  --lufa-core-color-neutral-surface-default: #111827;
  --lufa-core-color-neutral-surface-raised: #1f2937;
  --lufa-core-color-neutral-surface-hover: #1f2937;
  --lufa-core-color-neutral-surface-active: #374151;
  --lufa-core-color-neutral-border-default: #ffffff;
  --lufa-core-color-neutral-border-strong: #ffffff;
  --lufa-core-color-neutral-text-primary: #ffffff;
  --lufa-core-color-neutral-text-secondary: #e5e7eb;
  --lufa-core-color-neutral-text-tertiary: #9ca3af;
  --lufa-core-color-neutral-text-disabled: #4b5563;
  --lufa-semantic-interactive-transform-scale-hover: 1.02;
  --lufa-semantic-interactive-transform-translate-hover: 0;
  --lufa-semantic-ui-backdrop-blur: blur(2px);
  --lufa-semantic-ui-backdrop-brightness: 0.5;
  --lufa-semantic-ui-overlay-backdrop: rgba(0, 0, 0, 0.9);
  --lufa-semantic-ui-overlay-hover: rgba(255, 255, 255, 0.16);
  --lufa-semantic-ui-overlay-pressed: rgba(255, 255, 255, 0.16);
  --lufa-semantic-ui-overlay-selected: rgba(255, 255, 255, 0.16);
  --lufa-semantic-ui-overlay-scrim: rgba(0, 0, 0, 0.8);
}

/* ============================================================================
   DEFAULT THEME
   ============================================================================ */

/**
 * Default Theme
 *
 * Color overrides for the default theme are provided by the token package
 * via tokens.css (--lufa-core-*, --lufa-semantic-*, --lufa-component-*).
 *
 * Theme-specific overrides (e.g., ocean, nordic) are defined in the
 * @lufa/themes package using the --lufa-core-* token layer.
 *
 * This file is intentionally empty. It was previously used to define
 * --lufa-token-* custom properties which have been removed in favor
 * of the standard token hierarchy.
 */

/* ============================================================================
   THEME SYSTEM
   ============================================================================ */

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

/**
 * Responsive Visibility Utilities
 *
 * CSS utility classes for controlling element visibility at different breakpoints.
 * Used by the responsive visibility pattern (show/hide props).
 *
 * Implementation:
 * - CSS-only (no JavaScript required)
 * - SSR-safe (no hydration mismatch)
 * - Mobile-first approach (min-width media queries)
 * - Accessibility: Uses display:none (removes from accessibility tree)
 *
 * Breakpoints (from tokens/primitives/breakpoint.json):
 * - xs: 320px
 * - sm: 640px
 * - md: 768px
 * - lg: 1024px
 * - xl: 1280px
 * - 2xl: 1536px
 */

/* ============================================================================
   BASE VISIBILITY CLASSES
   ============================================================================ */

/**
 * Simple hide class
 * Used for: hide={true} or show={false}
 */

.lufa-hide {
  display: none !important;
}

/**
 * Simple show class (explicit, rarely needed)
 * Used for: show={true} or hide={false}
 */

.lufa-show {
  display: block !important;
}

/* ============================================================================
   HIDE FROM BREAKPOINT AND UP
   ============================================================================ */

/**
 * hideFrom="xs" - Hidden from xs (320px) and up
 */

@media (min-width: 320px) {
  .lufa-hide-from-xs {
    display: none !important;
  }
}

/**
 * hideFrom="sm" - Hidden from sm (640px) and up
 */

@media (min-width: 640px) {
  .lufa-hide-from-sm {
    display: none !important;
  }
}

/**
 * hideFrom="md" - Hidden from md (768px) and up
 */

@media (min-width: 768px) {
  .lufa-hide-from-md {
    display: none !important;
  }
}

/**
 * hideFrom="lg" - Hidden from lg (1024px) and up
 */

@media (min-width: 1024px) {
  .lufa-hide-from-lg {
    display: none !important;
  }
}

/**
 * hideFrom="xl" - Hidden from xl (1280px) and up
 */

@media (min-width: 1280px) {
  .lufa-hide-from-xl {
    display: none !important;
  }
}

/**
 * hideFrom="2xl" - Hidden from 2xl (1536px) and up
 */

@media (min-width: 1536px) {
  .lufa-hide-from-2xl {
    display: none !important;
  }
}

/* ============================================================================
   SHOW FROM BREAKPOINT AND UP (Hidden below, visible at and above)
   ============================================================================ */

/**
 * showFrom="xs" - Hidden below xs, visible from xs (320px) and up
 */

.lufa-show-from-xs {
  display: none !important;
}

@media (min-width: 320px) {
  .lufa-show-from-xs {
    display: block !important;
  }
}

/**
 * showFrom="sm" - Hidden below sm, visible from sm (640px) and up
 */

.lufa-show-from-sm {
  display: none !important;
}

@media (min-width: 640px) {
  .lufa-show-from-sm {
    display: block !important;
  }
}

/**
 * showFrom="md" - Hidden below md, visible from md (768px) and up
 */

.lufa-show-from-md {
  display: none !important;
}

@media (min-width: 768px) {
  .lufa-show-from-md {
    display: block !important;
  }
}

/**
 * showFrom="lg" - Hidden below lg, visible from lg (1024px) and up
 */

.lufa-show-from-lg {
  display: none !important;
}

@media (min-width: 1024px) {
  .lufa-show-from-lg {
    display: block !important;
  }
}

/**
 * showFrom="xl" - Hidden below xl, visible from xl (1280px) and up
 */

.lufa-show-from-xl {
  display: none !important;
}

@media (min-width: 1280px) {
  .lufa-show-from-xl {
    display: block !important;
  }
}

/**
 * showFrom="2xl" - Hidden below 2xl, visible from 2xl (1536px) and up
 */

.lufa-show-from-2xl {
  display: none !important;
}

@media (min-width: 1536px) {
  .lufa-show-from-2xl {
    display: block !important;
  }
}

/* ============================================================================
   HIDE AT SPECIFIC BREAKPOINT
   ============================================================================ */

/**
 * hide={{ xs: true }} - Hidden only at xs breakpoint
 */

@media (min-width: 320px) and (max-width: 639px) {
  .lufa-hide-at-xs {
    display: none !important;
  }
}

/**
 * hide={{ sm: true }} - Hidden only at sm breakpoint
 */

@media (min-width: 640px) and (max-width: 767px) {
  .lufa-hide-at-sm {
    display: none !important;
  }
}

/**
 * hide={{ md: true }} - Hidden only at md breakpoint
 */

@media (min-width: 768px) and (max-width: 1023px) {
  .lufa-hide-at-md {
    display: none !important;
  }
}

/**
 * hide={{ lg: true }} - Hidden only at lg breakpoint
 */

@media (min-width: 1024px) and (max-width: 1279px) {
  .lufa-hide-at-lg {
    display: none !important;
  }
}

/**
 * hide={{ xl: true }} - Hidden only at xl breakpoint
 */

@media (min-width: 1280px) and (max-width: 1535px) {
  .lufa-hide-at-xl {
    display: none !important;
  }
}

/**
 * hide={{ '2xl': true }} - Hidden only at 2xl breakpoint
 */

@media (min-width: 1536px) {
  .lufa-hide-at-2xl {
    display: none !important;
  }
}

/* ============================================================================
   SHOW AT SPECIFIC BREAKPOINT
   ============================================================================ */

/**
 * show={{ xs: true }} - Visible only at xs breakpoint
 */

.lufa-show-at-xs {
  display: none !important;
}

@media (min-width: 320px) and (max-width: 639px) {
  .lufa-show-at-xs {
    display: block !important;
  }
}

/**
 * show={{ sm: true }} - Visible only at sm breakpoint
 */

.lufa-show-at-sm {
  display: none !important;
}

@media (min-width: 640px) and (max-width: 767px) {
  .lufa-show-at-sm {
    display: block !important;
  }
}

/**
 * show={{ md: true }} - Visible only at md breakpoint
 */

.lufa-show-at-md {
  display: none !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .lufa-show-at-md {
    display: block !important;
  }
}

/**
 * show={{ lg: true }} - Visible only at lg breakpoint
 */

.lufa-show-at-lg {
  display: none !important;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .lufa-show-at-lg {
    display: block !important;
  }
}

/**
 * show={{ xl: true }} - Visible only at xl breakpoint
 */

.lufa-show-at-xl {
  display: none !important;
}

@media (min-width: 1280px) and (max-width: 1535px) {
  .lufa-show-at-xl {
    display: block !important;
  }
}

/**
 * show={{ '2xl': true }} - Visible only at 2xl breakpoint
 */

.lufa-show-at-2xl {
  display: none !important;
}

@media (min-width: 1536px) {
  .lufa-show-at-2xl {
    display: block !important;
  }
}

/* ============================================================================
   SHOW FROM BREAKPOINT (OVERRIDE VARIANT)
   Used when combined with hide-from to create complex responsive patterns
   These classes only add visibility at the breakpoint without hiding below
   ============================================================================ */

/**
 * Override hide rules and show from xs onwards
 */

@media (min-width: 320px) {
  .lufa-show-from-xs-override {
    display: block !important;
  }
}

/**
 * Override hide rules and show from sm onwards
 */

@media (min-width: 640px) {
  .lufa-show-from-sm-override {
    display: block !important;
  }
}

/**
 * Override hide rules and show from md onwards
 */

@media (min-width: 768px) {
  .lufa-show-from-md-override {
    display: block !important;
  }
}

/**
 * Override hide rules and show from lg onwards
 */

@media (min-width: 1024px) {
  .lufa-show-from-lg-override {
    display: block !important;
  }
}

/**
 * Override hide rules and show from xl onwards
 */

@media (min-width: 1280px) {
  .lufa-show-from-xl-override {
    display: block !important;
  }
}

/**
 * Override hide rules and show from 2xl onwards
 */

@media (min-width: 1536px) {
  .lufa-show-from-2xl-override {
    display: block !important;
  }
}

/* ============================================================================
   COMPONENT STYLES
   ============================================================================ */
/**
 * Box Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for box.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Box
 */

/* ========================================== */
/* PADDING */
/* ========================================== */

._padding-none_1g833_16 {
  padding: var(--lufa-primitive-spacing-0);
}

._padding-tight_1g833_20 {
  padding: var(--lufa-semantic-ui-spacing-tight);
}

._padding-compact_1g833_24 {
  padding: var(--lufa-semantic-ui-spacing-compact);
}

._padding-default_1g833_28 {
  padding: var(--lufa-semantic-ui-spacing-default);
}

._padding-comfortable_1g833_32 {
  padding: var(--lufa-semantic-ui-spacing-comfortable);
}

._padding-spacious_1g833_36 {
  padding: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* PADDINGX */
/* ========================================== */

._paddingX-none_1g833_44 {
  padding-left: var(--lufa-primitive-spacing-0);
  padding-right: var(--lufa-primitive-spacing-0);
}

._paddingX-tight_1g833_49 {
  padding-left: var(--lufa-semantic-ui-spacing-tight);
  padding-right: var(--lufa-semantic-ui-spacing-tight);
}

._paddingX-compact_1g833_54 {
  padding-left: var(--lufa-semantic-ui-spacing-compact);
  padding-right: var(--lufa-semantic-ui-spacing-compact);
}

._paddingX-default_1g833_59 {
  padding-left: var(--lufa-semantic-ui-spacing-default);
  padding-right: var(--lufa-semantic-ui-spacing-default);
}

._paddingX-comfortable_1g833_64 {
  padding-left: var(--lufa-semantic-ui-spacing-comfortable);
  padding-right: var(--lufa-semantic-ui-spacing-comfortable);
}

._paddingX-spacious_1g833_69 {
  padding-left: var(--lufa-semantic-ui-spacing-spacious);
  padding-right: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* PADDINGY */
/* ========================================== */

._paddingY-none_1g833_78 {
  padding-top: var(--lufa-primitive-spacing-0);
  padding-bottom: var(--lufa-primitive-spacing-0);
}

._paddingY-tight_1g833_83 {
  padding-top: var(--lufa-semantic-ui-spacing-tight);
  padding-bottom: var(--lufa-semantic-ui-spacing-tight);
}

._paddingY-compact_1g833_88 {
  padding-top: var(--lufa-semantic-ui-spacing-compact);
  padding-bottom: var(--lufa-semantic-ui-spacing-compact);
}

._paddingY-default_1g833_93 {
  padding-top: var(--lufa-semantic-ui-spacing-default);
  padding-bottom: var(--lufa-semantic-ui-spacing-default);
}

._paddingY-comfortable_1g833_98 {
  padding-top: var(--lufa-semantic-ui-spacing-comfortable);
  padding-bottom: var(--lufa-semantic-ui-spacing-comfortable);
}

._paddingY-spacious_1g833_103 {
  padding-top: var(--lufa-semantic-ui-spacing-spacious);
  padding-bottom: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* PADDINGTOP */
/* ========================================== */

._paddingTop-none_1g833_112 {
  padding-top: var(--lufa-primitive-spacing-0);
}

._paddingTop-tight_1g833_116 {
  padding-top: var(--lufa-semantic-ui-spacing-tight);
}

._paddingTop-compact_1g833_120 {
  padding-top: var(--lufa-semantic-ui-spacing-compact);
}

._paddingTop-default_1g833_124 {
  padding-top: var(--lufa-semantic-ui-spacing-default);
}

._paddingTop-comfortable_1g833_128 {
  padding-top: var(--lufa-semantic-ui-spacing-comfortable);
}

._paddingTop-spacious_1g833_132 {
  padding-top: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* PADDINGRIGHT */
/* ========================================== */

._paddingRight-none_1g833_140 {
  padding-right: var(--lufa-primitive-spacing-0);
}

._paddingRight-tight_1g833_144 {
  padding-right: var(--lufa-semantic-ui-spacing-tight);
}

._paddingRight-compact_1g833_148 {
  padding-right: var(--lufa-semantic-ui-spacing-compact);
}

._paddingRight-default_1g833_152 {
  padding-right: var(--lufa-semantic-ui-spacing-default);
}

._paddingRight-comfortable_1g833_156 {
  padding-right: var(--lufa-semantic-ui-spacing-comfortable);
}

._paddingRight-spacious_1g833_160 {
  padding-right: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* PADDINGBOTTOM */
/* ========================================== */

._paddingBottom-none_1g833_168 {
  padding-bottom: var(--lufa-primitive-spacing-0);
}

._paddingBottom-tight_1g833_172 {
  padding-bottom: var(--lufa-semantic-ui-spacing-tight);
}

._paddingBottom-compact_1g833_176 {
  padding-bottom: var(--lufa-semantic-ui-spacing-compact);
}

._paddingBottom-default_1g833_180 {
  padding-bottom: var(--lufa-semantic-ui-spacing-default);
}

._paddingBottom-comfortable_1g833_184 {
  padding-bottom: var(--lufa-semantic-ui-spacing-comfortable);
}

._paddingBottom-spacious_1g833_188 {
  padding-bottom: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* PADDINGLEFT */
/* ========================================== */

._paddingLeft-none_1g833_196 {
  padding-left: var(--lufa-primitive-spacing-0);
}

._paddingLeft-tight_1g833_200 {
  padding-left: var(--lufa-semantic-ui-spacing-tight);
}

._paddingLeft-compact_1g833_204 {
  padding-left: var(--lufa-semantic-ui-spacing-compact);
}

._paddingLeft-default_1g833_208 {
  padding-left: var(--lufa-semantic-ui-spacing-default);
}

._paddingLeft-comfortable_1g833_212 {
  padding-left: var(--lufa-semantic-ui-spacing-comfortable);
}

._paddingLeft-spacious_1g833_216 {
  padding-left: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* MARGIN */
/* ========================================== */

._margin-none_1g833_224 {
  margin: var(--lufa-primitive-spacing-0);
}

._margin-tight_1g833_228 {
  margin: var(--lufa-semantic-ui-spacing-tight);
}

._margin-compact_1g833_232 {
  margin: var(--lufa-semantic-ui-spacing-compact);
}

._margin-default_1g833_236 {
  margin: var(--lufa-semantic-ui-spacing-default);
}

._margin-comfortable_1g833_240 {
  margin: var(--lufa-semantic-ui-spacing-comfortable);
}

._margin-spacious_1g833_244 {
  margin: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* MARGINX */
/* ========================================== */

._marginX-none_1g833_252 {
  margin-left: var(--lufa-primitive-spacing-0);
  margin-right: var(--lufa-primitive-spacing-0);
}

._marginX-tight_1g833_257 {
  margin-left: var(--lufa-semantic-ui-spacing-tight);
  margin-right: var(--lufa-semantic-ui-spacing-tight);
}

._marginX-compact_1g833_262 {
  margin-left: var(--lufa-semantic-ui-spacing-compact);
  margin-right: var(--lufa-semantic-ui-spacing-compact);
}

._marginX-default_1g833_267 {
  margin-left: var(--lufa-semantic-ui-spacing-default);
  margin-right: var(--lufa-semantic-ui-spacing-default);
}

._marginX-comfortable_1g833_272 {
  margin-left: var(--lufa-semantic-ui-spacing-comfortable);
  margin-right: var(--lufa-semantic-ui-spacing-comfortable);
}

._marginX-spacious_1g833_277 {
  margin-left: var(--lufa-semantic-ui-spacing-spacious);
  margin-right: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* MARGINY */
/* ========================================== */

._marginY-none_1g833_286 {
  margin-top: var(--lufa-primitive-spacing-0);
  margin-bottom: var(--lufa-primitive-spacing-0);
}

._marginY-tight_1g833_291 {
  margin-top: var(--lufa-semantic-ui-spacing-tight);
  margin-bottom: var(--lufa-semantic-ui-spacing-tight);
}

._marginY-compact_1g833_296 {
  margin-top: var(--lufa-semantic-ui-spacing-compact);
  margin-bottom: var(--lufa-semantic-ui-spacing-compact);
}

._marginY-default_1g833_301 {
  margin-top: var(--lufa-semantic-ui-spacing-default);
  margin-bottom: var(--lufa-semantic-ui-spacing-default);
}

._marginY-comfortable_1g833_306 {
  margin-top: var(--lufa-semantic-ui-spacing-comfortable);
  margin-bottom: var(--lufa-semantic-ui-spacing-comfortable);
}

._marginY-spacious_1g833_311 {
  margin-top: var(--lufa-semantic-ui-spacing-spacious);
  margin-bottom: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* MARGINTOP */
/* ========================================== */

._marginTop-none_1g833_320 {
  margin-top: var(--lufa-primitive-spacing-0);
}

._marginTop-tight_1g833_324 {
  margin-top: var(--lufa-semantic-ui-spacing-tight);
}

._marginTop-compact_1g833_328 {
  margin-top: var(--lufa-semantic-ui-spacing-compact);
}

._marginTop-default_1g833_332 {
  margin-top: var(--lufa-semantic-ui-spacing-default);
}

._marginTop-comfortable_1g833_336 {
  margin-top: var(--lufa-semantic-ui-spacing-comfortable);
}

._marginTop-spacious_1g833_340 {
  margin-top: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* MARGINRIGHT */
/* ========================================== */

._marginRight-none_1g833_348 {
  margin-right: var(--lufa-primitive-spacing-0);
}

._marginRight-tight_1g833_352 {
  margin-right: var(--lufa-semantic-ui-spacing-tight);
}

._marginRight-compact_1g833_356 {
  margin-right: var(--lufa-semantic-ui-spacing-compact);
}

._marginRight-default_1g833_360 {
  margin-right: var(--lufa-semantic-ui-spacing-default);
}

._marginRight-comfortable_1g833_364 {
  margin-right: var(--lufa-semantic-ui-spacing-comfortable);
}

._marginRight-spacious_1g833_368 {
  margin-right: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* MARGINBOTTOM */
/* ========================================== */

._marginBottom-none_1g833_376 {
  margin-bottom: var(--lufa-primitive-spacing-0);
}

._marginBottom-tight_1g833_380 {
  margin-bottom: var(--lufa-semantic-ui-spacing-tight);
}

._marginBottom-compact_1g833_384 {
  margin-bottom: var(--lufa-semantic-ui-spacing-compact);
}

._marginBottom-default_1g833_388 {
  margin-bottom: var(--lufa-semantic-ui-spacing-default);
}

._marginBottom-comfortable_1g833_392 {
  margin-bottom: var(--lufa-semantic-ui-spacing-comfortable);
}

._marginBottom-spacious_1g833_396 {
  margin-bottom: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* MARGINLEFT */
/* ========================================== */

._marginLeft-none_1g833_404 {
  margin-left: var(--lufa-primitive-spacing-0);
}

._marginLeft-tight_1g833_408 {
  margin-left: var(--lufa-semantic-ui-spacing-tight);
}

._marginLeft-compact_1g833_412 {
  margin-left: var(--lufa-semantic-ui-spacing-compact);
}

._marginLeft-default_1g833_416 {
  margin-left: var(--lufa-semantic-ui-spacing-default);
}

._marginLeft-comfortable_1g833_420 {
  margin-left: var(--lufa-semantic-ui-spacing-comfortable);
}

._marginLeft-spacious_1g833_424 {
  margin-left: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* BACKGROUND */
/* ========================================== */

._background-page_1g833_432 {
  background-color: var(--lufa-semantic-ui-background-page);
}

._background-surface_1g833_436 {
  background-color: var(--lufa-semantic-ui-background-surface-default);
}

._background-success_1g833_440 {
  background-color: var(--lufa-semantic-ui-background-success);
}

._background-error_1g833_444 {
  background-color: var(--lufa-semantic-ui-background-error);
}

._background-warning_1g833_448 {
  background-color: var(--lufa-semantic-ui-background-warning);
}

._background-info_1g833_452 {
  background-color: var(--lufa-semantic-ui-background-info);
}

._background-overlay_1g833_456 {
  background-color: var(--lufa-semantic-ui-overlay-backdrop);
}

._background-on-primary_1g833_460 {
  background-color: var(--lufa-semantic-ui-background-on-primary);
}

._background-on-secondary_1g833_464 {
  background-color: var(--lufa-semantic-ui-background-on-secondary);
}

._background-on-success_1g833_468 {
  background-color: var(--lufa-semantic-ui-background-on-success);
}

._background-on-error_1g833_472 {
  background-color: var(--lufa-semantic-ui-background-on-error);
}

._background-on-warning_1g833_476 {
  background-color: var(--lufa-semantic-ui-background-on-warning);
}

._background-on-info_1g833_480 {
  background-color: var(--lufa-semantic-ui-background-on-info);
}

/* ========================================== */
/* BORDERRADIUS */
/* ========================================== */

._borderRadius-none_1g833_488 {
  border-radius: 0;
}

._borderRadius-small_1g833_492 {
  border-radius: var(--lufa-semantic-ui-border-radius-small);
}

._borderRadius-default_1g833_496 {
  border-radius: var(--lufa-semantic-ui-border-radius-default);
}

._borderRadius-medium_1g833_500 {
  border-radius: var(--lufa-semantic-ui-border-radius-medium);
}

._borderRadius-large_1g833_504 {
  border-radius: var(--lufa-semantic-ui-border-radius-large);
}

._borderRadius-full_1g833_508 {
  border-radius: var(--lufa-semantic-ui-border-radius-full);
}

/* ========================================== */
/* BORDERWIDTH */
/* ========================================== */

._borderWidth-none_1g833_516 {
  border-width: 0;
  border-style: none;
}

._borderWidth-thin_1g833_521 {
  border-width: var(--lufa-semantic-ui-border-width-thin);
  border-style: solid;
}

._borderWidth-medium_1g833_526 {
  border-width: var(--lufa-semantic-ui-border-width-medium);
  border-style: solid;
}

._borderWidth-thick_1g833_531 {
  border-width: var(--lufa-semantic-ui-border-width-thick);
  border-style: solid;
}

/* ========================================== */
/* BORDERCOLOR */
/* ========================================== */

._borderColor-default_1g833_540 {
  border-color: var(--lufa-semantic-ui-border-default);
}

._borderColor-strong_1g833_544 {
  border-color: var(--lufa-semantic-ui-border-strong);
}

._borderColor-success_1g833_548 {
  border-color: var(--lufa-semantic-ui-border-success);
}

._borderColor-error_1g833_552 {
  border-color: var(--lufa-semantic-ui-border-error);
}

._borderColor-warning_1g833_556 {
  border-color: var(--lufa-semantic-ui-border-warning);
}

._borderColor-info_1g833_560 {
  border-color: var(--lufa-semantic-ui-border-info);
}

/* ========================================== */
/* GROW */
/* ========================================== */

._grow_1g833_568 {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  min-width: 0;
}

/* ========================================== */
/* DISPLAY */
/* ========================================== */

._display-block_1g833_579 {
  display: block;
}

._display-inline-block_1g833_583 {
  display: inline-block;
}

._display-flex_1g833_587 {
  display: flex;
}

._display-inline-flex_1g833_591 {
  display: inline-flex;
}

._display-grid_1g833_595 {
  display: grid;
}

._display-none_1g833_599 {
  display: none;
}
/**
 * Stack Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for stack.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Stack
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Stack class */
._stack_rzp51_17 {
  display: flex;
}

/* ========================================== */
/* DIRECTION */
/* ========================================== */

._direction-vertical_rzp51_25 {
  flex-direction: column;
}

._direction-horizontal_rzp51_29 {
  flex-direction: row;
}

/* ========================================== */
/* SPACING */
/* ========================================== */

._spacing-none_rzp51_37 {
  gap: 0;
}

._spacing-tight_rzp51_41 {
  gap: var(--lufa-semantic-ui-spacing-tight);
}

._spacing-compact_rzp51_45 {
  gap: var(--lufa-semantic-ui-spacing-compact);
}

._spacing-default_rzp51_49 {
  gap: var(--lufa-semantic-ui-spacing-default);
}

._spacing-comfortable_rzp51_53 {
  gap: var(--lufa-semantic-ui-spacing-comfortable);
}

._spacing-spacious_rzp51_57 {
  gap: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* ALIGN */
/* ========================================== */

._align-start_rzp51_65 {
  align-items: flex-start;
}

._align-center_rzp51_69 {
  align-items: center;
}

._align-end_rzp51_73 {
  align-items: flex-end;
}

._align-stretch_rzp51_77 {
  align-items: stretch;
}

._align-baseline_rzp51_81 {
  align-items: baseline;
}

/* ========================================== */
/* JUSTIFY */
/* ========================================== */

._justify-start_rzp51_89 {
  justify-content: flex-start;
}

._justify-center_rzp51_93 {
  justify-content: center;
}

._justify-end_rzp51_97 {
  justify-content: flex-end;
}

._justify-space-between_rzp51_101 {
  justify-content: space-between;
}

._justify-space-around_rzp51_105 {
  justify-content: space-around;
}

._justify-space-evenly_rzp51_109 {
  justify-content: space-evenly;
}

/* ========================================== */
/* WRAP */
/* ========================================== */

._wrap-nowrap_rzp51_117 {
  flex-wrap: nowrap;
}

._wrap-wrap_rzp51_121 {
  flex-wrap: wrap;
}

._wrap-wrap-reverse_rzp51_125 {
  flex-wrap: wrap-reverse;
}

/* ========================================== */
/* GROW */
/* ========================================== */

._grow_rzp51_133 {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  min-width: 0;
}
/**
 * Cluster Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for cluster.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Cluster
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Cluster class */
._cluster_18g1l_17 {
  display: flex;
  flex-wrap: wrap;
}

/* ========================================== */
/* SPACING */
/* ========================================== */

._spacing-tight_18g1l_26 {
  gap: var(--lufa-semantic-ui-spacing-tight);
}

._spacing-compact_18g1l_30 {
  gap: var(--lufa-semantic-ui-spacing-compact);
}

._spacing-default_18g1l_34 {
  gap: var(--lufa-semantic-ui-spacing-default);
}

._spacing-comfortable_18g1l_38 {
  gap: var(--lufa-semantic-ui-spacing-comfortable);
}

._spacing-spacious_18g1l_42 {
  gap: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* ALIGN */
/* ========================================== */

._align-flex-start_18g1l_50 {
  align-items: flex-start;
}

._align-center_18g1l_54 {
  align-items: center;
}

._align-flex-end_18g1l_58 {
  align-items: flex-end;
}

._align-baseline_18g1l_62 {
  align-items: baseline;
}

._align-stretch_18g1l_66 {
  align-items: stretch;
}

/* ========================================== */
/* JUSTIFY */
/* ========================================== */

._justify-flex-start_18g1l_74 {
  justify-content: flex-start;
}

._justify-center_18g1l_78 {
  justify-content: center;
}

._justify-flex-end_18g1l_82 {
  justify-content: flex-end;
}

._justify-space-between_18g1l_86 {
  justify-content: space-between;
}

._justify-space-around_18g1l_90 {
  justify-content: space-around;
}

/* ========================================== */
/* GROW */
/* ========================================== */

._grow_18g1l_98 {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  min-width: 0;
}
/**
 * Flex Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for flex.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Flex
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Flex class */
._flex_1q50n_17 {
  display: flex;
}

/* ========================================== */
/* DIRECTION */
/* ========================================== */

._direction-row_1q50n_25 {
  flex-direction: row;
}

._direction-column_1q50n_29 {
  flex-direction: column;
}

._direction-row-reverse_1q50n_33 {
  flex-direction: row-reverse;
}

._direction-column-reverse_1q50n_37 {
  flex-direction: column-reverse;
}

/* ========================================== */
/* WRAP */
/* ========================================== */

._wrap-nowrap_1q50n_45 {
  flex-wrap: nowrap;
}

._wrap-wrap_1q50n_49 {
  flex-wrap: wrap;
}

._wrap-wrap-reverse_1q50n_53 {
  flex-wrap: wrap-reverse;
}

/* ========================================== */
/* JUSTIFY */
/* ========================================== */

._justify-start_1q50n_61 {
  justify-content: flex-start;
}

._justify-end_1q50n_65 {
  justify-content: flex-end;
}

._justify-center_1q50n_69 {
  justify-content: center;
}

._justify-between_1q50n_73 {
  justify-content: space-between;
}

._justify-around_1q50n_77 {
  justify-content: space-around;
}

._justify-evenly_1q50n_81 {
  justify-content: space-evenly;
}

/* ========================================== */
/* ALIGN */
/* ========================================== */

._align-start_1q50n_89 {
  align-items: flex-start;
}

._align-end_1q50n_93 {
  align-items: flex-end;
}

._align-center_1q50n_97 {
  align-items: center;
}

._align-baseline_1q50n_101 {
  align-items: baseline;
}

._align-stretch_1q50n_105 {
  align-items: stretch;
}

/* ========================================== */
/* GAP */
/* ========================================== */

._gap-none_1q50n_113 {
  gap: 0;
}

._gap-tight_1q50n_117 {
  gap: var(--lufa-semantic-ui-spacing-tight);
}

._gap-compact_1q50n_121 {
  gap: var(--lufa-semantic-ui-spacing-compact);
}

._gap-default_1q50n_125 {
  gap: var(--lufa-semantic-ui-spacing-default);
}

._gap-comfortable_1q50n_129 {
  gap: var(--lufa-semantic-ui-spacing-comfortable);
}

._gap-spacious_1q50n_133 {
  gap: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* INLINE */
/* ========================================== */

._inline_1q50n_141 {
  display: inline-flex;
}
/**
 * Grid Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for grid.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Grid
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Grid class */
._grid_1sg8o_17 {
  display: grid;
}

/* ========================================== */
/* COLUMNS */
/* ========================================== */

._columns-1_1sg8o_25 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

._columns-2_1sg8o_29 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

._columns-3_1sg8o_33 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

._columns-4_1sg8o_37 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

._columns-5_1sg8o_41 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

._columns-6_1sg8o_45 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

._columns-12_1sg8o_49 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* ========================================== */
/* GAP */
/* ========================================== */

._gap-none_1sg8o_57 {
  gap: 0;
}

._gap-tight_1sg8o_61 {
  gap: var(--lufa-semantic-ui-spacing-tight);
}

._gap-compact_1sg8o_65 {
  gap: var(--lufa-semantic-ui-spacing-compact);
}

._gap-default_1sg8o_69 {
  gap: var(--lufa-semantic-ui-spacing-default);
}

._gap-comfortable_1sg8o_73 {
  gap: var(--lufa-semantic-ui-spacing-comfortable);
}

._gap-spacious_1sg8o_77 {
  gap: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* GAPX */
/* ========================================== */

._gapX-none_1sg8o_85 {
  column-gap: 0;
}

._gapX-tight_1sg8o_89 {
  column-gap: var(--lufa-semantic-ui-spacing-tight);
}

._gapX-compact_1sg8o_93 {
  column-gap: var(--lufa-semantic-ui-spacing-compact);
}

._gapX-default_1sg8o_97 {
  column-gap: var(--lufa-semantic-ui-spacing-default);
}

._gapX-comfortable_1sg8o_101 {
  column-gap: var(--lufa-semantic-ui-spacing-comfortable);
}

._gapX-spacious_1sg8o_105 {
  column-gap: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* GAPY */
/* ========================================== */

._gapY-none_1sg8o_113 {
  row-gap: 0;
}

._gapY-tight_1sg8o_117 {
  row-gap: var(--lufa-semantic-ui-spacing-tight);
}

._gapY-compact_1sg8o_121 {
  row-gap: var(--lufa-semantic-ui-spacing-compact);
}

._gapY-default_1sg8o_125 {
  row-gap: var(--lufa-semantic-ui-spacing-default);
}

._gapY-comfortable_1sg8o_129 {
  row-gap: var(--lufa-semantic-ui-spacing-comfortable);
}

._gapY-spacious_1sg8o_133 {
  row-gap: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* ALIGN */
/* ========================================== */

._align-start_1sg8o_141 {
  align-items: start;
}

._align-end_1sg8o_145 {
  align-items: end;
}

._align-center_1sg8o_149 {
  align-items: center;
}

._align-stretch_1sg8o_153 {
  align-items: stretch;
}

._align-baseline_1sg8o_157 {
  align-items: baseline;
}

/* ========================================== */
/* JUSTIFY */
/* ========================================== */

._justify-start_1sg8o_165 {
  justify-items: start;
}

._justify-end_1sg8o_169 {
  justify-items: end;
}

._justify-center_1sg8o_173 {
  justify-items: center;
}

._justify-stretch_1sg8o_177 {
  justify-items: stretch;
}

/* ========================================== */
/* INLINE */
/* ========================================== */

._inline_1sg8o_185 {
  display: inline-grid;
}
/**
 * Container Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for container.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Container
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Container class */
._container_1wtq9_17 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--lufa-component-container-padding-default);
  padding-right: var(--lufa-component-container-padding-default);
}

/* ========================================== */
/* FLUID */
/* ========================================== */

._fluid_1wtq9_29 {
  max-width: 100%;
}

/* ========================================== */
/* SIZE */
/* ========================================== */

._size-xs_1wtq9_37 {
  max-width: var(--lufa-component-container-max-width-xs);
}

._size-sm_1wtq9_41 {
  max-width: var(--lufa-component-container-max-width-sm);
}

._size-md_1wtq9_45 {
  max-width: var(--lufa-component-container-max-width-md);
}

._size-lg_1wtq9_49 {
  max-width: var(--lufa-component-container-max-width-lg);
}

._size-xl_1wtq9_53 {
  max-width: var(--lufa-component-container-max-width-xl);
}

._size-2xl_1wtq9_57 {
  max-width: var(--lufa-component-container-max-width-2xl);
}

/* ========================================== */
/* PADDINGBLOCK */
/* ========================================== */

._paddingBlock-none_1wtq9_65 {
  padding-top: var(--lufa-primitive-spacing-0);
  padding-bottom: var(--lufa-primitive-spacing-0);
}

._paddingBlock-tight_1wtq9_70 {
  padding-top: var(--lufa-semantic-ui-spacing-tight);
  padding-bottom: var(--lufa-semantic-ui-spacing-tight);
}

._paddingBlock-compact_1wtq9_75 {
  padding-top: var(--lufa-semantic-ui-spacing-compact);
  padding-bottom: var(--lufa-semantic-ui-spacing-compact);
}

._paddingBlock-default_1wtq9_80 {
  padding-top: var(--lufa-semantic-ui-spacing-default);
  padding-bottom: var(--lufa-semantic-ui-spacing-default);
}

._paddingBlock-comfortable_1wtq9_85 {
  padding-top: var(--lufa-semantic-ui-spacing-comfortable);
  padding-bottom: var(--lufa-semantic-ui-spacing-comfortable);
}

._paddingBlock-spacious_1wtq9_90 {
  padding-top: var(--lufa-semantic-ui-spacing-spacious);
  padding-bottom: var(--lufa-semantic-ui-spacing-spacious);
}

/* ========================================== */
/* PADDINGINLINE */
/* ========================================== */

._paddingInline-none_1wtq9_99 {
  padding-left: var(--lufa-primitive-spacing-0);
  padding-right: var(--lufa-primitive-spacing-0);
}

._paddingInline-tight_1wtq9_104 {
  padding-left: var(--lufa-semantic-ui-spacing-tight);
  padding-right: var(--lufa-semantic-ui-spacing-tight);
}

._paddingInline-compact_1wtq9_109 {
  padding-left: var(--lufa-semantic-ui-spacing-compact);
  padding-right: var(--lufa-semantic-ui-spacing-compact);
}

._paddingInline-default_1wtq9_114 {
  padding-left: var(--lufa-semantic-ui-spacing-default);
  padding-right: var(--lufa-semantic-ui-spacing-default);
}

._paddingInline-comfortable_1wtq9_119 {
  padding-left: var(--lufa-semantic-ui-spacing-comfortable);
  padding-right: var(--lufa-semantic-ui-spacing-comfortable);
}

._paddingInline-spacious_1wtq9_124 {
  padding-left: var(--lufa-semantic-ui-spacing-spacious);
  padding-right: var(--lufa-semantic-ui-spacing-spacious);
}
/**
 * Center Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for center.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Center
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Center class */
._center_1sq8b_17 {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================================== */
/* INLINE */
/* ========================================== */

._inline_1sq8b_27 {
  display: inline-flex;
}
/**
 * Bleed Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for bleed.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Bleed
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Bleed class */
._bleed_fdlu3_17 {
  display: block;
}

/* ========================================== */
/* INLINE */
/* ========================================== */

._inline-0_fdlu3_25 {
  margin-inline: 0;
}

._inline-4_fdlu3_29 {
  margin-inline: calc(var(--lufa-primitive-spacing-4) * -1);
}

._inline-8_fdlu3_33 {
  margin-inline: calc(var(--lufa-primitive-spacing-8) * -1);
}

._inline-12_fdlu3_37 {
  margin-inline: calc(var(--lufa-primitive-spacing-12) * -1);
}

._inline-16_fdlu3_41 {
  margin-inline: calc(var(--lufa-primitive-spacing-16) * -1);
}

._inline-24_fdlu3_45 {
  margin-inline: calc(var(--lufa-primitive-spacing-24) * -1);
}

._inline-32_fdlu3_49 {
  margin-inline: calc(var(--lufa-primitive-spacing-32) * -1);
}

._inline-40_fdlu3_53 {
  margin-inline: calc(var(--lufa-primitive-spacing-40) * -1);
}

._inline-48_fdlu3_57 {
  margin-inline: calc(var(--lufa-primitive-spacing-48) * -1);
}

._inline-64_fdlu3_61 {
  margin-inline: calc(var(--lufa-primitive-spacing-64) * -1);
}

._inline-80_fdlu3_65 {
  margin-inline: calc(var(--lufa-primitive-spacing-80) * -1);
}

._inline-96_fdlu3_69 {
  margin-inline: calc(var(--lufa-primitive-spacing-96) * -1);
}

/* ========================================== */
/* BLOCK */
/* ========================================== */

._block-0_fdlu3_77 {
  margin-block: 0;
}

._block-4_fdlu3_81 {
  margin-block: calc(var(--lufa-primitive-spacing-4) * -1);
}

._block-8_fdlu3_85 {
  margin-block: calc(var(--lufa-primitive-spacing-8) * -1);
}

._block-12_fdlu3_89 {
  margin-block: calc(var(--lufa-primitive-spacing-12) * -1);
}

._block-16_fdlu3_93 {
  margin-block: calc(var(--lufa-primitive-spacing-16) * -1);
}

._block-24_fdlu3_97 {
  margin-block: calc(var(--lufa-primitive-spacing-24) * -1);
}

._block-32_fdlu3_101 {
  margin-block: calc(var(--lufa-primitive-spacing-32) * -1);
}

._block-40_fdlu3_105 {
  margin-block: calc(var(--lufa-primitive-spacing-40) * -1);
}

._block-48_fdlu3_109 {
  margin-block: calc(var(--lufa-primitive-spacing-48) * -1);
}

._block-64_fdlu3_113 {
  margin-block: calc(var(--lufa-primitive-spacing-64) * -1);
}

._block-80_fdlu3_117 {
  margin-block: calc(var(--lufa-primitive-spacing-80) * -1);
}

._block-96_fdlu3_121 {
  margin-block: calc(var(--lufa-primitive-spacing-96) * -1);
}

/* ========================================== */
/* CUSTOM CLASSES */
/* ========================================== */

._inline-full-base_fdlu3_129 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

._inline-full-sm_fdlu3_135 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

._inline-full-md_fdlu3_141 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

._inline-full-lg_fdlu3_147 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

._inline-full-xl_fdlu3_153 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

._inline-full-2xl_fdlu3_159 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/**
 * Divider Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for divider.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Divider
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Divider class */
._divider_1w52u_17 {
  border: 0;
  margin: 0;
  --divider-color: var(--lufa-component-divider-emphasis-default-color);
  --divider-thickness: var(--lufa-component-divider-emphasis-default-thickness);
}

/* ========================================== */
/* ORIENTATION */
/* ========================================== */

._orientation-horizontal_1w52u_28 {
  width: 100%;
  height: var(--divider-thickness);
  display: block;
}

._orientation-vertical_1w52u_34 {
  width: var(--divider-thickness);
  height: 100%;
  display: inline-block;
}

/* ========================================== */
/* EMPHASIS */
/* ========================================== */

._emphasis-subtle_1w52u_44 {
  --divider-color: var(--lufa-component-divider-emphasis-subtle-color);
  --divider-thickness: var(--lufa-component-divider-emphasis-subtle-thickness);
}

._emphasis-default_1w52u_49 {
  --divider-color: var(--lufa-component-divider-emphasis-default-color);
  --divider-thickness: var(--lufa-component-divider-emphasis-default-thickness);
}

._emphasis-moderate_1w52u_54 {
  --divider-color: var(--lufa-component-divider-emphasis-moderate-color);
  --divider-thickness: var(--lufa-component-divider-emphasis-moderate-thickness);
}

._emphasis-strong_1w52u_59 {
  --divider-color: var(--lufa-component-divider-emphasis-strong-color);
  --divider-thickness: var(--lufa-component-divider-emphasis-strong-thickness);
}

._emphasis-bold_1w52u_64 {
  --divider-color: var(--lufa-component-divider-emphasis-bold-color);
  --divider-thickness: var(--lufa-component-divider-emphasis-bold-thickness);
}

/* ========================================== */
/* SPACING */
/* ========================================== */

._spacing-compact_1w52u_73 {
  margin-top: var(--lufa-component-divider-spacing-compact);
  margin-bottom: var(--lufa-component-divider-spacing-compact);
  margin-left: var(--lufa-component-divider-spacing-compact);
  margin-right: var(--lufa-component-divider-spacing-compact);
}

._spacing-default_1w52u_80 {
  margin-top: var(--lufa-component-divider-spacing-default);
  margin-bottom: var(--lufa-component-divider-spacing-default);
  margin-left: var(--lufa-component-divider-spacing-default);
  margin-right: var(--lufa-component-divider-spacing-default);
}

._spacing-comfortable_1w52u_87 {
  margin-top: var(--lufa-component-divider-spacing-comfortable);
  margin-bottom: var(--lufa-component-divider-spacing-comfortable);
  margin-left: var(--lufa-component-divider-spacing-comfortable);
  margin-right: var(--lufa-component-divider-spacing-comfortable);
}

/* ========================================== */
/* LINE-STYLE */
/* ========================================== */

._line-style-solid_1w52u_98 {
  background-color: var(--divider-color);
}

._line-style-dashed_1w52u_102 {
  background-color: transparent;
}

/* ========================================== */
/* CUSTOM CLASSES */
/* ========================================== */

._orientation-horizontal_1w52u_28._line-style-dashed_1w52u_102 {
  background-image: repeating-linear-gradient(
    to right,
    var(--divider-color) 0,
    var(--divider-color) var(--lufa-component-divider-dash-size),
    transparent var(--lufa-component-divider-dash-size),
    transparent var(--lufa-component-divider-dash-gap)
  );
}

._orientation-vertical_1w52u_34._line-style-dashed_1w52u_102 {
  background-image: repeating-linear-gradient(
    to bottom,
    var(--divider-color) 0,
    var(--divider-color) var(--lufa-component-divider-dash-size),
    transparent var(--lufa-component-divider-dash-size),
    transparent var(--lufa-component-divider-dash-gap)
  );
}
/**
 * AspectRatio Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for aspectratio.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities AspectRatio
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base AspectRatio class */
._aspectratio_yfrex_17 {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* ========================================== */
/* RATIO */
/* ========================================== */

._ratio-16-9_yfrex_27 {
  padding-top: 56.25%;
}

._ratio-4-3_yfrex_31 {
  padding-top: 75%;
}

._ratio-21-9_yfrex_35 {
  padding-top: 42.857%;
}

._ratio-3-2_yfrex_39 {
  padding-top: 66.667%;
}

._ratio-1-1_yfrex_43 {
  padding-top: 100%;
}

._ratio-9-16_yfrex_47 {
  padding-top: 177.778%;
}

._ratio-3-4_yfrex_51 {
  padding-top: 133.333%;
}

/* ========================================== */
/* CUSTOM CLASSES */
/* ========================================== */

._aspect-ratio_yfrex_59 {
  position: relative;
  width: 100%;
  overflow: hidden;
}

._aspect-ratio-content_yfrex_65 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

._aspect-ratio_yfrex_59:has([style*='--aspect-ratio-padding']) {
  padding-top: var(--aspect-ratio-padding);
}
/**
 * Text Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for text.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Text
 */

/* ========================================== */
/* VARIANT */
/* ========================================== */

._variant-h1_19xx8_16 {
  font-size: var(--lufa-semantic-typography-heading-h1);
}

._variant-h2_19xx8_20 {
  font-size: var(--lufa-semantic-typography-heading-h2);
}

._variant-h3_19xx8_24 {
  font-size: var(--lufa-semantic-typography-heading-h3);
}

._variant-h4_19xx8_28 {
  font-size: var(--lufa-semantic-typography-heading-h4);
}

._variant-h5_19xx8_32 {
  font-size: var(--lufa-semantic-typography-heading-h5);
}

._variant-h6_19xx8_36 {
  font-size: var(--lufa-semantic-typography-heading-h6);
}

._variant-body-large_19xx8_40 {
  font-size: var(--lufa-semantic-typography-body-large);
}

._variant-body_19xx8_40 {
  font-size: var(--lufa-semantic-typography-body-default);
}

._variant-body-small_19xx8_48 {
  font-size: var(--lufa-semantic-typography-body-small);
}

._variant-caption_19xx8_52 {
  font-size: var(--lufa-semantic-typography-caption);
}

._variant-label_19xx8_56 {
  font-size: var(--lufa-semantic-typography-label);
}

/* ========================================== */
/* COLOR */
/* ========================================== */

._color-primary_19xx8_64 {
  color: var(--lufa-semantic-ui-text-primary);
}

._color-secondary_19xx8_68 {
  color: var(--lufa-semantic-ui-text-secondary);
}

._color-tertiary_19xx8_72 {
  color: var(--lufa-semantic-ui-text-tertiary);
}

._color-success_19xx8_76 {
  color: var(--lufa-semantic-ui-text-success);
}

._color-error_19xx8_80 {
  color: var(--lufa-semantic-ui-text-error);
}

._color-warning_19xx8_84 {
  color: var(--lufa-semantic-ui-text-warning);
}

._color-info_19xx8_88 {
  color: var(--lufa-semantic-ui-text-info);
}

._color-inverse_19xx8_92 {
  color: var(--lufa-semantic-ui-background-on-primary);
}

/* ========================================== */
/* WEIGHT */
/* ========================================== */

._weight-normal_19xx8_100 {
  font-weight: var(--lufa-core-typography-body-font-weight);
}

._weight-medium_19xx8_104 {
  font-weight: var(--lufa-core-typography-medium-font-weight);
}

._weight-semibold_19xx8_108 {
  font-weight: var(--lufa-core-typography-strong-font-weight);
}

._weight-bold_19xx8_112 {
  font-weight: var(--lufa-core-typography-heading-font-weight);
}

/* ========================================== */
/* ALIGN */
/* ========================================== */

._align-left_19xx8_120 {
  text-align: left;
}

._align-center_19xx8_124 {
  text-align: center;
}

._align-right_19xx8_128 {
  text-align: right;
}

._align-justify_19xx8_132 {
  text-align: justify;
}

/* ========================================== */
/* TRANSFORM */
/* ========================================== */

._transform-none_19xx8_140 {
  text-transform: none;
}

._transform-uppercase_19xx8_144 {
  text-transform: uppercase;
}

._transform-lowercase_19xx8_148 {
  text-transform: lowercase;
}

._transform-capitalize_19xx8_152 {
  text-transform: capitalize;
}
/**
 * Icon Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for icon.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Icon
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Icon class */
._icon_1f805_17 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ========================================== */
/* SIZE */
/* ========================================== */

._size-xs_1f805_28 {
  width: var(--lufa-component-shared-icon-size-xs);
  height: var(--lufa-component-shared-icon-size-xs);
}

._size-sm_1f805_33 {
  width: var(--lufa-component-shared-icon-size-sm);
  height: var(--lufa-component-shared-icon-size-sm);
}

._size-md_1f805_38 {
  width: var(--lufa-component-shared-icon-size-md);
  height: var(--lufa-component-shared-icon-size-md);
}

._size-lg_1f805_43 {
  width: var(--lufa-component-shared-icon-size-lg);
  height: var(--lufa-component-shared-icon-size-lg);
}

._size-xl_1f805_48 {
  width: var(--lufa-component-shared-icon-size-xl);
  height: var(--lufa-component-shared-icon-size-xl);
}

/* ========================================== */
/* COLOR */
/* ========================================== */

._color-currentColor_1f805_57 {
  color: currentColor;
}

._color-primary_1f805_61 {
  color: var(--lufa-semantic-ui-text-primary);
}

._color-secondary_1f805_65 {
  color: var(--lufa-semantic-ui-text-secondary);
}

._color-success_1f805_69 {
  color: var(--lufa-semantic-ui-text-success);
}

._color-error_1f805_73 {
  color: var(--lufa-semantic-ui-text-error);
}

._color-warning_1f805_77 {
  color: var(--lufa-semantic-ui-text-warning);
}

._color-info_1f805_81 {
  color: var(--lufa-semantic-ui-text-info);
}

._color-muted_1f805_85 {
  color: var(--lufa-semantic-ui-text-tertiary);
}

/* ========================================== */
/* STANDALONE SELECTORS */
/* ========================================== */

._visually-hidden_1f805_93 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
/**
 * Badge Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for badge.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Badge
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Badge class */
._badge_1h7vh_17 {
  display: inline-flex;
  align-items: center;
  gap: var(--lufa-semantic-ui-spacing-tight);
  font-family: inherit;
  font-weight: var(--lufa-primitive-typography-font-weight-medium);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  border-radius: var(--lufa-component-badge-border-radius);
  border: 1px solid transparent;
  user-select: none;
}

/* ========================================== */
/* VARIANT */
/* ========================================== */

._variant-default_1h7vh_35 {
  background-color: var(--lufa-component-badge-variant-default-background);
  color: var(--lufa-component-badge-variant-default-text);
  border-color: var(--lufa-component-badge-variant-default-border);
}

._variant-success_1h7vh_41 {
  background-color: var(--lufa-component-badge-variant-success-background);
  color: var(--lufa-component-badge-variant-success-text);
  border-color: var(--lufa-component-badge-variant-success-border);
}

._variant-danger_1h7vh_47 {
  background-color: var(--lufa-component-badge-variant-error-background);
  color: var(--lufa-component-badge-variant-error-text);
  border-color: var(--lufa-component-badge-variant-error-border);
}

._variant-warning_1h7vh_53 {
  background-color: var(--lufa-component-badge-variant-warning-background);
  color: var(--lufa-component-badge-variant-warning-text);
  border-color: var(--lufa-component-badge-variant-warning-border);
}

._variant-info_1h7vh_59 {
  background-color: var(--lufa-component-badge-variant-info-background);
  color: var(--lufa-component-badge-variant-info-text);
  border-color: var(--lufa-component-badge-variant-info-border);
}

/* ========================================== */
/* SIZE */
/* ========================================== */

._size-sm_1h7vh_69 {
  padding-block: var(--lufa-component-badge-padding-compact-block);
  padding-inline: var(--lufa-component-badge-padding-compact-inline);
  font-size: var(--lufa-component-badge-font-size-compact);
}

._size-md_1h7vh_75 {
  padding-block: var(--lufa-component-badge-padding-default-block);
  padding-inline: var(--lufa-component-badge-padding-default-inline);
  font-size: var(--lufa-component-badge-font-size-default);
}

._size-lg_1h7vh_81 {
  padding-block: var(--lufa-component-badge-padding-large-block);
  padding-inline: var(--lufa-component-badge-padding-large-inline);
  font-size: var(--lufa-component-badge-font-size-large);
}

/* ========================================== */
/* CUSTOM CLASSES */
/* ========================================== */

._badge-content_1h7vh_91 {
  display: inline-block;
}

._badge-dot_1h7vh_95 {
  display: inline-block;
  width: var(--lufa-component-badge-dot-size);
  height: var(--lufa-component-badge-dot-size);
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

._badge-with-dot_1h7vh_104 {
  padding-left: var(--lufa-semantic-ui-spacing-tight);
}
/**
 * Link Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for link.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Link
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Link class */
._link_jwna5_17 {
  display: inline;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-decoration: none;
  transition:
    border-color var(--lufa-semantic-ui-transition-duration-fast)
      var(--lufa-semantic-ui-transition-timing-function-default),
    color var(--lufa-semantic-ui-transition-duration-fast) var(--lufa-semantic-ui-transition-timing-function-default);
}

/* ========================================== */
/* VARIANT */
/* ========================================== */

._variant-underline_jwna5_34 {
  border-bottom-width: var(--lufa-semantic-ui-border-width-thin);
  border-bottom-style: solid;
  border-bottom-color: transparent;
}

._variant-plain_jwna5_40 {
  border-bottom-width: 0;
  border-bottom-style: none;
  border-bottom-color: transparent;
}

/* ========================================== */
/* COLOR */
/* ========================================== */

._color-primary_jwna5_50 {
  color: var(--lufa-semantic-interactive-link-default);
}

._color-secondary_jwna5_54 {
  color: var(--lufa-semantic-ui-text-secondary);
}

._color-tertiary_jwna5_58 {
  color: var(--lufa-semantic-ui-text-tertiary);
}

._color-inverse_jwna5_62 {
  color: var(--lufa-semantic-ui-background-on-primary);
}

/* ========================================== */
/* STANDALONE SELECTORS */
/* ========================================== */

/* Primary color - darken on hover */
._link_jwna5_17._color-primary_jwna5_50:hover {
  color: var(--lufa-semantic-interactive-link-hover);
}

/* Default variant - border appears on hover */
._link_jwna5_17._variant-underline_jwna5_34:hover {
  border-bottom-color: currentColor;
}

/* Accessible focus ring (matches Button pattern) */
._link_jwna5_17:focus-visible {
  outline: var(--lufa-component-shared-focus-outline-width) solid var(--lufa-component-shared-focus-outline-color);
  outline-offset: var(--lufa-component-shared-focus-outline-offset);
  border-radius: var(--lufa-semantic-ui-border-radius-small);
}
/**
 * Button Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for button.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Button
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Button class */
._button_oh3b2_17 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lufa-semantic-ui-spacing-compact);
  cursor: var(--lufa-component-button-state-default-cursor);
  font-family: inherit;
  font-weight: var(--lufa-primitive-typography-font-weight-semibold);
  text-decoration: none;
  border-radius: var(--lufa-semantic-ui-border-radius-default);
  transition: all var(--lufa-semantic-ui-transition-duration-fast)
    var(--lufa-semantic-ui-transition-timing-function-default);
  user-select: none;
  white-space: nowrap;
  box-shadow: var(--lufa-component-button-effect-glow-default);
  text-shadow: var(--lufa-component-button-effect-text-glow-default);
}

/* ========================================== */
/* TYPE */
/* ========================================== */

._type-solid_oh3b2_39 {
  border-width: 0;
  border-style: none;
}

._type-outline_oh3b2_44 {
  border-width: 1px;
  border-style: solid;
}

._type-ghost_oh3b2_49 {
  border-width: 0;
  border-style: none;
}

/* ========================================== */
/* VARIANT */
/* ========================================== */

._variant-primary_oh3b2_58 {
  content: '';
}

._variant-secondary_oh3b2_62 {
  content: '';
}

._variant-success_oh3b2_66 {
  content: '';
}

._variant-danger_oh3b2_70 {
  content: '';
}

._variant-warning_oh3b2_74 {
  content: '';
}

._variant-info_oh3b2_78 {
  content: '';
}

._variant-neutral_oh3b2_82 {
  content: '';
}

/* ========================================== */
/* SIZE */
/* ========================================== */

._size-sm_oh3b2_90 {
  height: var(--lufa-semantic-ui-height-sm);
  padding-left: var(--lufa-semantic-ui-spacing-compact);
  padding-right: var(--lufa-semantic-ui-spacing-compact);
  font-size: var(--lufa-semantic-typography-body-small);
}

._size-md_oh3b2_97 {
  height: var(--lufa-semantic-ui-height-md);
  padding-left: var(--lufa-semantic-ui-spacing-default);
  padding-right: var(--lufa-semantic-ui-spacing-default);
  font-size: var(--lufa-semantic-typography-button);
}

._size-lg_oh3b2_104 {
  height: var(--lufa-semantic-ui-height-lg);
  padding-left: var(--lufa-semantic-ui-spacing-comfortable);
  padding-right: var(--lufa-semantic-ui-spacing-comfortable);
  font-size: var(--lufa-semantic-typography-body-large);
}

/* ========================================== */
/* RADIUS */
/* ========================================== */

._radius-none_oh3b2_115 {
  border-radius: 0px;
}

._radius-sm_oh3b2_119 {
  border-radius: var(--lufa-semantic-ui-border-radius-small);
}

._radius-base_oh3b2_123 {
  border-radius: var(--lufa-semantic-ui-border-radius-default);
}

._radius-md_oh3b2_127 {
  border-radius: var(--lufa-semantic-ui-border-radius-medium);
}

._radius-full_oh3b2_131 {
  border-radius: var(--lufa-semantic-ui-border-radius-full);
}

/* ========================================== */
/* FULLWIDTH */
/* ========================================== */

._fullWidth_oh3b2_139 {
  width: 100%;
}

/* ========================================== */
/* DISABLED */
/* ========================================== */

._disabled_oh3b2_147 {
  opacity: var(--lufa-component-button-state-disabled-opacity);
  cursor: var(--lufa-component-button-state-disabled-cursor);
  pointer-events: none;
}

/* ========================================== */
/* LOADING */
/* ========================================== */

._loading_oh3b2_157 {
  opacity: var(--lufa-semantic-interactive-opacity-loading);
  cursor: var(--lufa-component-button-state-loading-cursor);
}

/* ========================================== */
/* COMPOUND SELECTORS (type + variant combinations) */
/* ========================================== */

/* Solid + Primary (Blue) */

._button_oh3b2_17._type-solid_oh3b2_39._variant-primary_oh3b2_58 {
  background-color: var(--lufa-component-button-type-solid-variant-primary-background-default);
  color: var(--lufa-component-button-type-solid-variant-primary-text);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-primary_oh3b2_58:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-primary-background-hover);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-primary_oh3b2_58:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-primary-background-active);
}

/* Solid + Secondary (Purple) */

._button_oh3b2_17._type-solid_oh3b2_39._variant-secondary_oh3b2_62 {
  background-color: var(--lufa-component-button-type-solid-variant-secondary-background-default);
  color: var(--lufa-component-button-type-solid-variant-secondary-text);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-secondary_oh3b2_62:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-secondary-background-hover);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-secondary_oh3b2_62:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-secondary-background-active);
}

/* Solid + Success (Green) */

._button_oh3b2_17._type-solid_oh3b2_39._variant-success_oh3b2_66 {
  background-color: var(--lufa-component-button-type-solid-variant-success-background-default);
  color: var(--lufa-component-button-type-solid-variant-success-text);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-success_oh3b2_66:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-success-background-hover);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-success_oh3b2_66:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-success-background-active);
}

/* Solid + Danger (Red) */

._button_oh3b2_17._type-solid_oh3b2_39._variant-danger_oh3b2_70 {
  background-color: var(--lufa-component-button-type-solid-variant-destructive-background-default);
  color: var(--lufa-component-button-type-solid-variant-destructive-text);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-danger_oh3b2_70:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-destructive-background-hover);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-danger_oh3b2_70:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-destructive-background-active);
}

/* Solid + Warning (Orange/Yellow-600) */

._button_oh3b2_17._type-solid_oh3b2_39._variant-warning_oh3b2_74 {
  background-color: var(--lufa-component-button-type-solid-variant-warning-background-default);
  color: var(--lufa-component-button-type-solid-variant-warning-text);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-warning_oh3b2_74:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-warning-background-hover);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-warning_oh3b2_74:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-warning-background-active);
}

/* Solid + Info (Blue-500) */

._button_oh3b2_17._type-solid_oh3b2_39._variant-info_oh3b2_78 {
  background-color: var(--lufa-component-button-type-solid-variant-info-background-default);
  color: var(--lufa-component-button-type-solid-variant-info-text);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-info_oh3b2_78:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-info-background-hover);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-info_oh3b2_78:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-info-background-active);
}

/* Solid + Neutral (Gray) */

._button_oh3b2_17._type-solid_oh3b2_39._variant-neutral_oh3b2_82 {
  background-color: var(--lufa-component-button-type-solid-variant-neutral-background-default);
  color: var(--lufa-component-button-type-solid-variant-neutral-text);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-neutral_oh3b2_82:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-neutral-background-hover);
}

._button_oh3b2_17._type-solid_oh3b2_39._variant-neutral_oh3b2_82:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-solid-variant-neutral-background-active);
}

/* Outline + Primary (Blue) */

._button_oh3b2_17._type-outline_oh3b2_44._variant-primary_oh3b2_58 {
  background-color: var(--lufa-component-button-type-outline-background-default);
  color: var(--lufa-component-button-type-outline-text-default);
  border-color: var(--lufa-component-button-type-outline-border-default);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-primary_oh3b2_58:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-outline-background-hover);
  color: var(--lufa-component-button-type-outline-text-hover);
  border-color: var(--lufa-component-button-type-outline-border-hover);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-primary_oh3b2_58:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-outline-variant-primary-background-active);
  border-color: var(--lufa-component-button-type-outline-variant-primary-border-active);
}

/* Outline + Secondary (Purple) */

._button_oh3b2_17._type-outline_oh3b2_44._variant-secondary_oh3b2_62 {
  background-color: transparent;
  color: var(--lufa-semantic-interactive-action-secondary-default);
  border-color: var(--lufa-semantic-interactive-action-secondary-default);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-secondary_oh3b2_62:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-semantic-interactive-action-secondary-default);
  color: var(--lufa-semantic-ui-background-on-secondary);
  border-color: var(--lufa-semantic-interactive-action-secondary-hover);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-secondary_oh3b2_62:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-outline-variant-secondary-background-active);
  border-color: var(--lufa-component-button-type-outline-variant-secondary-border-active);
}

/* Outline + Success (Green) */

._button_oh3b2_17._type-outline_oh3b2_44._variant-success_oh3b2_66 {
  background-color: transparent;
  color: var(--lufa-semantic-interactive-action-success-default);
  border-color: var(--lufa-semantic-interactive-action-success-default);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-success_oh3b2_66:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-semantic-interactive-action-success-default);
  color: var(--lufa-component-button-type-outline-text-hover);
  border-color: var(--lufa-semantic-interactive-action-success-hover);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-success_oh3b2_66:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-outline-variant-success-background-active);
  border-color: var(--lufa-component-button-type-outline-variant-success-border-active);
}

/* Outline + Danger (Red) */

._button_oh3b2_17._type-outline_oh3b2_44._variant-danger_oh3b2_70 {
  background-color: transparent;
  color: var(--lufa-semantic-interactive-action-destructive-default);
  border-color: var(--lufa-semantic-interactive-action-destructive-default);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-danger_oh3b2_70:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-semantic-interactive-action-destructive-default);
  color: var(--lufa-component-button-type-outline-text-hover);
  border-color: var(--lufa-semantic-interactive-action-destructive-hover);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-danger_oh3b2_70:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-outline-variant-destructive-background-active);
  border-color: var(--lufa-component-button-type-outline-variant-destructive-border-active);
}

/* Outline + Warning (Orange/Yellow-600) */

._button_oh3b2_17._type-outline_oh3b2_44._variant-warning_oh3b2_74 {
  background-color: transparent;
  color: var(--lufa-semantic-interactive-action-warning-default);
  border-color: var(--lufa-semantic-interactive-action-warning-default);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-warning_oh3b2_74:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-semantic-interactive-action-warning-default);
  color: var(--lufa-component-button-type-outline-text-hover);
  border-color: var(--lufa-semantic-interactive-action-warning-hover);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-warning_oh3b2_74:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-outline-variant-warning-background-active);
  border-color: var(--lufa-component-button-type-outline-variant-warning-border-active);
}

/* Outline + Info (Blue-500) */

._button_oh3b2_17._type-outline_oh3b2_44._variant-info_oh3b2_78 {
  background-color: transparent;
  color: var(--lufa-semantic-interactive-action-info-default);
  border-color: var(--lufa-semantic-interactive-action-info-default);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-info_oh3b2_78:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-semantic-interactive-action-info-default);
  color: var(--lufa-component-button-type-outline-text-hover);
  border-color: var(--lufa-semantic-interactive-action-info-hover);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-info_oh3b2_78:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-outline-variant-info-background-active);
  border-color: var(--lufa-component-button-type-outline-variant-info-border-active);
}

/* Outline + Neutral (Gray) */

._button_oh3b2_17._type-outline_oh3b2_44._variant-neutral_oh3b2_82 {
  background-color: transparent;
  color: var(--lufa-semantic-ui-text-secondary);
  border-color: var(--lufa-semantic-interactive-border-hover);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-neutral_oh3b2_82:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-semantic-interactive-background-hover);
  border-color: var(--lufa-semantic-interactive-border-hover);
}

._button_oh3b2_17._type-outline_oh3b2_44._variant-neutral_oh3b2_82:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-outline-variant-neutral-background-active);
  border-color: var(--lufa-semantic-interactive-border-hover);
}

/* Ghost + Primary (Blue) */

._button_oh3b2_17._type-ghost_oh3b2_49._variant-primary_oh3b2_58 {
  background-color: var(--lufa-component-button-type-ghost-background-default);
  color: var(--lufa-component-button-type-ghost-text-default);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-primary_oh3b2_58:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-hover);
  color: var(--lufa-component-button-type-ghost-text-hover);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-primary_oh3b2_58:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-active);
  color: var(--lufa-component-button-type-ghost-variant-primary-text-active);
}

/* Ghost + Secondary (Purple) */

._button_oh3b2_17._type-ghost_oh3b2_49._variant-secondary_oh3b2_62 {
  background-color: transparent;
  color: var(--lufa-semantic-interactive-action-secondary-default);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-secondary_oh3b2_62:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-hover);
  color: var(--lufa-semantic-interactive-action-secondary-hover);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-secondary_oh3b2_62:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-active);
  color: var(--lufa-component-button-type-ghost-variant-secondary-text-active);
}

/* Ghost + Success (Green) */

._button_oh3b2_17._type-ghost_oh3b2_49._variant-success_oh3b2_66 {
  background-color: transparent;
  color: var(--lufa-semantic-interactive-action-success-default);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-success_oh3b2_66:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-hover);
  color: var(--lufa-semantic-interactive-action-success-hover);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-success_oh3b2_66:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-active);
  color: var(--lufa-component-button-type-ghost-variant-success-text-active);
}

/* Ghost + Danger (Red) */

._button_oh3b2_17._type-ghost_oh3b2_49._variant-danger_oh3b2_70 {
  background-color: transparent;
  color: var(--lufa-semantic-interactive-action-destructive-default);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-danger_oh3b2_70:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-hover);
  color: var(--lufa-semantic-interactive-action-destructive-hover);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-danger_oh3b2_70:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-active);
  color: var(--lufa-component-button-type-ghost-variant-destructive-text-active);
}

/* Ghost + Warning (Orange/Yellow-600) */

._button_oh3b2_17._type-ghost_oh3b2_49._variant-warning_oh3b2_74 {
  background-color: transparent;
  color: var(--lufa-semantic-interactive-action-warning-default);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-warning_oh3b2_74:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-hover);
  color: var(--lufa-semantic-interactive-action-warning-hover);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-warning_oh3b2_74:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-active);
  color: var(--lufa-component-button-type-ghost-variant-warning-text-active);
}

/* Ghost + Info (Blue-500) */

._button_oh3b2_17._type-ghost_oh3b2_49._variant-info_oh3b2_78 {
  background-color: transparent;
  color: var(--lufa-semantic-interactive-action-info-default);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-info_oh3b2_78:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-hover);
  color: var(--lufa-semantic-interactive-action-info-hover);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-info_oh3b2_78:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-active);
  color: var(--lufa-component-button-type-ghost-variant-info-text-active);
}

/* Ghost + Neutral (Gray) */

._button_oh3b2_17._type-ghost_oh3b2_49._variant-neutral_oh3b2_82 {
  background-color: transparent;
  color: var(--lufa-semantic-ui-text-secondary);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-neutral_oh3b2_82:hover:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-hover);
  color: var(--lufa-semantic-ui-text-primary);
}

._button_oh3b2_17._type-ghost_oh3b2_49._variant-neutral_oh3b2_82:active:not(:disabled):not(._disabled_oh3b2_147) {
  background-color: var(--lufa-component-button-type-ghost-background-active);
  color: var(--lufa-component-button-type-ghost-variant-neutral-text-active);
}

/* ========================================== */
/* STANDALONE SELECTORS */
/* ========================================== */

/* Focus ring (keyboard navigation) */
._button_oh3b2_17:focus-visible {
  outline: var(--lufa-component-shared-focus-outline-width) solid var(--lufa-component-shared-focus-outline-color);
  outline-offset: var(--lufa-component-shared-focus-outline-offset);
}

/* Glow hover state — enhanced box-shadow and text-shadow on hover (themeable) */
._button_oh3b2_17:hover:not(:disabled):not(._disabled_oh3b2_147) {
  box-shadow: var(--lufa-component-button-effect-glow-hover);
  text-shadow: var(--lufa-component-button-effect-text-glow-hover);
}

/* Loading spinner — animates first child icon */
._button_oh3b2_17._loading_oh3b2_157 > :first-child svg {
  animation: _spin_oh3b2_1 1s linear infinite;
}

/* Visually hidden — for screen readers (e.g. icon-only loading label) */
._visually-hidden_oh3b2_544 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ========================================== */
/* KEYFRAMES */
/* ========================================== */

@keyframes _spin_oh3b2_1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/**
 * Input Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for input.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Input
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Input class */
._input_7uvw4_17 {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  padding-block: var(--lufa-component-input-padding-md-block);
  padding-inline: var(--lufa-component-input-padding-md-inline);
  font-family: inherit;
  font-size: var(--lufa-component-input-font-size-md);
  line-height: var(--lufa-core-typography-body-line-height);
  color: var(--lufa-component-input-text-default);
  background-color: var(--lufa-component-input-background-default);
  border: var(--lufa-component-input-border-width) solid var(--lufa-component-input-border-default);
  border-radius: var(--lufa-component-input-border-radius);
  transition:
    border-color var(--lufa-semantic-ui-transition-duration-fast),
    box-shadow var(--lufa-semantic-ui-transition-duration-fast);
  outline: none;
}

/* ========================================== */
/* ERROR */
/* ========================================== */

._error_7uvw4_40 {
  border-color: var(--lufa-component-input-border-error);
}

/* ========================================== */
/* DISABLED */
/* ========================================== */

._disabled_7uvw4_48 {
  background-color: var(--lufa-component-input-background-disabled);
  color: var(--lufa-component-input-text-disabled);
  border-color: var(--lufa-component-input-border-disabled);
  cursor: var(--lufa-component-input-state-disabled-cursor);
}

/* ========================================== */
/* FULLWIDTH */
/* ========================================== */

._fullWidth_7uvw4_59 {
  width: 100%;
  display: block;
}

/* ========================================== */
/* STANDALONE SELECTORS */
/* ========================================== */

/* Placeholder text color */
._input_7uvw4_17::placeholder {
  color: var(--lufa-component-input-text-placeholder);
}

/* Focus ring (keyboard navigation) */
._input_7uvw4_17:focus-visible {
  border-color: var(--lufa-component-input-border-focus);
  box-shadow: 0 0 0 var(--lufa-component-shared-focus-outline-width) var(--lufa-component-shared-focus-outline-color);
}

/* Error + Focus — red focus ring */
._input_7uvw4_17._error_7uvw4_40:focus-visible {
  box-shadow: 0 0 0 var(--lufa-component-shared-focus-outline-width) var(--lufa-component-input-border-error);
}
/**
 * Label Component - Generated Utility Classes
 * 
 * DO NOT EDIT MANUALLY - This file is auto-generated.
 * 
 * Generated by: packages/design-system/main/scripts/generate-utilities.cjs
 * Configuration: See component directory for label.utilities.config.cjs
 * 
 * To regenerate: pnpm generate:utilities Label
 */

/* ========================================== */
/* BASE CLASS */
/* ========================================== */

/* Base Label class */
._label_xspry_17 {
  display: block;
  font-family: inherit;
  font-size: var(--lufa-component-input-label-font-size);
  font-weight: var(--lufa-primitive-typography-font-weight-medium);
  color: var(--lufa-component-input-label-color);
  margin-bottom: var(--lufa-component-input-label-spacing);
  line-height: var(--lufa-primitive-typography-line-height-tight);
}
._card_1vguz_1 {
  background-color: var(--lufa-component-card-background);
  border: 1px solid var(--lufa-component-card-border);
  border-radius: var(--lufa-component-card-border-radius-sm);
  box-shadow: var(--lufa-component-card-shadow-sm);
  padding: var(--lufa-component-card-padding-md);
  color: var(--lufa-semantic-ui-text-primary);
  overflow: hidden; /* Ensures content respects border-radius */
}
._dot-nav_jbgrs_1 {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--lufa-semantic-ui-spacing-spacious);
  z-index: var(--lufa-semantic-z-index-fixed);
}

._dot-nav--right_jbgrs_11 {
  right: var(--lufa-semantic-ui-spacing-comfortable);
}

._dot-nav--left_jbgrs_15 {
  left: var(--lufa-semantic-ui-spacing-comfortable);
}

/* ========================================== */
/* ITEM */
/* ========================================== */

._dot-nav-item_jbgrs_23 {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

._dot-nav-item--active_jbgrs_31 {
  z-index: 1;
}

._dot-nav-item_jbgrs_23:hover,
._dot-nav-item_jbgrs_23:focus-within {
  z-index: 2;
}

/* ========================================== */
/* DOT */
/* ========================================== */

._dot-nav-dot_jbgrs_44 {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: var(--lufa-semantic-ui-border-radius-full);
  background: var(--lufa-semantic-ui-border-default);
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition:
    background var(--lufa-semantic-ui-transition-duration-fast)
      var(--lufa-semantic-ui-transition-timing-function-default),
    transform var(--lufa-semantic-ui-transition-duration-fast)
      var(--lufa-semantic-ui-transition-timing-function-default);
}

/* Expanded invisible hit area for accessible pointer/touch targets */
._dot-nav-dot_jbgrs_44::after {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--lufa-semantic-ui-spacing-default));
}

._dot-nav-dot_jbgrs_44:hover,
._dot-nav-dot--active_jbgrs_69 {
  background: var(--lufa-semantic-interactive-action-primary-default);
  transform: scale(1.6);
}

._dot-nav-dot_jbgrs_44:focus-visible {
  outline: var(--lufa-component-shared-focus-outline-width) solid var(--lufa-component-shared-focus-outline-color);
  outline-offset: var(--lufa-component-shared-focus-outline-offset);
}

/* ========================================== */
/* LABEL */
/* ========================================== */

/*
 * The label is absolutely positioned so it never shifts the dot alignment.
 * By default it is hidden (opacity: 0).
 * It becomes visible when:
 *   1. The parent item is hovered (.dot-nav-item:hover)
 *   2. The item is the active section (.dot-nav-item--active)
 */
._dot-nav-label_jbgrs_90 {
  position: absolute;
  right: calc(100% + var(--lufa-semantic-ui-spacing-compact));
  font-size: var(--lufa-semantic-ui-typography-caption);
  font-weight: 500;
  color: var(--lufa-semantic-ui-text-primary);
  background: var(--lufa-semantic-ui-background-page);
  border: var(--lufa-semantic-ui-border-width-thin) solid var(--lufa-semantic-ui-border-default);
  border-radius: var(--lufa-semantic-ui-border-radius-small);
  padding: var(--lufa-semantic-ui-spacing-tight) var(--lufa-semantic-ui-spacing-compact);
  box-shadow: var(--lufa-semantic-ui-shadow-medium);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(var(--lufa-semantic-ui-spacing-tight));
  transition:
    opacity var(--lufa-semantic-ui-transition-duration-fast) var(--lufa-semantic-ui-transition-timing-function-default),
    transform var(--lufa-semantic-ui-transition-duration-fast)
      var(--lufa-semantic-ui-transition-timing-function-default);
}

/* Label on the left side */
._dot-nav--left_jbgrs_15 ._dot-nav-label_jbgrs_90 {
  right: auto;
  left: calc(100% + var(--lufa-semantic-ui-spacing-compact));
  transform: translateX(calc(-1 * var(--lufa-semantic-ui-spacing-tight)));
}

/* Label visible on hover or keyboard focus (all items) */
._dot-nav-item_jbgrs_23:hover ._dot-nav-label_jbgrs_90,
._dot-nav-item_jbgrs_23:focus-within ._dot-nav-label_jbgrs_90 {
  opacity: 1;
  transform: translateX(0);
}

/* Label always visible for the active section */
._dot-nav-item--active_jbgrs_31 ._dot-nav-label_jbgrs_90 {
  opacity: 1;
  transform: translateX(0);
}

/* ========================================== */
/* REDUCED MOTION */
/* ========================================== */

@media (prefers-reduced-motion: reduce) {
  ._dot-nav-dot_jbgrs_44,
  ._dot-nav-label_jbgrs_90 {
    transition: none;
  }
}
._root_584t1_1 {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
  word-wrap: normal;
}
/*$vite$:1*/