/* ===== APPLE HIG DESIGN TOKENS ===== */

:root {
    /* ===== Color System (iOS 15+ / macOS Monterey+) ===== */
    
    /* System Grays (Light Mode) */
    --system-gray-6: #F2F2F7; /* App Background */
    --system-gray-5: #E5E5EA; /* Input Backgrounds */
    --system-gray-4: #D1D1D6; /* Separators */
    --system-gray-3: #C7C7CC; /* Borders */
    --system-gray-2: #AEAEB2;
    --system-gray-1: #8E8E93; /* Secondary Text */
    
    /* System Colors */
    --color-blue: #007AFF;
    --color-green: #34C759;
    --color-indigo: #5856D6;
    --color-orange: #FF9500;
    --color-pink: #FF2D55;
    --color-purple: #AF52DE;
    --color-red: #FF3B30;
    --color-teal: #5AC8FA;
    --color-yellow: #FFCC00;

    /* Semantic Colors */
    --bg-app: #F5F5F7;
    --bg-card: #FFFFFF;
    --bg-modal: #FFFFFF;
    --bg-input: rgba(118, 118, 128, 0.12);
    
    --text-primary: #000000;
    --text-secondary: rgba(60, 60, 67, 0.6);
    --text-tertiary: rgba(60, 60, 67, 0.3);
    --text-quaternary: rgba(60, 60, 67, 0.18);

    --separator: rgba(60, 60, 67, 0.29);
    --separator-non-opaque: #C6C6C8;

    /* Shadows */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-floating: 0 20px 40px rgba(0, 0, 0, 0.15);

    /* Blurs */
    --blur-thin: blur(20px);
    --blur-thick: blur(50px);
    --material-regular: saturate(180%) blur(20px);
    --material-thick: saturate(180%) blur(50px);
    
    /* Spacing */
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    /* Safe Area Insets */
    --safe-top: env(safe-area-inset-top, 20px);
    --safe-bottom: env(safe-area-inset-bottom, 20px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-full: 9999px;
}

/* Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
    :root {
        --system-gray-6: #1C1C1E;
        --system-gray-5: #2C2C2E;
        --system-gray-4: #3A3A3C;
        --system-gray-3: #48484A;
        --system-gray-2: #636366;
        --system-gray-1: #8E8E93;

        --bg-app: #000000;
        --bg-card: #1C1C1E;
        --bg-modal: #2C2C2E;
        --bg-input: rgba(118, 118, 128, 0.24);

        --text-primary: #FFFFFF;
        --text-secondary: rgba(235, 235, 245, 0.6);
        --text-tertiary: rgba(235, 235, 245, 0.3);
        --text-quaternary: rgba(235, 235, 245, 0.18);

        --separator: rgba(84, 84, 88, 0.65);
        --separator-non-opaque: #38383A;
        
        --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.3);
        --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.4);
        --shadow-floating: 0 20px 40px rgba(0, 0, 0, 0.5);
    }
}