/**
 * Liquid Glass Design System
 * Apple Inc Inspired Liquid Glass Framework
 */

:root {
    /* Color Tokens - Liquid Glass Spec */
    --lg-bg-light: 255, 255, 255;
    --lg-bg-dark: 20, 22, 25;
    --lg-text-light: #141619;
    --lg-text-dark: #EEF0F5;
    
    /* Glass Properties - Enhanced for Liquid Glass */
    --lg-blur-light: 24px;
    --lg-blur-dark: 28px;
    --lg-blur-modal: 32px;
    --lg-blur-nav: 18px;
    --lg-alpha: 0.12;
    --lg-stroke-alpha: 0.3;
    --lg-inner-alpha: 0.2;
    
    /* Effects - Liquid Glass Enhancement */
    --lg-saturate: 1.08;
    --lg-contrast: 1.04;
    --lg-highlight-light: rgba(255, 255, 255, 0.35);
    --lg-highlight-dark: rgba(255, 255, 255, 0.15);
    
    /* Geometry - Apple Inspired */
    --lg-radius: 20px;
    --lg-radius-sm: 12px;
    --lg-radius-lg: 24px;
    --lg-hairline: 0.5px;
    --lg-padding: 16px 18px;
    
    /* Shadows - Multi-layered for depth */
    --lg-shadow-elevation: 0 10px 30px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --lg-shadow-button: 0 8px 22px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    --lg-shadow-nav: 0 6px 18px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.05);
    --lg-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.15);
    --lg-inner-shadow: inset 0 1px 0 var(--lg-highlight), inset 0 -1px 2px rgba(0, 0, 0, var(--lg-inner-alpha));
    
    /* Motion - Organic Cubic Bezier */
    --lg-motion-fast: 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --lg-motion-medium: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --lg-motion-slow: 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
    
    /* Brand Colors */
    --lg-primary: rgb(56, 136, 255);
    --lg-primary-hover: rgb(40, 120, 240);
    --lg-success: rgb(52, 199, 89);
    --lg-warning: rgb(255, 149, 0);
    --lg-error: rgb(255, 59, 48);
    
    /* Current Theme Variables */
    --lg-bg: var(--lg-bg-light);
    --lg-text: var(--lg-text-light);
    --lg-blur: var(--lg-blur-light);
    --lg-highlight: var(--lg-highlight-light);
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        --lg-bg: var(--lg-bg-dark);
        --lg-text: var(--lg-text-dark);
        --lg-blur: var(--lg-blur-dark);
        --lg-highlight: var(--lg-highlight-dark);
    }
    
    .lg-background::before {
        background-image: 
            radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
            radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
            linear-gradient(45deg, transparent 45%, rgba(56, 136, 255, 0.05) 49%, rgba(56, 136, 255, 0.05) 51%, transparent 55%),
            linear-gradient(-45deg, transparent 45%, rgba(255, 149, 0, 0.03) 49%, rgba(255, 149, 0, 0.03) 51%, transparent 55%),
            linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
            linear-gradient(0deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
            radial-gradient(ellipse at 30% 70%, rgba(52, 199, 89, 0.06) 0%, transparent 50%),
            radial-gradient(ellipse at 70% 30%, rgba(255, 59, 48, 0.04) 0%, transparent 60%),
            linear-gradient(135deg, 
                #020617 0%,
                #0f172a 25%,
                #1e293b 50%,
                #334155 75%,
                #475569 100%);
    }
}

[data-theme="dark"] {
    --lg-bg: var(--lg-bg-dark);
    --lg-text: var(--lg-text-dark);
    --lg-blur: var(--lg-blur-dark);
    --lg-highlight: var(--lg-highlight-dark);
}

[data-theme="dark"] .lg-background::before {
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(45deg, transparent 45%, rgba(56, 136, 255, 0.05) 49%, rgba(56, 136, 255, 0.05) 51%, transparent 55%),
        linear-gradient(-45deg, transparent 45%, rgba(255, 149, 0, 0.03) 49%, rgba(255, 149, 0, 0.03) 51%, transparent 55%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        radial-gradient(ellipse at 30% 70%, rgba(52, 199, 89, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 30%, rgba(255, 59, 48, 0.04) 0%, transparent 60%),
        linear-gradient(135deg, 
            #020617 0%,
            #0f172a 25%,
            #1e293b 50%,
            #334155 75%,
            #475569 100%);
}

[data-theme="light"] {
    --lg-bg: var(--lg-bg-light);
    --lg-text: var(--lg-text-light);
    --lg-blur: var(--lg-blur-light);
    --lg-highlight: var(--lg-highlight-light);
}

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

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: rgb(var(--lg-bg));
    color: var(--lg-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    position: relative;
}

/* Enhanced Background for Liquid Glass Effect */
.lg-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -10;
    overflow: hidden;
}

/* Complex layered background image */
.lg-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        /* Noise texture overlay */
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        
        /* Geometric patterns */
        linear-gradient(45deg, transparent 45%, rgba(56, 136, 255, 0.03) 49%, rgba(56, 136, 255, 0.03) 51%, transparent 55%),
        linear-gradient(-45deg, transparent 45%, rgba(255, 149, 0, 0.02) 49%, rgba(255, 149, 0, 0.02) 51%, transparent 55%),
        
        /* Grid pattern */
        linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px),
        
        /* Abstract shapes */
        radial-gradient(ellipse at 30% 70%, rgba(52, 199, 89, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 30%, rgba(255, 59, 48, 0.03) 0%, transparent 60%),
        
        /* Main gradient base */
        linear-gradient(135deg, 
            #0f172a 0%,
            #1e293b 25%,
            #334155 50%,
            #475569 75%,
            #64748b 100%);
    
    background-size: 
        2px 2px,
        3px 3px,
        120px 120px,
        80px 80px,
        60px 60px,
        60px 60px,
        400px 300px,
        350px 280px,
        100% 100%;
    
    animation: backgroundShift 25s linear infinite;
    z-index: 1;
}

/* Animated overlay effects */
.lg-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        /* Color overlay animations */
        radial-gradient(circle at 25% 25%, rgba(56, 136, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 85% 30%, rgba(138, 43, 226, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(240, 147, 251, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 20% 70%, rgba(79, 172, 254, 0.07) 0%, transparent 50%),
        
        /* Subtle glass overlay */
        linear-gradient(135deg, 
            rgba(var(--lg-bg), 0.85) 0%, 
            rgba(var(--lg-bg), 0.75) 25%,
            rgba(var(--lg-bg), 0.8) 50%,
            rgba(var(--lg-bg), 0.7) 75%,
            rgba(var(--lg-bg), 0.85) 100%);
    
    background-size: 400% 400%, 350% 350%, 300% 300%, 450% 450%, 100% 100%;
    animation: colorShift 18s ease infinite;
    z-index: 2;
}

/* Enhanced animations */
@keyframes backgroundShift {
    0% { background-position: 0 0, 10px 10px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    25% { background-position: 2px 2px, 8px 12px, 30px 30px, 20px 20px, 15px 15px, 15px 15px, 100px 75px, 87px 70px, 0 0; }
    50% { background-position: 1px 1px, 11px 9px, 60px 60px, 40px 40px, 30px 30px, 30px 30px, 200px 150px, 175px 140px, 0 0; }
    75% { background-position: 3px 3px, 7px 13px, 90px 90px, 60px 60px, 45px 45px, 45px 45px, 300px 225px, 262px 210px, 0 0; }
    100% { background-position: 0 0, 10px 10px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
}

@keyframes colorShift {
    0%, 100% { 
        background-position: 0% 50%, 100% 50%, 50% 0%, 50% 100%, 0 0;
        opacity: 0.9;
    }
    25% { 
        background-position: 100% 50%, 0% 50%, 100% 100%, 0% 0%, 0 0;
        opacity: 0.7;
    }
    50% { 
        background-position: 100% 100%, 0% 0%, 0% 100%, 100% 0%, 0 0;
        opacity: 0.8;
    }
    75% { 
        background-position: 0% 100%, 100% 0%, 50% 50%, 50% 50%, 0 0;
        opacity: 0.6;
    }
}

/* Enhanced Glass Pane Component - True Liquid Glass */
.lg-pane {
    background: rgba(var(--lg-bg), var(--lg-alpha));
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast));
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast));
    border-radius: var(--lg-radius);
    box-shadow: var(--lg-shadow-elevation);
    position: relative;
    overflow: hidden;
    transition: all var(--lg-motion-medium);
    border: var(--lg-hairline) solid rgba(255, 255, 255, var(--lg-stroke-alpha));
}

.lg-pane::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    box-shadow: var(--lg-inner-shadow);
    pointer-events: none;
    z-index: 1;
}

.lg-pane::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    border-radius: inherit;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.8) 20%, 
        rgba(255, 255, 255, 0.8) 80%, 
        transparent 100%);
    pointer-events: none;
    z-index: 2;
}

.lg-pane:hover {
    transform: translateY(-2px);
    box-shadow: 
        var(--lg-shadow-elevation),
        0 20px 40px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(calc(var(--lg-blur) + 2px)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast));
    -webkit-backdrop-filter: blur(calc(var(--lg-blur) + 2px)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast));
}

/* Button Component */
.lg-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: rgba(var(--lg-bg), var(--lg-alpha));
    backdrop-filter: blur(18px) saturate(var(--lg-saturate));
    -webkit-backdrop-filter: blur(18px) saturate(var(--lg-saturate));
    border: var(--lg-hairline) solid rgba(255, 255, 255, var(--lg-stroke-alpha));
    border-radius: calc(var(--lg-radius) - 6px);
    box-shadow: var(--lg-shadow-button);
    color: var(--lg-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all var(--lg-motion-fast);
    white-space: nowrap;
}

.lg-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 var(--lg-highlight);
    pointer-events: none;
}

.lg-button:hover {
    transform: translateY(-1px);
    box-shadow: 
        var(--lg-shadow-button),
        0 12px 28px rgba(0, 0, 0, 0.15);
}

.lg-button:active {
    transform: translateY(0);
    box-shadow: var(--lg-shadow-button);
}

.lg-button:focus {
    outline: none;
    box-shadow: 
        var(--lg-shadow-button),
        0 0 0 2px var(--lg-primary);
}

/* Primary Button */
.lg-button-primary {
    background: linear-gradient(135deg, var(--lg-primary) 0%, rgba(var(--lg-primary), 0.8) 100%);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

.lg-button-primary:hover {
    background: linear-gradient(135deg, var(--lg-primary-hover) 0%, rgba(var(--lg-primary-hover), 0.8) 100%);
}

/* Enhanced Navigation with Liquid Glass */
.lg-nav {
    position: sticky;
    top: 0;
    background: rgba(var(--lg-bg), 0.1);
    backdrop-filter: blur(var(--lg-blur-nav)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast));
    -webkit-backdrop-filter: blur(var(--lg-blur-nav)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast));
    box-shadow: var(--lg-shadow-nav);
    border-bottom: var(--lg-hairline) solid rgba(255, 255, 255, var(--lg-stroke-alpha));
    z-index: 1000;
    transition: all var(--lg-motion-medium);
    position: relative;
}

.lg-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--lg-highlight) 50%, 
        transparent 100%);
    z-index: 1;
}

.lg-nav-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}

.lg-nav-logo {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--lg-text);
    text-decoration: none;
}

.lg-nav-logo img {
    height: 32px;
    margin-right: 12px;
}

.lg-nav-menu {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
}

.lg-nav-link {
    color: var(--lg-text);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--lg-motion-fast);
    position: relative;
}

.lg-nav-link:hover {
    color: var(--lg-primary);
}

.lg-nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: var(--lg-primary);
    border-radius: 50%;
}

/* Mobile Navigation */
.lg-nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--lg-text);
}

.lg-nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
    margin: 6px 0;
    transition: all var(--lg-motion-fast);
}

@media (max-width: 768px) {
    .lg-nav-menu {
        position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
        background: rgba(var(--lg-bg), 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: var(--lg-shadow-nav);
        padding: 20px;
        flex-direction: column;
        gap: 20px;
        transform: translateY(-100%);
        opacity: 0;
        transition: all var(--lg-motion-medium);
    }
    
    .lg-nav-menu.active {
        transform: translateY(0);
        opacity: 1;
    }
    
    .lg-nav-toggle {
        display: block;
    }
    
    .lg-nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .lg-nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    
    .lg-nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
}

/* Hero Section */
.lg-hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    overflow: hidden;
}

.lg-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at center, rgba(56, 136, 255, 0.1) 0%, transparent 70%);
    z-index: -1;
}

.lg-hero-content {
    max-width: 800px;
    z-index: 1;
}

.lg-hero-title {
    font-size: clamp(2.5rem, 8vw, 4rem);
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--lg-text) 0%, rgba(var(--lg-text), 0.7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lg-hero-subtitle {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--lg-primary);
}

.lg-hero-description {
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin-bottom: 2rem;
    opacity: 0.8;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.lg-hero-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Grid System */
.lg-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.lg-grid {
    display: grid;
    gap: 24px;
}

.lg-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.lg-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.lg-grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Cards */
.lg-card {
    @extend .lg-pane;
    padding: 24px;
    transition: all var(--lg-motion-medium);
}

.lg-card-header {
    margin-bottom: 16px;
}

.lg-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.lg-card-description {
    opacity: 0.8;
    line-height: 1.5;
}

.lg-card-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, var(--lg-stroke-alpha));
}

/* Forms */
.lg-form-group {
    margin-bottom: 20px;
}

.lg-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--lg-text);
}

.lg-input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(var(--lg-bg), var(--lg-alpha));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: var(--lg-hairline) solid rgba(255, 255, 255, var(--lg-stroke-alpha));
    border-radius: var(--lg-radius-sm);
    color: var(--lg-text);
    font-size: 1rem;
    transition: all var(--lg-motion-fast);
}

.lg-input:focus {
    outline: none;
    border-color: var(--lg-primary);
    box-shadow: 0 0 0 2px rgba(var(--lg-primary), 0.2);
}

/* Enhanced Modal with Advanced Liquid Glass */
.lg-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px) saturate(1.2);
    -webkit-backdrop-filter: blur(6px) saturate(1.2);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all var(--lg-motion-medium);
}

.lg-modal.active {
    opacity: 1;
    visibility: visible;
}

.lg-modal-content {
    background: rgba(var(--lg-bg), var(--lg-alpha));
    backdrop-filter: blur(var(--lg-blur-modal)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast));
    -webkit-backdrop-filter: blur(var(--lg-blur-modal)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast));
    border-radius: var(--lg-radius);
    box-shadow: var(--lg-shadow-modal);
    border: var(--lg-hairline) solid rgba(255, 255, 255, var(--lg-stroke-alpha));
    max-width: 500px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    transform: scale(0.95) translateY(20px);
    transition: all var(--lg-motion-medium);
    position: relative;
}

.lg-modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    box-shadow: var(--lg-inner-shadow);
    pointer-events: none;
    z-index: 1;
}

.lg-modal.active .lg-modal-content {
    transform: scale(1) translateY(0);
}

/* Utilities */
.lg-text-center { text-align: center; }
.lg-text-left { text-align: left; }
.lg-text-right { text-align: right; }

.lg-mb-0 { margin-bottom: 0; }
.lg-mb-1 { margin-bottom: 8px; }
.lg-mb-2 { margin-bottom: 16px; }
.lg-mb-3 { margin-bottom: 24px; }
.lg-mb-4 { margin-bottom: 32px; }
.lg-mb-5 { margin-bottom: 40px; }

.lg-mt-0 { margin-top: 0; }
.lg-mt-1 { margin-top: 8px; }
.lg-mt-2 { margin-top: 16px; }
.lg-mt-3 { margin-top: 24px; }
.lg-mt-4 { margin-top: 32px; }
.lg-mt-5 { margin-top: 40px; }

.lg-p-0 { padding: 0; }
.lg-p-1 { padding: 8px; }
.lg-p-2 { padding: 16px; }
.lg-p-3 { padding: 24px; }
.lg-p-4 { padding: 32px; }
.lg-p-5 { padding: 40px; }

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

/* Accessibility - Respect user preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 80ms !important;
    }
    
    :root {
        --lg-motion-fast: 80ms;
        --lg-motion-medium: 80ms;
        --lg-motion-slow: 80ms;
    }
    
    .lg-background::before,
    .lg-background::after {
        animation: none !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    :root {
        --lg-alpha: 0.2;
        --lg-stroke-alpha: 0.5;
    }
}

/* Focus indicators for keyboard navigation */
.lg-button:focus-visible,
.lg-input:focus-visible,
.lg-nav-link:focus-visible {
    outline: 2px solid var(--lg-primary);
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .lg-nav,
    .lg-modal,
    .lg-button {
        display: none !important;
    }
    
    .lg-pane {
        background: white !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
}