/**
 * Apple Liquid Glass & Glassmorphism Design System
 * Light / Dark Mode Tokens, Specular Highlights & Fluid Orbs
 * Creator: VynaaValerie
 */

:root {
    /* Color Palette - Dark Mode (Default) */
    --bg-base: #07080d;
    --bg-mesh-1: rgba(37, 99, 235, 0.16);
    --bg-mesh-2: rgba(147, 51, 234, 0.14);
    --bg-mesh-3: rgba(6, 182, 212, 0.12);
    
    /* Glass Surfaces */
    --glass-card: rgba(18, 21, 36, 0.65);
    --glass-card-hover: rgba(26, 30, 50, 0.75);
    --glass-card-subtle: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-border-highlight: rgba(255, 255, 255, 0.22);
    --glass-inner-glow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.15);
    --glass-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    --glass-shadow-sm: 0 10px 25px rgba(0, 0, 0, 0.25);
    
    /* Typography */
    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-accent: #38bdf8;
    
    /* Accent & Action */
    --accent-glow: rgba(56, 189, 248, 0.35);
    --accent-gradient: linear-gradient(135deg, #38bdf8 0%, #818cf8 50%, #c084fc 100%);
    --accent-btn-bg: #ffffff;
    --accent-btn-text: #050505;
    
    /* Inputs & Controls */
    --input-bg: rgba(9, 11, 18, 0.7);
    --input-border: rgba(255, 255, 255, 0.1);
    --input-focus-border: #38bdf8;
    --slider-track: rgba(255, 255, 255, 0.12);
    --slider-thumb: #ffffff;
    
    /* Blur & Radius */
    --glass-blur: blur(28px);
    --glass-blur-sm: blur(16px);
    --radius-pill: 9999px;
    --radius-xl: 24px;
    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 8px;
}

[data-theme="light"] {
    /* Light Mode - Apple Liquid Ice Crystal */
    --bg-base: #f0f4f9;
    --bg-mesh-1: rgba(186, 230, 253, 0.75);
    --bg-mesh-2: rgba(221, 214, 254, 0.65);
    --bg-mesh-3: rgba(207, 250, 254, 0.65);
    
    --glass-card: rgba(255, 255, 255, 0.72);
    --glass-card-hover: rgba(255, 255, 255, 0.85);
    --glass-card-subtle: rgba(255, 255, 255, 0.5);
    --glass-border: rgba(255, 255, 255, 0.85);
    --glass-border-highlight: rgba(255, 255, 255, 1);
    --glass-inner-glow: inset 0 1px 2px 0 rgba(255, 255, 255, 0.9);
    --glass-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
    --glass-shadow-sm: 0 10px 25px rgba(15, 23, 42, 0.05);
    
    --text-primary: #090a10;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-accent: #0284c7;
    
    --accent-glow: rgba(2, 132, 199, 0.2);
    --accent-gradient: linear-gradient(135deg, #0284c7 0%, #6366f1 50%, #9333ea 100%);
    --accent-btn-bg: #090a10;
    --accent-btn-text: #ffffff;
    
    --input-bg: rgba(255, 255, 255, 0.8);
    --input-border: rgba(148, 163, 184, 0.3);
    --input-focus-border: #0284c7;
    --slider-track: rgba(0, 0, 0, 0.1);
    --slider-thumb: #090a10;
}

/* Fluid Background Aurora Mesh */
.ambient-mesh {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.ambient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.85;
    will-change: transform;
    animation: floatAmbient 18s ease-in-out infinite alternate;
}

.orb-1 {
    width: 500px;
    height: 500px;
    top: -100px;
    left: 10%;
    background: var(--bg-mesh-1);
}

.orb-2 {
    width: 550px;
    height: 550px;
    top: 40%;
    right: -100px;
    background: var(--bg-mesh-2);
    animation-delay: -5s;
    animation-duration: 22s;
}

.orb-3 {
    width: 450px;
    height: 450px;
    bottom: -100px;
    left: 25%;
    background: var(--bg-mesh-3);
    animation-delay: -10s;
    animation-duration: 20s;
}

@keyframes floatAmbient {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(40px, 30px) scale(1.08); }
    100% { transform: translate(-30px, 50px) scale(0.95); }
}

/* Glass Card Utility */
.glass-panel {
    background: var(--glass-card);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), var(--glass-inner-glow);
    border-radius: var(--radius-xl);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-panel:hover {
    border-color: var(--glass-border-highlight);
}

.glass-pill {
    background: var(--glass-card);
    backdrop-filter: var(--glass-blur-sm);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-sm), var(--glass-inner-glow);
    border-radius: var(--radius-pill);
}

/* Smooth Theme Switch */
.theme-transitioning,
.theme-transitioning * {
    transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important;
}