/**
 * Apple Human Interface Guidelines (HIG) - Glass Material & Vibrancy
 * Standardized CSS for VisionOS & macOS Materials
 */

:root {
    /* Light Mode Tokens */
    --glass-bg-light: rgba(255, 255, 255, 0.45);
    --glass-border-light: rgba(255, 255, 255, 0.15);
    --text-primary-light: rgba(0, 0, 0, 0.85);
    --text-secondary-light: rgba(0, 0, 0, 0.55);
    
    /* Dark Mode Tokens */
    --glass-bg-dark: rgba(0, 0, 0, 0.25);
    --glass-border-dark: rgba(255, 255, 255, 0.15);
    --text-primary-dark: rgba(255, 255, 255, 0.85);
    --text-secondary-dark: rgba(255, 255, 255, 0.55);

    /* Common Tokens */
    --glass-blur: blur(24px) saturate(190%);
    --webkit-glass-blur: blur(24px) saturate(190%);
    --glass-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.15), 0 0 1px 0 rgba(0, 0, 0, 0.05);
    --system-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Base Material Class */
.glass-material {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 12px;
    box-shadow: var(--glass-shadow);
    font-family: var(--system-font);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light Mode Defaults */
@media (prefers-color-scheme: light) {
    .glass-material {
        background: var(--glass-bg-light);
        border: 1px solid var(--glass-border-light);
        color: var(--text-primary-light);
    }
    .text-vibrant {
        color: var(--text-primary-light);
        mix-blend-mode: overlay;
    }
    .text-secondary {
        color: var(--text-secondary-light);
    }
}

/* Dark Mode Defaults */
@media (prefers-color-scheme: dark) {
    .glass-material {
        background: var(--glass-bg-dark);
        border: 1px solid var(--glass-border-dark);
        color: var(--text-primary-dark);
    }
    .text-vibrant {
        color: var(--text-primary-dark);
        mix-blend-mode: overlay;
    }
    .text-secondary {
        color: var(--text-secondary-dark);
    }
}

/* Specular Highlights (Top & Left) */
.glass-highlight {
    position: relative;
    overflow: hidden;
}

.glass-highlight::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: inherit;
}

/* Fluid Background Animation */
.fluid-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: #000;
    overflow: hidden;
    pointer-events: none;
}

.blob {
    position: absolute;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(229, 57, 53, 0.25) 0%, rgba(229, 57, 53, 0) 70%);
    border-radius: 50%;
    filter: blur(80px);
    animation: move 25s infinite alternate ease-in-out;
}

@keyframes move {
    0% { transform: translate(-20%, -20%) scale(1); }
    33% { transform: translate(40%, 10%) scale(1.1); }
    66% { transform: translate(-10%, 50%) scale(0.9); }
    100% { transform: translate(20%, -10%) scale(1); }
}