/* ================================
   THEME SYSTEM - Color Variables
   Inspired by Claude Docs Design
   ================================ */

:root {
    /* Theme Toggle Transition */
    --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ================================
   DARK THEME (Default)
   ================================ */
[data-theme="dark"],
:root:not([data-theme]) {
    /* Background Colors */
    --color-bg-primary: #0a0a0f;
    --color-bg-secondary: #141419;
    --color-bg-tertiary: #1a1a20;
    --color-bg-hover: #23232a;
    --color-bg-elevated: #1e1e26;
    
    /* Text Colors */
    --color-text-primary: #ffffff;
    --color-text-secondary: #b4b4c0;
    --color-text-tertiary: #8a8a9a;
    --color-text-muted: #6a6a7a;
    --color-text-disabled: #4a4a54;
    --color-text-inverse: #0a0a0f;
    
    /* Border Colors */
    --color-border-primary: #2a2a34;
    --color-border-secondary: #3a3a44;
    --color-border-tertiary: #4a4a54;
    
    /* Primary Colors (Buttons & Interactive) */
    --color-primary: #8b5cf6;
    --color-primary-hover: #7c3aed;
    --color-primary-light: rgba(139, 92, 246, 0.1);
    --color-primary-dark: #6d28d9;
    
    --color-secondary: #a855f7;
    --color-accent: #ec4899;
    
    /* Gradient */
    --gradient-primary: linear-gradient(135deg, #8b5cf6, #a855f7, #ec4899);
    
    /* Brand Colors (Logo & Branding) */
    --color-brand-primary: #8b5cf6;
    --color-brand-secondary: #a855f7;
    --color-brand-accent: #ec4899;
    --gradient-brand: linear-gradient(135deg, #8b5cf6, #a855f7, #ec4899);
    
    /* Status Colors */
    --color-success: #10b981;
    --color-success-bg: rgba(16, 185, 129, 0.1);
    --color-warning: #f59e0b;
    --color-warning-bg: rgba(245, 158, 11, 0.1);
    --color-error: #ef4444;
    --color-danger: #ef4444;
    --color-danger-bg: rgba(239, 68, 68, 0.1);
    --color-info: #3b82f6;
    --color-info-bg: rgba(59, 130, 246, 0.1);
    
    /* Admin Colors */
    --color-admin: #dc2626;
    --color-admin-hover: #b91c1c;
    --color-admin-bg: rgba(220, 38, 38, 0.1);
    
    /* Component Colors */
    --card-bg: var(--color-bg-secondary);
    --card-border: var(--color-border-primary);
    --input-bg: var(--color-bg-tertiary);
    --input-border: var(--color-border-secondary);
    
    /* Shadows - Darker for dark theme */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --shadow-base: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ================================
   LIGHT THEME (Minimalist Clean Style)
   ================================ */
[data-theme="light"] {
    /* Background Colors - Pure white & minimal grays */
    --color-bg-primary: #fafafa;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #f5f5f5;
    --color-bg-hover: #eeeeee;
    --color-bg-elevated: #ffffff;
    
    /* Text Colors - High contrast */
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #525252;
    --color-text-tertiary: #737373;
    --color-text-muted: #a3a3a3;
    --color-text-disabled: #d4d4d4;
    --color-text-inverse: #ffffff;
    
    /* Border Colors - Subtle but visible */
    --color-border-primary: #e5e5e5;
    --color-border-secondary: #e5e5e5;
    --color-border-tertiary: #d4d4d4;
    
    /* Primary Colors (Buttons) - Pure black */
    --color-primary: #000000;
    --color-primary-hover: #1a1a1a;
    --color-primary-light: rgba(0, 0, 0, 0.06);
    --color-primary-dark: #000000;
    
    --color-secondary: #525252;
    --color-accent: #1a1a1a;
    
    /* Gradient - Simple dark gradient */
    --gradient-primary: linear-gradient(135deg, #000000, #1a1a1a);
    
    /* Brand Colors (Logo) - Purple accent */
    --color-brand-primary: #7c3aed;
    --color-brand-secondary: #9333ea;
    --color-brand-accent: #db2777;
    --gradient-brand: linear-gradient(135deg, #7c3aed, #9333ea, #db2777);
    
    /* Status Colors - Clean & bright */
    --color-success: #16a34a;
    --color-success-bg: #f0fdf4;
    --color-warning: #ea580c;
    --color-warning-bg: #fff7ed;
    --color-error: #dc2626;
    --color-danger: #dc2626;
    --color-danger-bg: #fef2f2;
    --color-info: #2563eb;
    --color-info-bg: #eff6ff;
    
    /* Admin Colors */
    --color-admin: #dc2626;
    --color-admin-hover: #b91c1c;
    --color-admin-bg: #fef2f2;
    
    /* Component Colors - Clean cards with subtle borders */
    --card-bg: var(--color-bg-secondary);
    --card-border: var(--color-border-primary);
    --input-bg: #ffffff;
    --input-border: var(--color-border-secondary);
    
    /* Shadows - Subtle but noticeable */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Smooth transitions for theme switching */
* {
    transition: var(--theme-transition);
}

/* Override transitions for elements that shouldn't animate */
*:focus,
*:active,
.no-transition {
    transition: none;
}