/* backend/static/css/base/variables.css */

:root,
[data-theme="light"] {
    /* --- Font & Spacing Tokens --- */
    --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-heading: 'Outfit', 'Inter', system-ui, sans-serif;
    --spacing-xs: 0.25rem;
    --spacing-s: 0.5rem;
    --spacing-m: 1rem;
    --spacing-l: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;

    /* --- "Modern Trust" Palette (Light) --- */
    --color-primary: #059669;       /* Emerald Green */
    --color-primary-dark: #047857;
    --color-secondary: #4f46e5;     /* Indigo */
    --color-secondary-rgb: 79, 70, 229;

    /* --- Neutral Surfaces --- */
    --color-background: #fcfbf9;    /* Creamy Off-White */
    --color-surface: #ffffff;       /* Pure White Cards */
    --color-text: #1a262b;          /* Dark Charcoal */
    --color-text-muted: #5c7062;    /* Muted Sage */
    --color-border: #d1d6d3;        /* Soft Grey */
    
    /* --- Glassmorphism Surfaces --- */
    --bg-glass-card: rgba(255, 255, 255, 0.8);
    --bg-glass-input: rgba(255, 255, 255, 0.85);
    --bg-glass-hover: rgba(255, 255, 255, 0.95);
    --border-glass: rgba(74, 112, 73, 0.15); /* Primary tint */
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.05);
    
    /* --- Functional Colors --- */
    --color-success: #059669;          
    --color-danger: #ef4444; 
    --color-error: #ef4444;          
    --color-warning: #f59e0b;
    
    /* --- RGB Values (For semi-transparent overlays) --- */
    --color-primary-rgb: 5, 150, 105;
    --color-surface-rgb: 255, 255, 255;
    --color-background-rgb: 252, 251, 249; /* Added */
    --color-border-rgb: 209, 214, 211;
    --color-text-rgb: 26, 38, 43;
    --color-error-rgb: 239, 68, 68;
    --color-success-rgb: 5, 150, 105;
    --color-warning-rgb: 245, 158, 11;

    /* --- Category Colors --- */
    --color-category-mental: #4facfe;
    --color-category-physical: #ff9a9e;
    --color-category-social: #a18cd1;
    --color-category-emotional: #667eea;
    --color-category-spiritual: #43e97b;

    /* --- Global Shadows --- */
    --shadow-sm: 0 1px 3px rgba(5, 150, 105, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(5, 150, 105, 0.1), 0 2px 4px -1px rgba(5, 150, 105, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(5, 150, 105, 0.1), 0 4px 6px -2px rgba(5, 150, 105, 0.05);
}

[data-theme="dark"] {
    /* --- "Modern Trust" Palette (Dark Mode Overrides) --- */
    --color-background: #0f172a;    /* Deep Slate Gray */
    --color-surface: #1e293b;       /* Lighter Slate Surface */
    
    --color-primary: #10b981;       /* Emerald 500 */
    --color-primary-dark: #059669;
    
    --color-secondary: #818cf8;     /* Indigo 400 */
    --color-secondary-rgb: 129, 140, 248;

    --color-text: #f3f4f6;          /* Soft White Primary Text */
    --color-text-muted: #9ca3af;    /* Soft Gray Muted Text */
    
    --color-border: rgba(255, 255, 255, 0.08);
    
    /* --- Glassmorphism Surfaces (Dark) --- */
    --bg-glass-card: rgba(30, 41, 59, 0.8);
    --bg-glass-input: rgba(15, 23, 42, 0.6);
    --bg-glass-hover: rgba(30, 41, 59, 0.95);
    --border-glass: rgba(255, 255, 255, 0.08);
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3);
    
    --color-success: #10b981;
    --color-danger: #f87171;
    --color-error: #f87171;

    --color-primary-rgb: 16, 185, 129;
    --color-surface-rgb: 30, 41, 59;
    --color-background-rgb: 15, 23, 42;
    --color-border-rgb: 255, 255, 255;  /* White border base for opacity */
    
    /* Category Colors - Adjusted to pop vibrantly in dark mode */
    --color-category-mental: #60a5fa;
    --color-category-physical: #f87171;
    --color-category-social: #c084fc;
    --color-category-emotional: #818cf8;
    --color-category-spiritual: #34d399;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-background: #0f172a;
        --color-surface: #1e293b;
        
        --color-primary: #10b981;
        --color-primary-dark: #059669;
        
        --color-secondary: #818cf8;
        --color-secondary-rgb: 129, 140, 248;

        --color-text: #f3f4f6;
        --color-text-muted: #9ca3af;
        
        --color-border: rgba(255, 255, 255, 0.08);
        
        --bg-glass-card: rgba(30, 41, 59, 0.8);
        --bg-glass-input: rgba(15, 23, 42, 0.6);
        --bg-glass-hover: rgba(30, 41, 59, 0.95);
        --border-glass: rgba(255, 255, 255, 0.08);
        --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3);
        
        --color-success: #10b981;
        --color-danger: #f87171;
        --color-error: #f87171;

        --color-primary-rgb: 16, 185, 129;
        --color-surface-rgb: 30, 41, 59;
        --color-background-rgb: 15, 23, 42;
        --color-border-rgb: 255, 255, 255;
        
        --color-category-mental: #60a5fa;
        --color-category-physical: #f87171;
        --color-category-social: #c084fc;
        --color-category-emotional: #818cf8;
        --color-category-spiritual: #34d399;
    }
}