/* ============================================
   GLASMORPHISM - Base Stylesheet
   ============================================
   Defines CSS custom properties and reusable
   glassmorphism utility classes with fallbacks
   for older browsers.
   ============================================ */

:root {
    /* Glass Effect Properties */
    --glass-blur: 16px;
    --glass-opacity: 0.8;
    --glass-opacity-hover: 0.9;
    --glass-border-opacity: 0.3;
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    --glass-shadow-hover: 0 12px 48px rgba(0, 0, 0, 0.15);
    
    /* Radius Tokens (Apple-like subtle rounding) */
    --radius-card: 12px;
    --radius-control: 10px;
    --radius-chip: 8px;
    --radius-pill: 999px;

    /* Transition Properties */
    --transition-smooth: all 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    --transition-medium: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    --transition-fast: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    
    /* Animation Durations */
    --anim-duration-short: 0.22s;
    --anim-duration-standard: 0.38s;
    --anim-duration-long: 0.6s;
    
    /* Animation Easing */
    --easing-smooth: cubic-bezier(0.22, 1, 0.36, 1);
    --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
}

/* ============================================
   Base Glass Utility Class
   ============================================ */

.glass {
    background: rgba(255, 255, 255, var(--glass-opacity));
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid rgba(255, 255, 255, var(--glass-border-opacity));
    box-shadow: var(--glass-shadow);
    transition: var(--transition-smooth);
}

.glass:hover {
    background: rgba(255, 255, 255, var(--glass-opacity-hover));
    box-shadow: var(--glass-shadow-hover);
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(1px)) {
    .glass {
        background: rgba(255, 255, 255, 0.95) !important;
    }
}

/* ============================================
   Light Theme Glass Variants
   ============================================ */

.glass-light {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(200, 200, 220, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transition: var(--transition-smooth);
}

.glass-light:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
    border-color: rgba(200, 200, 220, 0.6);
}

/* Fallback for light theme */
@supports not (backdrop-filter: blur(1px)) {
    .glass-light {
        background: rgba(255, 255, 255, 0.98) !important;
    }
}

/* ============================================
   Dark Theme Glass Variants
   ============================================ */

.glass-dark {
    background: rgba(40, 40, 50, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(197, 202, 213, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.85);
    transition: var(--transition-smooth);
}

.glass-dark:hover {
    background: rgba(40, 40, 50, 0.8);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
    border-color: rgba(197, 202, 213, 0.4);
}

/* Fallback for dark theme */
@supports not (backdrop-filter: blur(1px)) {
    .glass-dark {
        background: rgba(40, 40, 50, 0.95) !important;
    }
}

/* ============================================
   Glass Effect Modifiers
   ============================================ */

/* Subtle glass (less opacity) */
.glass-subtle {
    opacity: 0.7;
}

/* Prominent glass (more opacity) */
.glass-prominent {
    opacity: 0.95;
}

/* Glass with enhanced blur */
.glass-blur-high {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* Glass with reduced blur (for smaller elements) */
.glass-blur-low {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ============================================
   Glass Button Variants
   ============================================ */

.glass-button {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(200, 200, 220, 0.5);
    color: #171717;
    transition: var(--transition-fast);
}

.glass-button:hover {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: rgba(200, 200, 220, 0.7);
}

.glass-button-dark {
    background: rgba(30, 30, 40, 0.65);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(197, 202, 213, 0.3);
    color: rgba(255, 255, 255, 0.85);
    transition: var(--transition-fast);
}

.glass-button-dark:hover {
    background: rgba(30, 30, 40, 0.8);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    border-color: rgba(197, 202, 213, 0.5);
}

/* Fallbacks */
@supports not (backdrop-filter: blur(1px)) {
    .glass-button {
        background: rgba(255, 255, 255, 0.95) !important;
    }
    
    .glass-button-dark {
        background: rgba(30, 30, 40, 0.9) !important;
    }
}

/* ============================================
   Glass Input Variants
   ============================================ */

.glass-input {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(200, 200, 220, 0.4);
    color: #171717;
    transition: var(--transition-fast);
}

.glass-input:focus {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(200, 200, 220, 0.7);
    box-shadow: 0 0 0 3px rgba(120, 204, 109, 0.1), 0 8px 24px rgba(0, 0, 0, 0.08);
    outline: none;
}

.glass-input-dark {
    background: rgba(30, 30, 40, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(197, 202, 213, 0.2);
    color: rgba(255, 255, 255, 0.85);
    transition: var(--transition-fast);
}

.glass-input-dark:focus {
    background: rgba(30, 30, 40, 0.7);
    border-color: rgba(197, 202, 213, 0.5);
    box-shadow: 0 0 0 3px rgba(120, 204, 109, 0.15), 0 8px 24px rgba(0, 0, 0, 0.25);
    outline: none;
}

/* Fallbacks */
@supports not (backdrop-filter: blur(1px)) {
    .glass-input {
        background: rgba(255, 255, 255, 0.9) !important;
    }
    
    .glass-input-dark {
        background: rgba(30, 30, 40, 0.85) !important;
    }
}

/* ============================================
   Accessibility & Performance
   ============================================ */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .glass,
    .glass-light,
    .glass-dark,
    .glass-button,
    .glass-button-dark,
    .glass-input,
    .glass-input-dark {
        transition: none !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Print styles */
@media print {
    .glass,
    .glass-light,
    .glass-dark {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: white;
        box-shadow: none;
    }
}