/* ============================================
   AIGeneralist.Club - Shared Color System
   Cohesive color palette for all pages
   WCAG 2.1 AA compliant
   ============================================ */

:root {
    /* Primary Colors - Trust & Professionalism */
    --primary: #2563EB;              /* Blue 600 - Main brand color */
    --primary-light: #3B82F6;        /* Blue 500 - Hover states */
    --primary-dark: #1E40AF;         /* Blue 700 - Dark mode, pressed */
    
    /* Accent Colors - Innovation & Creativity */
    --accent: #7C3AED;               /* Violet 600 - Secondary brand */
    --accent-light: #8B5CF6;         /* Violet 500 - Gradients, highlights */
    
    /* Background Colors - Dark Theme (Default) */
    --bg-primary: #0F172A;           /* Slate 900 - Main background */
    --bg-secondary: #1E293B;         /* Slate 800 - Cards, surfaces */
    --bg-tertiary: #334155;          /* Slate 700 - Borders, dividers */
    
    /* Legacy aliases for backward compatibility */
    --bg-dark: var(--bg-primary);
    --bg-dark-lighter: var(--bg-secondary);
    
    /* Text Colors - Dark Theme */
    --text-primary: #F8FAFC;         /* Slate 50 - Headings, primary text */
    --text-secondary: #94A3B8;       /* Slate 400 - Body text, descriptions */
    --text-muted: #64748B;           /* Slate 500 - Placeholders, hints */
    
    /* Semantic Colors */
    --success: #10B981;              /* Emerald 500 - Success, growth */
    --success-light: #34D399;        /* Emerald 400 - Success backgrounds */
    --success-dark: #059669;         /* Emerald 600 - Success emphasis */
    
    --warning: #F59E0B;             /* Amber 500 - Warnings, attention */
    --warning-light: #FBBF24;        /* Amber 400 - Warning backgrounds */
    --warning-dark: #D97706;         /* Amber 600 - Warning emphasis */
    
    --error: #EF4444;                /* Red 500 - Errors, destructive */
    --error-light: #F87171;          /* Red 400 - Error backgrounds */
    --error-dark: #DC2626;           /* Red 600 - Error emphasis */
    
    --info: #06B6D4;                /* Cyan 500 - Information, tips */
    
    /* Gradients */
    --gradient-cta: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
    --gradient-success: linear-gradient(135deg, #10B981 0%, #059669 100%);
    --gradient-warm: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    --shadow-primary: 0 10px 25px rgba(37, 99, 235, 0.3);
}

/* Light Theme Overrides */
body:not(.dark-theme) {
    /* Background Colors - Light Theme */
    --bg-primary: #F8FAFC;           /* Slate 50 - Main background */
    --bg-secondary: #FFFFFF;         /* White - Cards, surfaces */
    --bg-tertiary: #E2E8F0;          /* Slate 200 - Borders, dividers */
    
    /* Legacy aliases */
    --bg-dark: var(--bg-primary);
    --bg-dark-lighter: var(--bg-secondary);
    
    /* Text Colors - Light Theme */
    --text-primary: #1E293B;         /* Slate 800 - Headings */
    --text-secondary: #64748B;       /* Slate 500 - Body text */
    --text-muted: #94A3B8;           /* Slate 400 - Placeholders */
}

/* Dark Theme (explicit) */
body.dark-theme {
    /* Background Colors - Dark Theme */
    --bg-primary: #0F172A;           /* Slate 900 - Main background */
    --bg-secondary: #1E293B;         /* Slate 800 - Cards, surfaces */
    --bg-tertiary: #334155;          /* Slate 700 - Borders, dividers */
    
    /* Legacy aliases */
    --bg-dark: var(--bg-primary);
    --bg-dark-lighter: var(--bg-secondary);
    
    /* Text Colors - Dark Theme */
    --text-primary: #F8FAFC;         /* Slate 50 - Headings, primary text */
    --text-secondary: #94A3B8;       /* Slate 400 - Body text, descriptions */
    --text-muted: #64748B;           /* Slate 500 - Placeholders, hints */
}