:root {
  /* Apple Liquid Glass Design System */
  /* Core Colors - WCAG AAA Compliant */
  --primary-black: #1a1a1a; /* Enhanced from #1d1d1f for better contrast */
  --primary-hover: #404040;
  --foreground-text: #212121; /* WCAG AAA compliant (15.3:1 on white) */
  --secondary-text: #424242; /* WCAG AAA compliant (10.9:1 on white) */
  --heading-color: #0d0d0d; /* Maximum contrast (18.1:1 on white) */
  
  /* Background Elements - Liquid Glass */
  --gradient-background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  --liquid-overlay: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.8) 0%, transparent 50%),
                    radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.6) 0%, transparent 50%),
                    linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  --glass-background: rgba(255, 255, 255, 0.18);
  --glass-border: rgba(255, 255, 255, 0.2);
  --card-background: rgba(255, 255, 255, 0.7);
  --input-background: rgba(255, 255, 255, 0.8);
  --readonly-input-background: rgba(255, 255, 255, 0.5);
  
  /* Accent Colors - WCAG Compliant Apple Blue */
  --ai-accent-gradient: linear-gradient(135deg, #0066CC, #004499);
  --ai-accent-hover: linear-gradient(135deg, #004499, #003366);
  --ai-icon-blue: #0066CC; /* Better contrast than #007AFF */
  --loading-spinner-blue: #0066CC;
  
  /* Shadows & Borders - Liquid Glass Effects */
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  --button-shadow: 0 4px 16px rgba(0, 122, 255, 0.2);
  --button-hover-shadow: 0 8px 24px rgba(0, 122, 255, 0.3);
  --border-color: rgba(255, 255, 255, 0.2);
  --subtle-border: rgba(255, 255, 255, 0.15);
  
  /* Legacy Variables - kept for backward compatibility */
  --background: var(--card-background);
  --foreground: var(--foreground-text);
  --muted: var(--secondary-text);
  --border: var(--border-color);
  --highlight: var(--ai-icon-blue);
  --highlight-hover: #307ae0;
  --light-bg: #f5f5f5;
  --danger: #c62828; /* WCAG AAA (7.1:1) */
  --success: #2e7d32; /* WCAG AAA (7.0:1) */
  --warning: #e65100; /* WCAG AA (4.6:1) */
  --disabled: #bdc3c7;
  
  /* Platform Colors */
  --google-color: #4285F4;
  --booking-color: #003580;
  --tripadvisor-color: #00af87;
  --holidaycheck-color: #0058a3;
  --expedia-color: #ffcc00;
  
  /* UI Elements - iOS Style Radii */
  --radius: 20px;
  --radius-sm: 12px; 
  --radius-lg: 28px;
  --radius-pill: 50px;
  
  /* Enhanced Radius System for Reviews Module */
  --radius-xs: 4px;
  --radius-md: 16px;
  --radius-xl: 32px;
  --border-radius: var(--radius); /* Alias for compatibility */
  
  /* Unified Transition System */
  --transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --transition-fast: all 0.15s ease;
  --transition-normal: all 0.3s ease;
  --transition-slow: all 0.5s ease;
  
  /* Unified Color Aliases for Compatibility */
  --primary-color: var(--primary-black);
  --secondary-color: var(--ai-icon-blue);
  --dark-color: var(--primary-black);
  --light-color: #ecf0f1;
  
  /* Ultra-Compact Spacing System - Much denser layout */
  --space-xs: 0.125rem;  /* 2px - was 4px */
  --space-sm: 0.375rem;  /* 6px - was 8px */
  --space-md: 0.625rem;  /* 10px - was 12px */
  --space-lg: 0.875rem;  /* 14px - was 16px */
  --space-xl: 1.25rem;   /* 20px - was 24px */
  --space-2xl: 1.75rem;  /* 28px - was 32px */

  /* Density modes */
  --density-compact: 0.75;
  --density-normal: 1;
  --density-comfortable: 1.25;

  /* Computed spacing with density (for advanced usage) */
  --space-xs-computed: calc(var(--space-xs) * var(--density-normal));
  --space-sm-computed: calc(var(--space-sm) * var(--density-normal));
  --space-md-computed: calc(var(--space-md) * var(--density-normal));
  --space-lg-computed: calc(var(--space-lg) * var(--density-normal));
  --space-xl-computed: calc(var(--space-xl) * var(--density-normal));
  --space-2xl-computed: calc(var(--space-2xl) * var(--density-normal));
  
  /* Input & Form Variables */
  --input-bg: var(--input-background);
  --card-bg: var(--card-background);
  
  /* Responsive Breakpoints */
  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1280px;
  --bp-nav-mobile: 1400px; /* Navbar collapse point */
  
  /* Navigation Tokens */
  --nav-gap: 1rem;
  --nav-gap-compact: 0.75rem;
  --nav-link-padding: 0.625rem 1rem;
  --nav-link-padding-compact: 0.5rem 0.75rem;
  --nav-link-font-size: 0.875rem;
  --nav-link-font-size-compact: 0.8125rem;
  
  /* Typography */
  --font-sans: "Neue Haas Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-alt: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* =============================================================================
     SEMANTIC TEXT STYLE SYSTEM (LGS-014) - Dynamic Type Support
     Provides hierarchical text styles optimized for translucent surfaces
     ============================================================================= */

  /* Dynamic Type Scale - Base scaling factor for responsive text */
  --text-scale-factor: 1.0; /* Adjustable via JavaScript for Dynamic Type simulation */
  --text-scale-min: 0.8;
  --text-scale-max: 2.0;
  
  /* Semantic Text Style Hierarchy - Following Apple Design Guidelines */
  /* Large Title - 34px base, for major headings */
  --text-large-title-size: calc(2.125rem * var(--text-scale-factor)); /* 34px */
  --text-large-title-weight: 700;
  --text-large-title-line-height: 1.2;
  --text-large-title-letter-spacing: -0.5px;
  
  /* Title 1 - 28px base, for primary section titles */
  --text-title1-size: calc(1.75rem * var(--text-scale-factor)); /* 28px */
  --text-title1-weight: 700;
  --text-title1-line-height: 1.25;
  --text-title1-letter-spacing: -0.3px;
  
  /* Title 2 - 22px base, for secondary section titles */
  --text-title2-size: calc(1.375rem * var(--text-scale-factor)); /* 22px */
  --text-title2-weight: 600;
  --text-title2-line-height: 1.3;
  --text-title2-letter-spacing: -0.2px;
  
  /* Title 3 - 20px base, for subsection titles */
  --text-title3-size: calc(1.25rem * var(--text-scale-factor)); /* 20px */
  --text-title3-weight: 600;
  --text-title3-line-height: 1.35;
  --text-title3-letter-spacing: -0.1px;
  
  /* Headline - 17px base, for emphasized content */
  --text-headline-size: calc(1.0625rem * var(--text-scale-factor)); /* 17px */
  --text-headline-weight: 600;
  --text-headline-line-height: 1.4;
  --text-headline-letter-spacing: 0px;
  
  /* Body - 17px base, for main content text */
  --text-body-size: calc(1.0625rem * var(--text-scale-factor)); /* 17px */
  --text-body-weight: 400;
  --text-body-line-height: 1.5;
  --text-body-letter-spacing: 0px;
  
  /* Callout - 16px base, for highlighted information */
  --text-callout-size: calc(1rem * var(--text-scale-factor)); /* 16px */
  --text-callout-weight: 400;
  --text-callout-line-height: 1.45;
  --text-callout-letter-spacing: 0px;
  
  /* Subheadline - 15px base, for supporting text */
  --text-subheadline-size: calc(0.9375rem * var(--text-scale-factor)); /* 15px */
  --text-subheadline-weight: 400;
  --text-subheadline-line-height: 1.4;
  --text-subheadline-letter-spacing: 0px;
  
  /* Footnote - 13px base, for additional details */
  --text-footnote-size: calc(0.8125rem * var(--text-scale-factor)); /* 13px */
  --text-footnote-weight: 400;
  --text-footnote-line-height: 1.35;
  --text-footnote-letter-spacing: 0px;
  
  /* Caption 1 - 12px base, for image captions */
  --text-caption1-size: calc(0.75rem * var(--text-scale-factor)); /* 12px */
  --text-caption1-weight: 400;
  --text-caption1-line-height: 1.3;
  --text-caption1-letter-spacing: 0px;
  
  /* Caption 2 - 11px base, for minor details */
  --text-caption2-size: calc(0.6875rem * var(--text-scale-factor)); /* 11px */
  --text-caption2-weight: 400;
  --text-caption2-line-height: 1.25;
  --text-caption2-letter-spacing: 0px;

  /* Glass-Specific Text Styles - Optimized for translucent surfaces */
  /* Glass Title - Optimized for glass materials with enhanced weight */
  --text-glass-title-weight: 700; /* Escalated for glass backgrounds */
  --text-glass-title-color: var(--color-glass-primary);
  
  /* Glass Body - Body text optimized for glass backgrounds */
  --text-glass-body-weight: 500; /* Enhanced from 400 for better legibility */
  --text-glass-body-color: var(--color-glass-primary);
  
  /* Glass Caption - Small text with enhanced readability on glass */
  --text-glass-caption-weight: 600; /* Significantly enhanced for small size */
  --text-glass-caption-color: var(--color-glass-secondary);

  /* Material-Aware Font Weight Escalation */
  --font-weight-escalation-ultra-thin: 300; /* Additional weight for ultra-thin material */
  --font-weight-escalation-thin: 200; /* Additional weight for thin material */
  --font-weight-escalation-regular: 100; /* Additional weight for regular material */
  --font-weight-escalation-thick: 0; /* No escalation for thick material */
  --font-weight-escalation-ultra-thick: 0; /* No escalation for ultra-thick material */

  /* =============================================================================
     LIQUID GLASS MATERIAL SYSTEM - Six Material Types (LGS-001)
     Built on existing glass variables to avoid duplication
     ============================================================================= */
  
  /* Ultra Thin Material - Minimal translucency */
  --material-ultra-thin-bg: rgba(255, 255, 255, 0.12);
  --material-ultra-thin-blur: 8px;
  --material-ultra-thin-saturate: 160%;
  --material-ultra-thin-border: rgba(255, 255, 255, 0.15);
  --material-ultra-thin-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  
  /* Thin Material - Reuses existing glass-background */
  --material-thin-bg: var(--glass-background); /* rgba(255, 255, 255, 0.18) */
  --material-thin-blur: 12px;
  --material-thin-saturate: 170%;
  --material-thin-border: var(--glass-border); /* rgba(255, 255, 255, 0.2) */
  --material-thin-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  
  /* Regular Material - Standard glass effect */
  --material-regular-bg: rgba(255, 255, 255, 0.25);
  --material-regular-blur: 20px; /* Reuses existing 20px blur pattern */
  --material-regular-saturate: 180%; /* Reuses existing 180% saturation */
  --material-regular-border: rgba(255, 255, 255, 0.25);
  --material-regular-shadow: var(--glass-shadow); /* 0 8px 32px rgba(0, 0, 0, 0.1) */
  
  /* Thick Material - Heavy translucency */
  --material-thick-bg: rgba(255, 255, 255, 0.35);
  --material-thick-blur: 30px; /* Reuses existing 30px blur pattern */
  --material-thick-saturate: 180%;
  --material-thick-border: rgba(255, 255, 255, 0.3);
  --material-thick-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  
  /* Ultra Thick Material - Maximum translucency */
  --material-ultra-thick-bg: rgba(255, 255, 255, 0.45);
  --material-ultra-thick-blur: 40px;
  --material-ultra-thick-saturate: 190%;
  --material-ultra-thick-border: rgba(255, 255, 255, 0.35);
  --material-ultra-thick-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
  
  /* Bar Material - Reuses existing card-background for UI bars */
  --material-bar-bg: var(--card-background); /* rgba(255, 255, 255, 0.7) */
  --material-bar-blur: 20px;
  --material-bar-saturate: 180%;
  --material-bar-border: rgba(255, 255, 255, 0.4);
  --material-bar-shadow: var(--card-shadow); /* 0 4px 24px rgba(0, 0, 0, 0.08) */

  /* Material Property Maps for JavaScript Integration */
  --material-ultra-thin-opacity: 0.12;
  --material-thin-opacity: 0.18;
  --material-regular-opacity: 0.25;
  --material-thick-opacity: 0.35;
  --material-ultra-thick-opacity: 0.45;
  --material-bar-opacity: 0.7;

  /* Material Specular Highlight Overlays - LGS-004 */
  /* Built on existing --liquid-overlay pattern, scaled by material highlight strength */
  --material-ultra-thin-highlight: radial-gradient(circle at var(--highlight-x, 30%) var(--highlight-y, 20%), rgba(255, 255, 255, 0.2) 0%, transparent 50%),
                                   radial-gradient(circle at var(--highlight-x2, 70%) var(--highlight-y2, 80%), rgba(255, 255, 255, 0.15) 0%, transparent 50%),
                                   linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.0125) 100%);
  
  --material-thin-highlight: radial-gradient(circle at var(--highlight-x, 30%) var(--highlight-y, 20%), rgba(255, 255, 255, 0.28) 0%, transparent 50%),
                             radial-gradient(circle at var(--highlight-x2, 70%) var(--highlight-y2, 80%), rgba(255, 255, 255, 0.21) 0%, transparent 50%),
                             linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.0175) 100%);
  
  --material-regular-highlight: radial-gradient(circle at var(--highlight-x, 30%) var(--highlight-y, 20%), rgba(255, 255, 255, 0.4) 0%, transparent 50%),
                                radial-gradient(circle at var(--highlight-x2, 70%) var(--highlight-y2, 80%), rgba(255, 255, 255, 0.3) 0%, transparent 50%),
                                linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.025) 100%);
  
  --material-thick-highlight: radial-gradient(circle at var(--highlight-x, 30%) var(--highlight-y, 20%), rgba(255, 255, 255, 0.52) 0%, transparent 50%),
                              radial-gradient(circle at var(--highlight-x2, 70%) var(--highlight-y2, 80%), rgba(255, 255, 255, 0.39) 0%, transparent 50%),
                              linear-gradient(135deg, rgba(255, 255, 255, 0.065) 0%, rgba(255, 255, 255, 0.0325) 100%);
  
  --material-ultra-thick-highlight: radial-gradient(circle at var(--highlight-x, 30%) var(--highlight-y, 20%), rgba(255, 255, 255, 0.64) 0%, transparent 50%),
                                    radial-gradient(circle at var(--highlight-x2, 70%) var(--highlight-y2, 80%), rgba(255, 255, 255, 0.48) 0%, transparent 50%),
                                    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  
  --material-bar-highlight: radial-gradient(circle at var(--highlight-x, 30%) var(--highlight-y, 20%), rgba(255, 255, 255, 0.32) 0%, transparent 50%),
                            radial-gradient(circle at var(--highlight-x2, 70%) var(--highlight-y2, 80%), rgba(255, 255, 255, 0.24) 0%, transparent 50%),
                            linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);

  /* Default highlight position variables for motion-responsive system */
  --highlight-x: 30%;
  --highlight-y: 20%;
  --highlight-x2: 70%;
  --highlight-y2: 80%;

  /* Material Surface Texture Variables - LGS-005 */
  /* Procedural texture intensity scaled by material thickness */
  --material-ultra-thin-texture-intensity: 0.08;
  --material-ultra-thin-texture-scale: 2.0;
  --material-ultra-thin-noise-octaves: 2;
  
  --material-thin-texture-intensity: 0.12;
  --material-thin-texture-scale: 1.8;
  --material-thin-noise-octaves: 2;
  
  --material-regular-texture-intensity: 0.18;
  --material-regular-texture-scale: 1.5;
  --material-regular-noise-octaves: 3;
  
  --material-thick-texture-intensity: 0.25;
  --material-thick-texture-scale: 1.2;
  --material-thick-noise-octaves: 3;
  
  --material-ultra-thick-texture-intensity: 0.35;
  --material-ultra-thick-texture-scale: 1.0;
  --material-ultra-thick-noise-octaves: 4;
  
  --material-bar-texture-intensity: 0.15;
  --material-bar-texture-scale: 1.6;
  --material-bar-noise-octaves: 2;

  /* Texture caching and performance variables */
  --texture-cache-size: 256;
  --texture-memory-limit: 16;

  /* =============================================================================
     SEMANTIC COLOR SYSTEM - LGS-008
     iOS-style semantic colors with automatic light/dark mode variants
     Built on existing color variables to avoid duplication
     Features material thickness-aware contrast and asset catalog integration
     ============================================================================= */
  
  /* Primary Content Colors (text hierarchy) - Light Mode Defaults */
  --color-label: var(--foreground-text);           /* #1d1d1f - highest contrast text */
  --color-secondary-label: var(--secondary-text);  /* #86868b - medium contrast text */
  --color-tertiary-label: rgba(29, 29, 31, 0.65);  /* Lower contrast text */
  --color-quaternary-label: rgba(29, 29, 31, 0.35); /* Disabled/placeholder text */
  
  /* Fill Colors (background hierarchy) - Light Mode Defaults */
  --color-system-fill: var(--card-background);          /* rgba(255,255,255,0.7) - primary backgrounds */
  --color-secondary-system-fill: rgba(255,255,255,0.5); /* Secondary backgrounds */
  --color-tertiary-system-fill: rgba(255,255,255,0.3);  /* Minimal backgrounds */
  --color-quaternary-system-fill: rgba(255,255,255,0.15); /* Barely visible backgrounds */
  
  /* Glass-Specific Semantic Colors - Light Mode */
  --color-glass-primary: rgba(0, 0, 0, 0.85);    /* High contrast text on glass surfaces */
  --color-glass-secondary: rgba(0, 0, 0, 0.65);  /* Medium contrast text on glass */
  --color-glass-tertiary: rgba(0, 0, 0, 0.45);   /* Lower contrast text on glass */
  
  /* Brand Colors with Semantic Naming - Light Mode */
  --color-brand-primary: var(--ai-icon-blue);    /* #007AFF - existing brand primary */
  --color-brand-secondary: var(--primary-black); /* #1d1d1f - existing brand secondary */
  --color-brand-accent: var(--ai-accent-gradient); /* Existing gradient accent */
  
  /* Interactive Element Colors - Light Mode */
  --color-link: var(--ai-icon-blue);           /* Link color - reuse existing */
  --color-link-hover: var(--highlight-hover);  /* Link hover - reuse existing */
  --color-button-primary: var(--ai-accent-gradient); /* Primary button background */
  --color-button-secondary: var(--glass-background); /* Secondary button background */
  
  /* Status Colors - Light Mode */
  --color-success: var(--success);   /* #2ecc71 - existing success color */
  --color-warning: var(--warning);   /* #f39c12 - existing warning color */
  --color-danger: var(--danger);     /* #e74c3c - existing danger color */
  --color-disabled: var(--disabled); /* #bdc3c7 - existing disabled color */
  
  /* Platform Colors - Semantic Mapping */
  --color-platform-google: var(--google-color);
  --color-platform-booking: var(--booking-color);
  --color-platform-tripadvisor: var(--tripadvisor-color);
  --color-platform-holidaycheck: var(--holidaycheck-color);
  --color-platform-expedia: var(--expedia-color);

  /* =============================================================================
     ELEVATED SURFACE COLOR SYSTEM - LGS-011
     Creates depth perception through strategic color elevation
     Light mode uses shadow-based elevation, dark mode uses color elevation
     ============================================================================= */

  /* Light Mode Elevation - Shadow-Based Depth Strategy */
  --surface-level-0: var(--card-background);           /* Base surface - reuse existing */
  --surface-level-1: var(--card-background);           /* Card surfaces - standard */
  --surface-level-2: rgba(255, 255, 255, 0.8);         /* Modal backgrounds - higher opacity */
  --surface-level-3: rgba(255, 255, 255, 0.9);         /* Elevated modals - maximum opacity */
  --surface-level-4: rgba(255, 255, 255, 0.95);        /* Floating elements - near opaque */
  --surface-level-5: rgba(255, 255, 255, 0.98);        /* System UI - highest opacity */

  /* Light Mode Elevation Shadows - Progressive Shadow Intensity */
  --elevation-shadow-0: none;                                                /* Base - no shadow */
  --elevation-shadow-1: var(--card-shadow);                                 /* Card - existing shadow */
  --elevation-shadow-2: 0 8px 32px rgba(0, 0, 0, 0.12);                   /* Modal - medium shadow */
  --elevation-shadow-3: 0 16px 48px rgba(0, 0, 0, 0.16);                  /* Elevated - strong shadow */
  --elevation-shadow-4: 0 24px 64px rgba(0, 0, 0, 0.20);                  /* Floating - stronger shadow */
  --elevation-shadow-5: 0 32px 80px rgba(0, 0, 0, 0.24);                  /* System UI - strongest shadow */

  /* Material Type to Elevation Level Mapping */
  --material-ultra-thin-elevation: var(--surface-level-0);
  --material-thin-elevation: var(--surface-level-1);
  --material-regular-elevation: var(--surface-level-2);
  --material-thick-elevation: var(--surface-level-3);
  --material-ultra-thick-elevation: var(--surface-level-4);
  --material-bar-elevation: var(--surface-level-5);

  /* Material Type to Elevation Shadow Mapping */
  --material-ultra-thin-elevation-shadow: var(--elevation-shadow-0);
  --material-thin-elevation-shadow: var(--elevation-shadow-1);
  --material-regular-elevation-shadow: var(--elevation-shadow-2);
  --material-thick-elevation-shadow: var(--elevation-shadow-3);
  --material-ultra-thick-elevation-shadow: var(--elevation-shadow-4);
  --material-bar-elevation-shadow: var(--elevation-shadow-5);

  /* Elevation Transition Properties */
  --elevation-transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                         background-color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* =============================================================================
     GRADIENT SYSTEM CONFIGURATION - LGS-012
     CSS variables for gradient system with color banding mitigation
     Supports hardware-accelerated gradient rendering and semantic integration
     ============================================================================= */

  /* Gradient System Configuration */
  --gradient-resolution: 256;                /* Dithering resolution for banding mitigation */
  --gradient-dithering: enabled;             /* Enable/disable color banding mitigation */
  --gradient-hardware-accel: enabled;        /* Hardware acceleration preference */
  --gradient-color-space: lab;               /* Default color space (srgb, lab, lch) */
  --gradient-cache-size: 100;                /* Maximum gradient cache size */

  /* Dynamic Gradient Variables - Generated by LiquidGlassGradientSystem */
  --lg-gradient-primary: var(--ai-accent-gradient);           /* Primary brand gradient */
  --lg-gradient-secondary: var(--gradient-background);        /* Secondary background gradient */
  --lg-gradient-accent: var(--ai-accent-gradient);            /* Accent gradient for highlights */

  /* Semantic Gradient Presets - Integrates with LGS-008 semantic colors */
  --lg-gradient-brand-primary: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%);
  --lg-gradient-brand-accent: linear-gradient(45deg, var(--color-brand-primary) 0%, var(--color-link) 100%);
  --lg-gradient-glass-highlight: linear-gradient(135deg, var(--color-glass-primary) 0%, var(--color-glass-secondary) 50%, var(--color-glass-tertiary) 100%);
  --lg-gradient-elevation-depth: radial-gradient(ellipse at 30% 20%, var(--surface-level-0) 0%, var(--surface-level-2) 50%, var(--surface-level-4) 100%);

  /* Material Background Gradients - Adaptive to material thickness */
  --lg-gradient-material-background: radial-gradient(ellipse at center, var(--color-system-fill) 0%, var(--color-secondary-system-fill) 100%);
  --lg-gradient-material-ultra-thin: radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  --lg-gradient-material-thin: radial-gradient(circle at center, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.08) 100%);
  --lg-gradient-material-regular: radial-gradient(circle at center, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.12) 100%);
  --lg-gradient-material-thick: radial-gradient(circle at center, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.18) 100%);
  --lg-gradient-material-ultra-thick: radial-gradient(circle at center, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.24) 100%);
  --lg-gradient-material-bar: radial-gradient(circle at center, rgba(255, 255, 255, 0.56) 0%, rgba(255, 255, 255, 0.42) 100%);

  /* Hardware Acceleration CSS Variables */
  --gradient-hardware-transform: translateZ(0);               /* GPU layer forcing */
  --gradient-hardware-will-change: background, background-image; /* Performance hint */
  --gradient-hardware-backface: hidden;                      /* Reduce repaints */
  --gradient-hardware-contain: layout style paint;           /* CSS containment */

  /* Gradient Transition Properties */
  --gradient-transition: background 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                        background-image 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* =============================================================================
   DARK MODE ADAPTIVE COLORS - LGS-008 - COMMENTED OUT
   Automatic appearance adaptation using prefers-color-scheme
   ============================================================================= */

/* 
@media (prefers-color-scheme: dark) {
  :root {
    /* Core text colors with WCAG AA compliance for dark mode */
    --heading-color: #f7fafc;    /* Light heading for dark mode (14.7:1 contrast) */
    --secondary-text: #a0aec0;   /* Light secondary text for dark mode (5.2:1 contrast) */
    --foreground-text: #e2e8f0;  /* Light text for dark mode (7.4:1 contrast) */
    
    /* Invert primary content colors for dark mode */
    --color-label: #ffffff;                        /* Pure white for highest contrast */
    --color-secondary-label: #ababab;              /* Light gray for secondary text */
    --color-tertiary-label: rgba(255, 255, 255, 0.65);  /* Lower contrast white */
    --color-quaternary-label: rgba(255, 255, 255, 0.35); /* Disabled white text */
    
    /* Dark mode background hierarchy */
    --color-system-fill: rgba(0, 0, 0, 0.7);       /* Dark primary backgrounds */
    --color-secondary-system-fill: rgba(0, 0, 0, 0.5);   /* Dark secondary backgrounds */
    --color-tertiary-system-fill: rgba(0, 0, 0, 0.3);    /* Dark minimal backgrounds */
    --color-quaternary-system-fill: rgba(0, 0, 0, 0.15); /* Dark barely visible backgrounds */
    
    /* Glass colors for dark backgrounds */
    --color-glass-primary: rgba(255, 255, 255, 0.85);   /* High contrast white on dark glass */
    --color-glass-secondary: rgba(255, 255, 255, 0.65); /* Medium contrast white on dark glass */
    --color-glass-tertiary: rgba(255, 255, 255, 0.45);  /* Lower contrast white on dark glass */
    
    /* Brand colors - dark mode variants */
    --color-brand-primary: #0A84FF;    /* Brighter blue for dark backgrounds */
    --color-brand-secondary: #ffffff;  /* White text for dark mode */
    --color-brand-accent: linear-gradient(135deg, #0A84FF, #0056CC); /* Adjusted gradient */
    
    /* Interactive elements - dark mode */
    --color-link: #0A84FF;             /* Brighter link color for dark backgrounds */
    --color-link-hover: #307ae0;       /* Link hover for dark mode */
    --color-button-primary: linear-gradient(135deg, #0A84FF, #0056CC);
    --color-button-secondary: rgba(255, 255, 255, 0.1); /* Light secondary button on dark */
    
    /* Update gradient background for dark mode */
    --gradient-background: linear-gradient(135deg, #1a1a1a 0%, #2d2d30 100%);
    --liquid-overlay: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                      radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
                      linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%);

    /* =============================================================================
       DARK MODE ELEVATED SURFACE COLORS - LGS-011
       6-level elevation scale for depth perception in dark mode
       ============================================================================= */

    /* Dark Mode Elevation Scale - Color-Based Depth Strategy */
    --surface-level-0: #000000;  /* Base surface - pure black background */
    --surface-level-1: #1c1c1e;  /* Card surfaces - subtle gray */
    --surface-level-2: #2c2c2e;  /* Modal backgrounds - medium gray */
    --surface-level-3: #3a3a3c;  /* Elevated modals - lighter gray */
    --surface-level-4: #48484a;  /* Floating elements - mid-light gray */
    --surface-level-5: #636366;  /* System UI - highest elevation gray */

    /* Dark Mode Elevation Shadows - Reduced intensity for dark backgrounds */
    --elevation-shadow-0: none;                                                /* Base - no shadow */
    --elevation-shadow-1: 0 4px 24px rgba(0, 0, 0, 0.4);                     /* Card - subtle shadow */
    --elevation-shadow-2: 0 8px 32px rgba(0, 0, 0, 0.5);                     /* Modal - medium shadow */
    --elevation-shadow-3: 0 16px 48px rgba(0, 0, 0, 0.6);                    /* Elevated - strong shadow */
    --elevation-shadow-4: 0 24px 64px rgba(0, 0, 0, 0.7);                    /* Floating - stronger shadow */
    --elevation-shadow-5: 0 32px 80px rgba(0, 0, 0, 0.8);                    /* System UI - strongest shadow */

    /* Update Material-Elevation Mapping for Dark Mode */
    --material-ultra-thin-elevation: var(--surface-level-0);
    --material-thin-elevation: var(--surface-level-1);
    --material-regular-elevation: var(--surface-level-2);
    --material-thick-elevation: var(--surface-level-3);
    --material-ultra-thick-elevation: var(--surface-level-4);
    --material-bar-elevation: var(--surface-level-5);

    /* Update Material Shadow Mapping for Dark Mode */
    --material-ultra-thin-elevation-shadow: var(--elevation-shadow-0);
    --material-thin-elevation-shadow: var(--elevation-shadow-1);
    --material-regular-elevation-shadow: var(--elevation-shadow-2);
    --material-thick-elevation-shadow: var(--elevation-shadow-3);
    --material-ultra-thick-elevation-shadow: var(--elevation-shadow-4);
    --material-bar-elevation-shadow: var(--elevation-shadow-5);

    /* =============================================================================
       DARK MODE GRADIENT ADAPTATIONS - LGS-012
       Gradient system adaptations for dark appearance mode
       ============================================================================= */

    /* Update Semantic Gradient Presets for Dark Mode */
    --lg-gradient-brand-primary: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%);
    --lg-gradient-brand-accent: linear-gradient(45deg, var(--color-brand-primary) 0%, var(--color-link) 100%);
    --lg-gradient-glass-highlight: linear-gradient(135deg, var(--color-glass-primary) 0%, var(--color-glass-secondary) 50%, var(--color-glass-tertiary) 100%);
    --lg-gradient-elevation-depth: radial-gradient(ellipse at 30% 20%, var(--surface-level-0) 0%, var(--surface-level-2) 50%, var(--surface-level-4) 100%);

    /* Dark Mode Material Background Gradients - Lower opacity for dark backgrounds */
    --lg-gradient-material-background: radial-gradient(ellipse at center, var(--color-system-fill) 0%, var(--color-secondary-system-fill) 100%);
    --lg-gradient-material-ultra-thin: radial-gradient(circle at center, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    --lg-gradient-material-thin: radial-gradient(circle at center, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
    --lg-gradient-material-regular: radial-gradient(circle at center, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);
    --lg-gradient-material-thick: radial-gradient(circle at center, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.12) 100%);
    --lg-gradient-material-ultra-thick: radial-gradient(circle at center, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.16) 100%);
    --lg-gradient-material-bar: radial-gradient(circle at center, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.32) 100%);
  }
}
*/

/* =============================================================================
   REFRACTION/DISTORTION CSS SYSTEM - LGS-003
   CSS-based refraction effects using displacement mapping
   ============================================================================= */

/* Refraction base class */
.liquid-glass-refraction {
  position: relative;
  overflow: hidden;
  --refraction-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: var(--refraction-transition);
}

/* Refraction overlay for background distortion effect */
.liquid-glass-refraction::before {
  content: '';
  position: absolute;
  top: calc(var(--refraction-y, 0px) * -1);
  left: calc(var(--refraction-x, 0px) * -1);
  width: calc(100% + var(--distortion-radius, 4px) * 2);
  height: calc(100% + var(--distortion-radius, 4px) * 2);
  background: inherit;
  filter: blur(calc(var(--distortion-radius, 4px) * 0.5));
  transform: 
    scale(var(--refraction-scale, 1.1)) 
    translateZ(0); /* Force hardware acceleration */
  opacity: var(--refraction-intensity, 0.25);
  z-index: -1;
  pointer-events: none;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Enhanced refraction with displacement mapping */
.liquid-glass-refraction[data-refraction-active="true"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--displacement-map);
  background-size: var(--displacement-map-size, 256px 256px);
  background-repeat: repeat;
  transform: translateZ(0);
  mix-blend-mode: overlay;
  opacity: calc(var(--refraction-intensity, 0.25) * 0.3);
  z-index: 1;
  pointer-events: none;
  will-change: opacity, transform;
}

/* Performance optimizations for refraction */
.liquid-glass-refraction[data-refraction-paused="true"]::before,
.liquid-glass-refraction[data-refraction-paused="true"]::after {
  animation-play-state: paused;
  will-change: auto;
}

/* Material-specific refraction intensity scaling */
.liquid-glass-refraction[data-refraction-type="ultra-thin"]::before {
  opacity: calc(var(--refraction-intensity) * 0.5);
}

.liquid-glass-refraction[data-refraction-type="thin"]::before {
  opacity: calc(var(--refraction-intensity) * 0.7);
}

.liquid-glass-refraction[data-refraction-type="regular"]::before {
  opacity: var(--refraction-intensity);
}

.liquid-glass-refraction[data-refraction-type="thick"]::before {
  opacity: calc(var(--refraction-intensity) * 1.2);
}

.liquid-glass-refraction[data-refraction-type="ultra-thick"]::before {
  opacity: calc(var(--refraction-intensity) * 1.5);
}

.liquid-glass-refraction[data-refraction-type="bar"]::before {
  opacity: calc(var(--refraction-intensity) * 0.8);
}

/* Accessibility - Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .liquid-glass-refraction {
    --refraction-transition: none;
  }
  
  .liquid-glass-refraction::before,
  .liquid-glass-refraction::after {
    transition: none;
    animation: none;
  }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  .liquid-glass-refraction::before {
    opacity: calc(var(--refraction-intensity) * 1.5);
  }
}

/* Print styles - hide refraction effects */
@media print {
  .liquid-glass-refraction::before,
  .liquid-glass-refraction::after {
    display: none;
  }
}

/* CSS Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: var(--gradient-background);
  background-attachment: fixed;
  color: var(--foreground-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden; /* Keep hidden for page layout */
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gradient-background);
  z-index: -2;
}

body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--liquid-overlay);
  z-index: -1;
  pointer-events: none;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

h1 {
  font-size: 2rem; /* 32px */
}

h2 {
  font-size: 1.5rem; /* 24px */
}

h3 {
  font-size: 1.25rem; /* 20px */
}

h4 {
  font-size: 1.125rem; /* 18px */
}

h5 {
  font-size: 1rem; /* 16px */
}

h6 {
  font-size: 0.875rem; /* 14px */
}

p {
  margin-bottom: 1rem;
}

/* =============================================================================
   SEMANTIC TEXT STYLE CLASSES (LGS-014)
   Provides utility classes for semantic text hierarchy
   ============================================================================= */

/* Semantic Text Style Classes */
.text-large-title {
  font-size: var(--text-large-title-size);
  font-weight: var(--text-large-title-weight);
  line-height: var(--text-large-title-line-height);
  letter-spacing: var(--text-large-title-letter-spacing);
  font-family: var(--font-sans);
}

.text-title1 {
  font-size: var(--text-title1-size);
  font-weight: var(--text-title1-weight);
  line-height: var(--text-title1-line-height);
  letter-spacing: var(--text-title1-letter-spacing);
  font-family: var(--font-sans);
}

.text-title2 {
  font-size: var(--text-title2-size);
  font-weight: var(--text-title2-weight);
  line-height: var(--text-title2-line-height);
  letter-spacing: var(--text-title2-letter-spacing);
  font-family: var(--font-sans);
}

.text-title3 {
  font-size: var(--text-title3-size);
  font-weight: var(--text-title3-weight);
  line-height: var(--text-title3-line-height);
  letter-spacing: var(--text-title3-letter-spacing);
  font-family: var(--font-sans);
}

.text-headline {
  font-size: var(--text-headline-size);
  font-weight: var(--text-headline-weight);
  line-height: var(--text-headline-line-height);
  letter-spacing: var(--text-headline-letter-spacing);
  font-family: var(--font-sans);
}

.text-body {
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-line-height);
  letter-spacing: var(--text-body-letter-spacing);
  font-family: var(--font-sans);
}

.text-callout {
  font-size: var(--text-callout-size);
  font-weight: var(--text-callout-weight);
  line-height: var(--text-callout-line-height);
  letter-spacing: var(--text-callout-letter-spacing);
  font-family: var(--font-sans);
}

.text-subheadline {
  font-size: var(--text-subheadline-size);
  font-weight: var(--text-subheadline-weight);
  line-height: var(--text-subheadline-line-height);
  letter-spacing: var(--text-subheadline-letter-spacing);
  font-family: var(--font-sans);
}

.text-footnote {
  font-size: var(--text-footnote-size);
  font-weight: var(--text-footnote-weight);
  line-height: var(--text-footnote-line-height);
  letter-spacing: var(--text-footnote-letter-spacing);
  font-family: var(--font-sans);
}

.text-caption1 {
  font-size: var(--text-caption1-size);
  font-weight: var(--text-caption1-weight);
  line-height: var(--text-caption1-line-height);
  letter-spacing: var(--text-caption1-letter-spacing);
  font-family: var(--font-sans);
}

.text-caption2 {
  font-size: var(--text-caption2-size);
  font-weight: var(--text-caption2-weight);
  line-height: var(--text-caption2-line-height);
  letter-spacing: var(--text-caption2-letter-spacing);
  font-family: var(--font-sans);
}

/* Glass-Specific Text Style Classes */
.text-glass-title {
  font-weight: var(--text-glass-title-weight);
  color: var(--text-glass-title-color);
}

.text-glass-body {
  font-weight: var(--text-glass-body-weight);
  color: var(--text-glass-body-color);
}

.text-glass-caption {
  font-weight: var(--text-glass-caption-weight);
  color: var(--text-glass-caption-color);
}

/* Responsive Text Scaling for Accessibility */
@media (prefers-reduced-motion: no-preference) {
  .text-large-title, .text-title1, .text-title2, .text-title3,
  .text-headline, .text-body, .text-callout, .text-subheadline,
  .text-footnote, .text-caption1, .text-caption2 {
    transition: font-size 0.2s ease, font-weight 0.2s ease;
  }
}

/* Accessibility: Honor user font size preferences */
@media (prefers-contrast: high) {
  .text-glass-title, .text-glass-body, .text-glass-caption {
    font-weight: 700; /* Increase weight for high contrast */
    color: var(--color-label); /* Use highest contrast color */
  }
}

/* Reduced transparency mode support */
@media (prefers-reduced-transparency: reduce) {
  .text-glass-title, .text-glass-body, .text-glass-caption {
    font-weight: var(--text-body-weight); /* Restore normal weights */
    color: var(--color-label); /* Use solid background colors */
  }
}

a {
  color: var(--ai-icon-blue);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--ai-accent-hover);
  text-decoration: underline;
}

/* Common Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes shine {
  from { transform: translate(-100%, -100%) rotate(25deg); opacity: 0; }
  50% { opacity: 1; }
  to { transform: translate(100%, 100%) rotate(25deg); opacity: 0; }
}

/* Common Layout Elements - Remove duplicate, use layout.css version */

/* =============================================================================
   LIQUID GLASS MATERIAL UTILITY CLASSES - DRY Implementation
   Modular classes that can be applied to any element for glass effects
   ============================================================================= */

/* Material Type Utility Classes - Reuse existing CSS variables (DRY principle) */
.material-ultra-thin {
  /* background: var(--material-ultra-thin-bg); */
  /* backdrop-filter: blur(var(--material-ultra-thin-blur)) saturate(var(--material-ultra-thin-saturate)); */
  -webkit-backdrop-filter: blur(var(--material-ultra-thin-blur)) saturate(var(--material-ultra-thin-saturate));
  /* border: 1px solid var(--material-ultra-thin-border); */
  /* box-shadow: var(--material-ultra-thin-shadow); */
}

.material-thin {
  /* background: var(--material-thin-bg); */
  /* backdrop-filter: blur(var(--material-thin-blur)) saturate(var(--material-thin-saturate)); */
  -webkit-backdrop-filter: blur(var(--material-thin-blur)) saturate(var(--material-thin-saturate));
  /* border: 1px solid var(--material-thin-border); */
  /* box-shadow: var(--material-thin-shadow); */
}

.material-regular {
  /* background: var(--material-regular-bg); */
  /* backdrop-filter: blur(var(--material-regular-blur)) saturate(var(--material-regular-saturate)); */
  -webkit-backdrop-filter: blur(var(--material-regular-blur)) saturate(var(--material-regular-saturate));
  /* border: 1px solid var(--material-regular-border); */
  /* box-shadow: var(--material-regular-shadow); */
}

.material-thick {
  /* background: var(--material-thick-bg); */
  /* backdrop-filter: blur(var(--material-thick-blur)) saturate(var(--material-thick-saturate)); */
  -webkit-backdrop-filter: blur(var(--material-thick-blur)) saturate(var(--material-thick-saturate));
  /* border: 1px solid var(--material-thick-border); */
  /* box-shadow: var(--material-thick-shadow); */
}

.material-ultra-thick {
  /* background: var(--material-ultra-thick-bg); */
  /* backdrop-filter: blur(var(--material-ultra-thick-blur)) saturate(var(--material-ultra-thick-saturate)); */
  -webkit-backdrop-filter: blur(var(--material-ultra-thick-blur)) saturate(var(--material-ultra-thick-saturate));
  /* border: 1px solid var(--material-ultra-thick-border); */
  /* box-shadow: var(--material-ultra-thick-shadow); */
}

.material-bar {
  /* background: var(--material-bar-bg); */
  /* backdrop-filter: blur(var(--material-bar-blur)) saturate(var(--material-bar-saturate)); */
  -webkit-backdrop-filter: blur(var(--material-bar-blur)) saturate(var(--material-bar-saturate));
  /* border: 1px solid var(--material-bar-border); */
  /* box-shadow: var(--material-bar-shadow); */
}

/* Material with Highlights (Optional Enhancement) */
.material-with-highlights {
  position: relative;
  overflow: hidden;
}

.material-with-highlights::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--material-regular-highlight);
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
}

/* Common Utility Classes */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.5rem; }
.mb-6 { margin-bottom: 2rem; }
.mb-8 { margin-bottom: 3rem; }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.5rem; }
.mt-6 { margin-top: 2rem; }

.mx-auto { margin-left: auto; margin-right: auto; }

.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 2rem; padding-bottom: 2rem; }
.py-8 { padding-top: 3rem; padding-bottom: 3rem; }

.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 2rem; padding-right: 2rem; }

.w-100 { width: 100%; }
.h-100 { height: 100%; }

.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }

.position-relative { position: relative; }
.position-absolute { position: absolute; }

.hidden { display: none; }
.visible { display: block; }

.monospace {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9em;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
  .container {
    padding: 0 1.25rem;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 1.25rem;
  }
  
  h1 {
    font-size: 1.75rem;
  }
  
  h2 {
    font-size: 1.375rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 1rem;
  }
  
  body {
    padding: 0 8px;
  }
}