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

:root {
  --blur-none: 0; /** No blur - sharp edges and clear content */
  --blur-sm: 4px; /** Small blur - subtle glass effect for overlays */
  --blur-md: 8px; /** Medium blur - standard glass morphism effect */
  --blur-lg: 12px; /** Large blur - strong frosted glass effect */
  --blur-xl: 16px; /** Extra large blur - heavy glassmorphism for modals */
  --blur-2xl: 24px; /** 2X large blur - maximum frosted effect for backgrounds */
  --blur-3xl: 32px; /** 3X large blur - ultra heavy blur for special effects */
  --dimensions-min-touch-target: 44px; /** Minimum touch target size for WCAG AAA compliance (44x44px) */
  --dimensions-icon-size-xs: 12px; /** Extra small icon size for inline indicators */
  --dimensions-icon-size-sm: 16px; /** Small icon size for buttons and inputs */
  --dimensions-icon-size-md: 20px; /** Medium icon size - default for most uses */
  --dimensions-icon-size-lg: 24px; /** Large icon size for primary actions */
  --dimensions-icon-size-xl: 32px; /** Extra large icon size for feature icons */
  --dimensions-icon-size-2xl: 48px; /** 2X large icon size for illustrations */
  --dimensions-icon-size-3xl: 64px; /** 3X large icon size for hero sections */
  --dimensions-button-height-xs: 24px; /** Extra small button height for compact UIs */
  --dimensions-button-height-sm: 32px; /** Small button height for secondary actions */
  --dimensions-button-height-md: 40px; /** Medium button height - default size */
  --dimensions-button-height-lg: 48px; /** Large button height for primary CTAs */
  --dimensions-button-height-xl: 56px; /** Extra large button height for hero sections */
  --dimensions-input-height-sm: 32px; /** Small input height for compact forms */
  --dimensions-input-height-md: 40px; /** Medium input height - standard form fields */
  --dimensions-input-height-lg: 48px; /** Large input height for prominent forms */
  --dimensions-avatar-size-xs: 24px; /** Extra small avatar for inline mentions */
  --dimensions-avatar-size-sm: 32px; /** Small avatar for lists and comments */
  --dimensions-avatar-size-md: 40px; /** Medium avatar - default size */
  --dimensions-avatar-size-lg: 48px; /** Large avatar for profile cards */
  --dimensions-avatar-size-xl: 64px; /** Extra large avatar for user profiles */
  --dimensions-avatar-size-2xl: 96px; /** 2X large avatar for profile headers */
  --dimensions-avatar-size-3xl: 128px; /** 3X large avatar for account pages */
  --dimensions-container-max-width-xs: 480px; /** Extra small container for mobile-first layouts */
  --dimensions-container-max-width-sm: 640px; /** Small container for narrow content */
  --dimensions-container-max-width-md: 768px; /** Medium container for tablet views */
  --dimensions-container-max-width-lg: 1024px; /** Large container for desktop content */
  --dimensions-container-max-width-xl: 1280px; /** Extra large container for wide screens */
  --dimensions-container-max-width-2xl: 1536px; /** 2X large container for full HD displays */
  --dimensions-border-width-thin: 1px; /** Thin border for subtle divisions */
  --dimensions-border-width-medium: 2px; /** Medium border for emphasis */
  --dimensions-border-width-thick: 4px; /** Thick border for strong emphasis */
  --dimensions-border-width-heavy: 8px; /** Heavy border for decorative purposes */
  --dimensions-focus-ring-width: 2px; /** Standard focus ring width for accessibility */
  --dimensions-focus-ring-offset: 2px; /** Offset between element and focus ring */
  --dimensions-radius-xs: 4px; /** Extra small radius for subtle rounding */
  --dimensions-radius-sm: 6px; /** Small radius for buttons and inputs */
  --dimensions-radius-md: 8px; /** Medium radius - default for cards */
  --dimensions-radius-lg: 12px; /** Large radius for modals and dropdowns */
  --dimensions-radius-xl: 16px; /** Extra large radius for prominent cards */
  --dimensions-radius-2xl: 24px; /** 2X large radius for hero sections */
  --dimensions-radius-full: 9999px; /** Full radius for circular elements */
  --elevation-0: none; /** No elevation - flat elements with no shadow */
  --elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /** Minimal elevation - subtle lift for cards and buttons */
  --elevation-2: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); /** Low elevation - raised elements like cards */
  --elevation-3: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /** Medium elevation - dropdowns and floating elements */
  --elevation-4: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /** High elevation - popovers and tooltips */
  --elevation-5: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /** Higher elevation - modals and drawers */
  --elevation-6: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /** Maximum elevation - special focus states and hero elements */
  --elevation-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); /** Inner shadow - recessed elements and input fields */
  --elevation-glow: 0 0 20px rgba(59, 130, 246, 0.5); /** Glow effect - focus states and interactive highlights */
  --elevation-dark-mode-1: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05); /** Dark mode minimal elevation with subtle border */
  --elevation-dark-mode-2: 0 2px 4px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05); /** Dark mode low elevation */
  --elevation-dark-mode-3: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05); /** Dark mode medium elevation */
  --elevation-dark-mode-4: 0 8px 16px 0 rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05); /** Dark mode high elevation */
  --grid-columns: 12; /** Standard 12-column grid system for flexible layouts */
  --grid-columns-wide: 16; /** Wide 16-column grid for complex dashboard layouts */
  --grid-gap-0: 0; /** No gap - flush grid items */
  --grid-gap-xs: 4px; /** Extra small gap - tight grid layouts */
  --grid-gap-sm: 8px; /** Small gap - compact grids */
  --grid-gap-sm-plus: 12px; /** Small plus gap - form-heavy layouts */
  --grid-gap-md: 16px; /** Medium gap - standard grid spacing */
  --grid-gap-lg: 24px; /** Large gap - spacious layouts */
  --grid-gap-xl: 32px; /** Extra large gap - card grids */
  --grid-gap-2xl: 48px; /** 2X large gap - feature sections */
  --grid-gap-3xl: 64px; /** 3X large gap - hero grid sections */
  --grid-container-padding-mobile: 16px; /** Container padding for mobile devices */
  --grid-container-padding-tablet: 24px; /** Container padding for tablet devices */
  --grid-container-padding-desktop: 32px; /** Container padding for desktop screens */
  --grid-container-padding-wide: 48px; /** Container padding for wide displays */
  --grid-container-padding-ultrawide: 64px; /** Container padding for ultra-wide monitors */
  --grid-breakpoints-xs: 480px; /** Extra small breakpoint - mobile portrait */
  --grid-breakpoints-sm: 640px; /** Small breakpoint - mobile landscape */
  --grid-breakpoints-md: 768px; /** Medium breakpoint - tablet portrait */
  --grid-breakpoints-lg: 1024px; /** Large breakpoint - tablet landscape / small desktop */
  --grid-breakpoints-xl: 1280px; /** Extra large breakpoint - standard desktop */
  --grid-breakpoints-2xl: 1536px; /** 2X large breakpoint - large desktop */
  --grid-breakpoints-3xl: 1920px; /** 3X large breakpoint - full HD displays */
  --grid-breakpoints-4xl: 2560px; /** 4X large breakpoint - 2K and 4K displays */
  --grid-aspect-ratio-square: 1 / 1; /** Square aspect ratio */
  --grid-aspect-ratio-video: 16 / 9; /** Standard video aspect ratio */
  --grid-aspect-ratio-portrait: 3 / 4; /** Portrait aspect ratio */
  --grid-aspect-ratio-landscape: 4 / 3; /** Landscape aspect ratio */
  --grid-aspect-ratio-wide: 21 / 9; /** Ultra-wide aspect ratio */
  --grid-aspect-ratio-golden: 1.618 / 1; /** Golden ratio for aesthetic layouts */
  --grid-max-width-prose: 65ch; /** Maximum width for readable prose content */
  --grid-max-width-narrow: 480px; /** Narrow content width */
  --grid-max-width-content: 768px; /** Standard content width */
  --grid-max-width-wide: 1024px; /** Wide content width */
  --grid-max-width-container: 1280px; /** Standard container width */
  --grid-max-width-full: 100%; /** Full width container */
  --grid-sidebar-width-collapsed: 64px; /** Collapsed sidebar width for icon-only navigation */
  --grid-sidebar-width-narrow: 200px; /** Narrow sidebar for minimal navigation */
  --grid-sidebar-width-standard: 240px; /** Standard sidebar width */
  --grid-sidebar-width-wide: 280px; /** Wide sidebar for complex navigation */
  --grid-sidebar-width-expanded: 320px; /** Expanded sidebar for detailed content */
  --grid-header-height-mobile: 56px; /** Mobile header height */
  --grid-header-height-desktop: 64px; /** Desktop header height */
  --grid-header-height-large: 80px; /** Large header height for prominent navigation */
  --opacity-0: 0; /** Fully transparent - 0% opacity for invisible elements */
  --opacity-5: 0.05; /** 5% opacity - barely visible overlay for subtle effects */
  --opacity-10: 0.1; /** 10% opacity - very light overlay for backgrounds */
  --opacity-20: 0.2; /** 20% opacity - light overlay maintaining WCAG AA contrast */
  --opacity-25: 0.25; /** 25% opacity - quarter strength for overlays */
  --opacity-30: 0.3; /** 30% opacity - light medium overlay */
  --opacity-38: 0.38; /** 38% opacity - disabled text standard for WCAG AA compliance */
  --opacity-40: 0.4; /** 40% opacity - medium overlay for scrims */
  --opacity-50: 0.5; /** 50% opacity - half strength for balanced overlays */
  --opacity-60: 0.6; /** 60% opacity - medium high for readable overlays */
  --opacity-64: 0.64; /** 64% opacity - disabled element standard maintaining WCAG AA */
  --opacity-70: 0.7; /** 70% opacity - high opacity for strong overlays */
  --opacity-75: 0.75; /** 75% opacity - three quarter strength */
  --opacity-80: 0.8; /** 80% opacity - very high for near-opaque elements */
  --opacity-90: 0.9; /** 90% opacity - nearly opaque with slight transparency */
  --opacity-95: 0.95; /** 95% opacity - minimal transparency for subtle effects */
  --opacity-100: 1; /** 100% opacity - fully opaque, no transparency */
  --spacing-0: 0; /** No spacing - used for removing default margins/paddings */
  --spacing-1: 4px; /** Minimal spacing - 0.5x base unit for tight layouts */
  --spacing-2: 8px; /** Base spacing unit - fundamental grid atom */
  --spacing-3: 12px; /** 1.5x base - common for form fields and small gaps */
  --spacing-4: 16px; /** 2x base - standard component padding */
  --spacing-5: 20px; /** 2.5x base - medium content spacing */
  --spacing-6: 24px; /** 3x base - section padding and large gaps */
  --spacing-7: 28px; /** 3.5x base - specialized spacing for cards */
  --spacing-8: 32px; /** 4x base - major section separation */
  --spacing-9: 36px; /** 4.5x base - hero section spacing */
  --spacing-10: 40px; /** 5x base - large component spacing */
  --spacing-11: 44px; /** 5.5x base - specialized large spacing */
  --spacing-12: 48px; /** 6x base - extra large section gaps */
  --spacing-14: 56px; /** 7x base - page section dividers */
  --spacing-16: 64px; /** 8x base - major layout sections */
  --spacing-20: 80px; /** 10x base - hero and banner spacing */
  --spacing-24: 96px; /** 12x base - extra large layout spacing */
  --spacing-28: 112px; /** 14x base - specialized hero spacing */
  --spacing-32: 128px; /** 16x base - maximum spacing unit */
  --spacing-36: 144px; /** 18x base - ultra spacing for special cases */
  --spacing-40: 160px; /** 20x base - landing page sections */
  --spacing-44: 176px; /** 22x base - specialized ultra spacing */
  --spacing-48: 192px; /** 24x base - maximum hero spacing */
  --spacing-52: 208px; /** 26x base - specialized maximum spacing */
  --spacing-56: 224px; /** 28x base - extra maximum spacing */
  --spacing-60: 240px; /** 30x base - ultra maximum spacing */
  --spacing-64: 256px; /** 32x base - absolute maximum spacing */
  --states-focus-ring-color: #3b82f6; /** Focus ring color - blue with 3:1 minimum contrast */
  --states-focus-ring-width: 2px; /** Focus ring width for visibility */
  --states-focus-ring-offset: 2px; /** Space between element and focus ring */
  --states-focus-ring-style: solid; /** Focus ring style - solid for better visibility */
  --states-hover-opacity: 0.8; /** Hover state opacity for interactive elements */
  --states-hover-transform: scale(1.02); /** Subtle scale transform on hover */
  --states-hover-duration: 200ms; /** Hover transition duration */
  --states-active-opacity: 0.7; /** Active/pressed state opacity */
  --states-active-transform: scale(0.98); /** Scale down on active/press */
  --states-disabled-opacity: 0.38; /** Disabled state opacity - WCAG AA compliant */
  --states-disabled-cursor: not-allowed; /** Cursor style for disabled elements */
  --states-loading-opacity: 0.64; /** Loading state opacity */
  --states-loading-animation: pulse; /** Loading animation type */
  --states-loading-duration: 1500ms; /** Loading animation duration */
  --states-selected-border-width: 2px; /** Selected state border width */
  --states-selected-background-color: rgba(59, 130, 246, 0.1); /** Selected state background tint */
  --states-error-border-color: #ef4444; /** Error state border color */
  --states-error-background-color: #fee2e2; /** Error state background */
  --states-error-text-color: #991b1b; /** Error state text color */
  --states-success-border-color: #10b981; /** Success state border color */
  --states-success-background-color: #d1fae5; /** Success state background */
  --states-success-text-color: #064e3b; /** Success state text color */
  --states-warning-border-color: #f59e0b; /** Warning state border color */
  --states-warning-background-color: #fef3c7; /** Warning state background */
  --states-warning-text-color: #78350f; /** Warning state text color */
  --states-info-border-color: #3b82f6; /** Info state border color */
  --states-info-background-color: #dbeafe; /** Info state background */
  --states-info-text-color: #1e3a8a; /** Info state text color */
  --states-readonly-opacity: 0.8; /** Readonly state opacity */
  --states-readonly-background-color: #f9fafb; /** Readonly field background */
  --states-readonly-cursor: default; /** Readonly cursor style */
  --states-dragging-opacity: 0.5; /** Element opacity while dragging */
  --states-dragging-cursor: grabbing; /** Cursor while dragging */
  --states-drag-over-background-color: rgba(59, 130, 246, 0.1); /** Drop zone highlight color */
  --states-drag-over-border-style: dashed; /** Drop zone border style */
  --typography-font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); /** Extra small text - 12px to 14px fluid scale for captions and labels */
  --typography-font-size-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem); /** Small text - 14px to 16px fluid scale for secondary text */
  --typography-font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /** Base text - 16px to 18px fluid scale for body content */
  --typography-font-size-md: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem); /** Medium text - 18px to 20px fluid scale for lead paragraphs */
  --typography-font-size-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); /** Large text - 20px to 24px fluid scale for section titles */
  --typography-font-size-xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem); /** Extra large text - 24px to 30px fluid scale for H3 headings */
  --typography-font-size-2xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.25rem); /** 2X large text - 30px to 36px fluid scale for H2 headings */
  --typography-font-size-3xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem); /** 3X large text - 36px to 48px fluid scale for H1 headings */
  --typography-font-size-4xl: clamp(3rem, 2.5rem + 2.5vw, 3.75rem); /** 4X large text - 48px to 60px fluid scale for hero titles */
  --typography-font-size-5xl: clamp(3.75rem, 3rem + 3.75vw, 4.5rem); /** 5X large text - 60px to 72px fluid scale for display headings */
  --typography-font-size-6xl: clamp(4.5rem, 3.5rem + 5vw, 6rem); /** 6X large text - 72px to 96px fluid scale for landing hero text */
  --typography-font-size-7xl: clamp(6rem, 4.5rem + 7.5vw, 8rem); /** 7X large text - 96px to 128px fluid scale for maximum impact display */
  --typography-line-height: 1.5; /** Standard line height */
  --typography-font-weight-thin: 100; /** Thin font weight - ultra light text */
  --typography-font-weight-extralight: 200; /** Extra light font weight */
  --typography-font-weight-light: 300; /** Light font weight - subtle emphasis */
  --typography-font-weight-normal: 400; /** Normal font weight - body text default */
  --typography-font-weight-medium: 500; /** Medium font weight - slight emphasis */
  --typography-font-weight-semibold: 600; /** Semibold font weight - moderate emphasis */
  --typography-font-weight-bold: 700; /** Bold font weight - strong emphasis */
  --typography-font-weight-extrabold: 800; /** Extra bold font weight - maximum emphasis */
  --typography-font-weight-black: 900; /** Black font weight - ultra bold */
  --typography-letter-spacing-tighter: -0.05em; /** Tighter letter spacing for display text */
  --typography-letter-spacing-tight: -0.025em; /** Tight letter spacing for headings */
  --typography-letter-spacing-normal: 0; /** Normal letter spacing - default */
  --typography-letter-spacing-wide: 0.025em; /** Wide letter spacing for readability */
  --typography-letter-spacing-wider: 0.05em; /** Wider letter spacing for emphasis */
  --typography-letter-spacing-widest: 0.1em; /** Widest letter spacing for special cases */
  --typography-font-family: 'IBM Plex Sans'; /** Kiegyensúlyozott, neutrális betűtípus */
  --z-index-base: 0; /** Base layer - default stacking context for page content */
  --z-index-sticky: 50; /** Sticky elements - headers, footers, and sticky positioned elements */
  --z-index-dropdown: 100; /** Dropdown menus and select options */
  --z-index-popover: 400; /** Popovers and context menus */
  --z-index-scrim: 600; /** Overlay scrim for modals and drawers */
  --z-index-drawer: 650; /** Side drawers and slide-out panels */
  --z-index-modal: 700; /** Modal dialogs and full-screen overlays */
  --z-index-toast: 800; /** Toast notifications and snackbars */
  --z-index-tooltip: 900; /** Tooltips and hover hints - highest UI layer */
  --z-index-maximum: 9999; /** Maximum z-index for emergency overlays and dev tools */
  --border-width-thin: 1px; /** Thin border width */
  --border-width-medium: 2px; /** Standard border width */
  --border-width-thick: 3px; /** Thick border width for emphasis */
  --border-width-heavy: 4px; /** Heavy border width for strong emphasis */
  --border-radius-none: 0; /** No border radius - sharp corners */
  --border-radius-round: 50%; /** Fully rounded corners */
  --border-style-solid: solid; /** Solid border style */
  --border-style-dashed: dashed; /** Dashed border style */
  --border-style-dotted: dotted; /** Dotted border style */
  --border-style-none: none; /** No border */
  --focus-ring-width-medium: 2px; /** Standard focus ring width */
  --focus-ring-width-thick: 3px; /** Thick focus ring width for emphasis */
  --focus-ring-offset-small: 1px; /** Small offset from element */
  --focus-ring-offset-medium: 2px; /** Medium offset from element */
  --focus-ring-offset-large: 4px; /** Large offset from element */
  --focus-ring-style-solid: solid; /** Solid focus ring */
  --focus-ring-style-dashed: dashed; /** Dashed focus ring */
  --focus-ring-style-dotted: dotted; /** Dotted focus ring */
  --indicator-badge-text-default: #ffffff; /** Badge text color */
  --overlay-backdrop-light: rgba(255, 255, 255, 0.9); /** Light backdrop for dark themes */
  --overlay-backdrop-dark: rgba(0, 0, 0, 0.75); /** Dark backdrop for emphasis */
  --overlay-backdrop-blur: rgba(255, 255, 255, 0.2); /** Backdrop for blur effects */
  --overlay-scrim-medium: rgba(0, 0, 0, 0.4); /** Medium scrim overlay */
  --overlay-scrim-strong: rgba(0, 0, 0, 0.6); /** Strong scrim overlay */
  --text-typography-weight-regular: 400; /** Regular font weight */
  --text-typography-weight-medium: 500; /** Medium font weight */
  --text-typography-weight-bold: 700; /** Bold font weight */
  --button-padding: 12px 20px; /** Internal spacing for button content */
  --button-font-size: 14px; /** Text size using typography scale sm */
  --card-padding: 16px; /** Internal spacing for card content */
  --input-padding: 10px 16px; /** Internal spacing for input content */
  --input-font-size: 14px; /** Font size for input text using sm scale */
  --modal-overlay: rgba(0, 0, 0, 0.3); /** Semi-transparent overlay background behind modal */
  --modal-z-index: 400; /** Stacking order for modal layer */
  --colors-background: #f2f5f7; /** Meleg Kék - Primary background color (60%) */
  --colors-surface: #fffdf5; /** Meleg Fehér - Surface color for cards and panels (60%) */
  --colors-text: #323d49; /** Tengerészkék - Primary text color (30%, Contrast: 11:1) */
  --colors-text-muted: #6a7887; /** Kékes Szürke - Muted text color (30%, Contrast: 4.52:1) */
  --colors-border: #7791a6; /** Acélkék - Border color (30%, Contrast: 3.00:1) */
  --colors-ui-element: #5576a0; /** Óceánkék - UI element color (10%, Contrast: 4.68:1) */
  --colors-ui-hover: #2c5b87; /** Mély Kék - UI hover state color (10%, Contrast: 7.09:1) */
  --colors-action: #d43d2e; /** Tengeri Piros - Action color for CTAs (+1, Contrast: 4.6:1) */
  --motion-duration: 200ms; /** Alapértelmezett animáció időtartam */
  --motion-easing: ease-in-out; /** Alapértelmezett átmenet típus */
  --motion-character: balanced; /** Kiegyensúlyozott animáció karakter */
  --radius-sm: 4px; /** Kis lekerekítés */
  --radius-md: 6px; /** Közepes lekerekítés */
  --radius-lg: 8px; /** Nagy lekerekítés */
  --radius-pill: 999px; /** Teljes lekerekítés (kapszula forma) */
  --shadows-color: #647c8b; /** Középtónusú kékes-szürke árnyék szín */
  --shadows-xs: 0px 1px 3px rgba(100, 124, 139, 0.12); /** Minimális árnyék */
  --shadows-sm: 0px 2px 6px rgba(100, 124, 139, 0.16); /** Kis árnyék */
  --shadows-md: 0px 4px 12px rgba(100, 124, 139, 0.24); /** Közepes árnyék (alapértelmezett) */
  --shadows-lg: 0px 8px 24px rgba(100, 124, 139, 0.32); /** Nagy árnyék */
  --shadows-xl: 0px 16px 48px rgba(100, 124, 139, 0.40); /** Extra nagy árnyék */
  --shadows-character: soft-foggy-maritime; /** Puhább, enyhén ködös, tengeri atmoszféra */
  --surface-background: #fafbfc; /** Light mode background - soft white to reduce glare */
  --surface-primary: #ffffff; /** Primary surface for cards and panels */
  --surface-secondary: #f4f5f7; /** Secondary surface with slight tint */
  --surface-tertiary: #e9ebef; /** Tertiary surface for nested content */
  --surface-elevated: #ffffff; /** Elevated surface for modals and popovers */
  --text-primary: #1a202c; /** Primary text - high contrast for readability */
  --text-secondary: #4a5568; /** Secondary text - meets WCAG AA */
  --text-muted: #718096; /** Muted text for less important content */
  --text-disabled: rgba(26, 32, 44, 0.38); /** Disabled text with WCAG compliant opacity */
  --border-subtle: #e2e8f0; /** Subtle border for decorative divisions */
  --border-default: #cbd5e0; /** Default border for inputs and cards */
  --border-strong: #a0aec0; /** Strong border for emphasis */
  --focus-outline: #3b82f6; /** Focus outline color - blue for visibility */
  --focus-outline-width: 2px; /** Focus outline width */
  --focus-outline-offset: 2px; /** Space between element and focus outline */
  --overlay-backdrop: rgba(0, 0, 0, 0.4); /** Modal backdrop overlay */
  --overlay-scrim: rgba(0, 0, 0, 0.5); /** Drawer scrim overlay */
  --interactive-hover: rgba(0, 0, 0, 0.05); /** Hover state overlay */
  --interactive-pressed: rgba(0, 0, 0, 0.1); /** Pressed state overlay */
  --elevation-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); /** Standard elevation shadow */
  --status-error: #ef4444; /** Error state color */
  --status-warning: #f59e0b; /** Warning state color */
  --status-success: #10b981; /** Success state color */
  --status-info: #3b82f6; /** Info state color */
  --scrollbar-thumb: #cbd5e0; /** Scrollbar thumb color */
  --link-visited: #7c3aed; /** Visited link color for light mode */
  --code-background: #f3f4f6; /** Code background for light mode */
  --divider: #e5e7eb; /** Divider color for light mode */
  --border-color-default: var(--colors-border); /** Default border color from theme */
  --border-color-subtle: var(--border-subtle); /** Subtle border color from profile */
  --border-color-strong: var(--border-strong); /** Strong border color from profile */
  --border-color-interactive: var(--colors-ui-element); /** Interactive element border color from theme */
  --border-color-focus: var(--colors-ui-element); /** Focus state border color from theme */
  --border-color-hover: var(--colors-ui-hover); /** Hover state border color from theme */
  --border-color-disabled: var(--colors-text-muted); /** Disabled state border color from theme */
  --border-radius-small: var(--radius-sm); /** Small border radius from theme */
  --border-radius-medium: var(--radius-md); /** Medium border radius from theme */
  --border-radius-large: var(--radius-lg); /** Large border radius from theme */
  --border-radius-pill: var(--radius-pill); /** Pill border radius from theme */
  --border-status-success: var(--status-success); /** Success status border color from profile */
  --border-status-warning: var(--status-warning); /** Warning status border color from profile */
  --border-status-error: var(--status-error); /** Error status border color from profile */
  --border-status-info: var(--status-info); /** Info status border color from profile */
  --border-divider-default: var(--colors-border); /** Default divider color from theme */
  --border-divider-light: var(--border-subtle); /** Light divider - using border-subtle */
  --focus-ring-color-default: var(--colors-ui-element); /** Default focus ring color from theme */
  --focus-ring-color-inverse: var(--text-primary); /** Focus ring color on dark backgrounds from profile */
  --focus-ring-color-error: var(--status-error); /** Focus ring for error states from profile */
  --focus-ring-color-success: var(--status-success); /** Focus ring for success states from profile */
  --focus-ring-width-thin: var(--focus-outline-width); /** Thin focus ring width from profile */
  --focus-ring-offset-default: var(--focus-outline-offset); /** Default offset from element from profile */
  --focus-outline-color: var(--focus-outline); /** Focus outline color from profile */
  --focus-outline-width: var(--focus-outline-width); /** Focus outline width from profile */
  --focus-outline-offset: var(--focus-outline-offset); /** Focus outline offset from profile */
  --indicator-status-success-color: var(--status-success); /** Success status indicator color from profile */
  --indicator-status-success-background: var(--status-success); /** Success background color from profile */
  --indicator-status-success-border: var(--status-success); /** Success border color from profile */
  --indicator-status-success-icon: var(--status-success); /** Success icon color from profile */
  --indicator-status-warning-color: var(--status-warning); /** Warning status indicator color from profile */
  --indicator-status-warning-background: var(--status-warning); /** Warning background color from profile */
  --indicator-status-warning-border: var(--status-warning); /** Warning border color from profile */
  --indicator-status-warning-icon: var(--status-warning); /** Warning icon color from profile */
  --indicator-status-error-color: var(--status-error); /** Error status indicator color from profile */
  --indicator-status-error-background: var(--status-error); /** Error background color from profile */
  --indicator-status-error-border: var(--status-error); /** Error border color from profile */
  --indicator-status-error-icon: var(--status-error); /** Error icon color from profile */
  --indicator-status-info-color: var(--status-info); /** Info status indicator color from profile */
  --indicator-status-info-background: var(--status-info); /** Info background color from profile */
  --indicator-status-info-border: var(--status-info); /** Info border color from profile */
  --indicator-status-info-icon: var(--status-info); /** Info icon color from profile */
  --indicator-badge-background-default: var(--colors-ui-element); /** Default badge background from theme */
  --indicator-badge-background-accent: var(--colors-action); /** Accent badge background from theme */
  --indicator-progress-background: var(--surface-tertiary); /** Progress bar background from profile */
  --indicator-progress-fill: var(--colors-ui-element); /** Progress bar fill color from theme */
  --indicator-notification-dot: var(--colors-action); /** Notification dot color from theme */
  --overlay-backdrop-default: var(--overlay-backdrop); /** Default modal backdrop overlay from profile */
  --overlay-scrim-subtle: var(--overlay-scrim); /** Subtle scrim overlay from profile */
  --overlay-modal-background: var(--surface-elevated); /** Modal background from profile */
  --overlay-modal-shadow: var(--shadows-xl); /** Modal shadow from theme */
  --overlay-modal-radius: var(--radius-lg); /** Modal border radius from theme */
  --overlay-popover-background: var(--surface-elevated); /** Popover background from profile */
  --overlay-popover-shadow: var(--shadows-lg); /** Popover shadow from theme */
  --overlay-popover-radius: var(--radius-md); /** Popover border radius from theme */
  --overlay-tooltip-background: var(--colors-text); /** Tooltip background from theme */
  --overlay-tooltip-text: var(--colors-background); /** Tooltip text color from theme */
  --overlay-tooltip-shadow: var(--shadows-md); /** Tooltip shadow from theme */
  --overlay-tooltip-radius: var(--radius-sm); /** Tooltip border radius from theme */
  --overlay-sheet-background: var(--surface-primary); /** Bottom sheet background from profile */
  --overlay-sheet-handle: var(--border-default); /** Sheet drag handle color from profile */
  --overlay-sheet-radius: var(--radius-pill); /** Sheet top corners radius from theme */
  --overlay-loading-spinner: var(--colors-ui-element); /** Loading spinner color from theme */
  --overlay-loading-background: var(--overlay-backdrop); /** Loading overlay background from profile */
  --surface-background-primary: var(--colors-background); /** Primary background color from theme */
  --surface-background-secondary: var(--surface-background); /** Secondary background from profile overrides */
  --surface-background-elevated: var(--surface-elevated); /** Elevated surface for modals and popovers from profile */
  --surface-panel-default: var(--colors-surface); /** Default panel surface color from theme */
  --surface-panel-primary: var(--surface-primary); /** Primary panel surface from profile */
  --surface-panel-secondary: var(--surface-secondary); /** Secondary panel surface from profile */
  --surface-panel-tertiary: var(--surface-tertiary); /** Tertiary nested content surface from profile */
  --surface-card-background: var(--colors-surface); /** Card background color from theme */
  --surface-card-hover: var(--colors-ui-hover); /** Card hover state background from theme */
  --surface-card-selected: var(--colors-ui-element); /** Card selected state background from theme */
  --surface-overlay-backdrop: var(--overlay-backdrop); /** Modal backdrop overlay from profile */
  --surface-overlay-scrim: var(--overlay-scrim); /** Light scrim overlay from profile */
  --surface-interactive-default: var(--colors-ui-element); /** Default interactive surface color from theme */
  --surface-interactive-hover: var(--colors-ui-hover); /** Interactive surface hover state from theme */
  --text-color-primary: var(--colors-text); /** Primary text color from theme */
  --text-color-secondary: var(--colors-text-muted); /** Secondary/muted text color from theme */
  --text-color-tertiary: var(--text-secondary); /** Tertiary text color from profile */
  --text-color-disabled: var(--text-muted); /** Disabled text color from profile */
  --text-color-inverse: var(--colors-text); /** Inverse text color from profile */
  --text-color-placeholder: var(--colors-text-muted); /** Placeholder text color */
  --text-link-default: var(--colors-ui-element); /** Default link color from theme */
  --text-link-hover: var(--colors-ui-hover); /** Link hover color from theme */
  --text-link-visited: var(--colors-ui-hover); /** Visited link color - using ui-hover as fallback */
  --text-heading-primary: var(--colors-text); /** Primary heading color from theme */
  --text-heading-secondary: var(--text-secondary); /** Secondary heading color from profile */
  --text-heading-accent: var(--colors-ui-element); /** Accent heading color from theme */
  --text-code-inline: var(--colors-action); /** Inline code text color from theme */
  --text-code-block: var(--text-primary); /** Code block text color from profile */
  --text-code-background: var(--surface-secondary); /** Code block background - using surface-secondary */
  --text-code-comment: var(--colors-text-muted); /** Code comment color from theme */
  --text-code-keyword: var(--colors-ui-element); /** Code keyword highlighting from theme */
  --text-status-success: var(--status-success); /** Success status text from profile */
  --text-status-warning: var(--status-warning); /** Warning status text from profile */
  --text-status-error: var(--status-error); /** Error status text from profile */
  --text-status-info: var(--status-info); /** Info status text from profile */
  --text-typography-family-base: var(--typography-font-family); /** Base font family from theme */
  --text-typography-size-base: var(--typography-font-size-base); /** Base font size from theme */
  --text-typography-size-xs: var(--typography-font-size-xs); /** Extra small font size from theme */
  --text-typography-size-sm: var(--typography-font-size-sm); /** Small font size from theme */
  --text-typography-size-md: var(--typography-font-size-md); /** Medium font size from theme */
  --text-typography-size-lg: var(--typography-font-size-lg); /** Large font size from theme */
  --text-typography-size-xl: var(--typography-font-size-xl); /** Extra large font size from theme */
  --text-typography-size-2xl: var(--typography-font-size-2xl); /** 2X large font size from theme */
  --text-typography-size-3xl: var(--typography-font-size-3xl); /** 3X large font size from theme */
  --text-typography-size-4xl: var(--typography-font-size-4xl); /** 4X large font size from theme */
  --text-typography-size-5xl: var(--typography-font-size-5xl); /** 5X large font size from theme */
  --text-typography-line-height-base: var(--typography-line-height); /** Base line height from theme */
  --button-background: var(--colors-ui-element); /** Default background color for button component */
  --button-background-hover: var(--colors-ui-hover); /** Background color when button is hovered */
  --button-text: var(--colors-text); /** Primary text color for button labels */
  --button-text-muted: var(--colors-text-muted); /** Secondary text color for disabled or muted button states */
  --button-border-radius: var(--radius-md); /** Corner radius for button shape */
  --button-font-family: var(--typography-font-family); /** Font family inherited from theme typography */
  --button-motion: var(--motion-duration); /** Animation duration for button transitions */
  --card-background: var(--colors-surface); /** Background color for card component surface */
  --card-border: var(--colors-border); /** Border color for card component outline */
  --card-border-radius: var(--radius-md); /** Corner radius for card component shape */
  --card-shadow: var(--shadows-md); /** Box shadow effect for card elevation */
  --card-header-text: var(--colors-text); /** Text color for card header content */
  --card-body-text: var(--colors-text-muted); /** Text color for card body content */
  --input-background: var(--colors-surface); /** Background color for input field */
  --input-text: var(--colors-text); /** Text color for input value */
  --input-placeholder-text: var(--colors-text-muted); /** Text color for input placeholder */
  --input-border: var(--colors-border); /** Border color for input field */
  --input-border-radius: var(--radius-sm); /** Corner radius for input field */
  --input-motion-focus: var(--motion-duration); /** Animation duration for focus state transition */
  --modal-background: var(--colors-surface); /** Background color for modal content area */
  --modal-border-radius: var(--radius-lg); /** Corner radius for modal container */
  --modal-shadow: var(--shadows-xl); /** Drop shadow for modal elevation */
  --modal-header-text: var(--colors-text); /** Text color for modal header content */
  --modal-body-text: var(--colors-text-muted); /** Text color for modal body content */
  --modal-motion-open: var(--motion-duration); /** Animation duration for modal open transition */
}