/**
 * @fileoverview CSS Custom Properties (Design System Tokens)
 */
:root {
    /* --- SPACING & SIZING (8px grid) --- */
    --space-xxs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 40px;

    /* --- TYPOGRAPHY --- */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.85rem;
    --font-size-md: 0.95rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.1rem;
    --font-size-xl: 1.25rem;

    /* Dynamic Accent Color (Controlled by JS for Market Switching) */
    --accent-color: #007AFF; 
    
    /* Monochrome Base (Apple HIG system gray) */
    --bg-color: #F2F2F7; 
    --card-bg: #FFFFFF;
    --glass-bg: rgba(255, 255, 255, 0.7);
    
    /* Typography Colors */
    --text-main: #1C1C1E;
    --text-muted: #8E8E93;

    /* Input / elevated surfaces */
    --bg-input: #F7F7FA;
    --surface-elevated: rgba(255, 255, 255, 0.86);
    --surface-elevated-strong: rgba(255, 255, 255, 0.95);
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.08);
    
    /* Structural Elements */
    --border: rgba(0, 0, 0, 0.08);
    --safe-area-bottom: 25px; /* iOS Home Bar padding */

    /* Admin palette defaults */
    --admin-sidebar-bg: #F9FAFB;
    --admin-canvas-bg: #FFFFFF;
    --admin-border: #E5E7EB;
    --admin-hover: #F3F4F6;
    --admin-text: #111827;
    --admin-muted: #6B7280;
    --admin-active: #000000;
}

html[data-theme='dark'] {
    --bg-color: #0F1115;
    --card-bg: #171A21;
    --glass-bg: rgba(18, 21, 28, 0.72);

    --text-main: #F3F6FF;
    --text-muted: #A7B0C2;
    --bg-input: #1D2230;

    --border: rgba(255, 255, 255, 0.12);
    --surface-elevated: rgba(16, 19, 26, 0.88);
    --surface-elevated-strong: rgba(16, 19, 26, 0.95);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.5);

    --admin-sidebar-bg: #141923;
    --admin-canvas-bg: #10151D;
    --admin-border: #243041;
    --admin-hover: #1B2330;
    --admin-text: #EFF4FF;
    --admin-muted: #AAB7CC;
    --admin-active: #E7EEF9;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme='light']) {
        --bg-color: #0F1115;
        --card-bg: #171A21;
        --glass-bg: rgba(18, 21, 28, 0.72);

        --text-main: #F3F6FF;
        --text-muted: #A7B0C2;
        --bg-input: #1D2230;

        --border: rgba(255, 255, 255, 0.12);
        --surface-elevated: rgba(16, 19, 26, 0.88);
        --surface-elevated-strong: rgba(16, 19, 26, 0.95);
        --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.5);

        --admin-sidebar-bg: #141923;
        --admin-canvas-bg: #10151D;
        --admin-border: #243041;
        --admin-hover: #1B2330;
        --admin-text: #EFF4FF;
        --admin-muted: #AAB7CC;
        --admin-active: #E7EEF9;
    }
}