/**
 * More Brains - CSS Custom Properties
 * Theme variables for Gruvbox Light and Monokai Dark
 */

:root {
    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    
    /* Font Sizes */
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-lg: 17px;
    --text-xl: 21px;
    
    /* Spacing (4px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    
    /* Border Radius */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
    
    /* Transitions */
    --transition-fast: 100ms ease;
    --transition-base: 150ms ease;
    --transition-slow: 250ms ease;
}

/* ========================================
   Light Theme: Gruvbox Light (Default)
   ======================================== */
:root,
[data-theme="light"] {
    /* Backgrounds */
    --bg-main: #fbf1c7;
    --bg-panel: #f2e5bc;
    --bg-elevated: #ebdbb2;
    --bg-input: #f9f5d7;
    
    /* Borders */
    --border-default: #d5c4a1;
    --border-muted: #ebdbb2;
    
    /* Text */
    --text-primary: #3c3836;
    --text-secondary: #504945;
    --text-muted: #7c6f64;
    
    /* Accents */
    --accent-primary: #af3a03;
    --accent-secondary: #076678;
    --accent-success: #79740e;
    --accent-warning: #b57614;
    --accent-danger: #9d0006;
    
    /* Semantic: Memory Zoom Levels */
    --memory-z0: #af3a03;
    --memory-z1: #b57614;
    --memory-z2: #79740e;
    --memory-z3: #076678;
    --memory-z4: #427b58;
    
    /* Semantic: UI Elements */
    --label-tag: #076678;
    --list-item: #79740e;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* ========================================
   Dark Theme: Monokai
   ======================================== */
[data-theme="dark"] {
    /* Backgrounds */
    --bg-main: #272822;
    --bg-panel: #1e1f1a;
    --bg-elevated: #3e3d32;
    --bg-input: #1e1f1a;
    
    /* Borders */
    --border-default: #49483e;
    --border-muted: #3e3d32;
    
    /* Text */
    --text-primary: #f8f8f2;
    --text-secondary: #a6a69c;
    --text-muted: #75715e;
    
    /* Accents */
    --accent-primary: #f92672;
    --accent-secondary: #66d9ef;
    --accent-success: #a6e22e;
    --accent-warning: #e6db74;
    --accent-danger: #f92672;
    
    /* Semantic: Memory Zoom Levels */
    --memory-z0: #fd971f;
    --memory-z1: #e6db74;
    --memory-z2: #a6e22e;
    --memory-z3: #66d9ef;
    --memory-z4: #ae81ff;
    
    /* Semantic: UI Elements */
    --label-tag: #66d9ef;
    --list-item: #a6e22e;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* System preference detection */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Backgrounds */
        --bg-main: #272822;
        --bg-panel: #1e1f1a;
        --bg-elevated: #3e3d32;
        --bg-input: #1e1f1a;
        
        /* Borders */
        --border-default: #49483e;
        --border-muted: #3e3d32;
        
        /* Text */
        --text-primary: #f8f8f2;
        --text-secondary: #a6a69c;
        --text-muted: #75715e;
        
        /* Accents */
        --accent-primary: #f92672;
        --accent-secondary: #66d9ef;
        --accent-success: #a6e22e;
        --accent-warning: #e6db74;
        --accent-danger: #f92672;
        
        /* Semantic: Memory Zoom Levels */
        --memory-z0: #fd971f;
        --memory-z1: #e6db74;
        --memory-z2: #a6e22e;
        --memory-z3: #66d9ef;
        --memory-z4: #ae81ff;
        
        /* Semantic: UI Elements */
        --label-tag: #66d9ef;
        --list-item: #a6e22e;
        
        /* Shadows */
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
        --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
    }
}