/* Blueprint AI - CSS Variables & Theme System */

/* CSS Custom Properties (Variables) */
:root {
    /* Background Colors - Light Mode */
    --background: #f5f7fa;
    --background-card: #E5E7EB;
    --background-secondary: #f9fafb;
    --background-tertiary: #eef1f6;
    --background-hover: #f9fafb;
    --background-overlay: rgba(0, 0, 0, 0.5);
    
    /* Text Colors - Light Mode */
    --text-primary: #19202b;
    --text-secondary: #374151;
    --text-tertiary: #4b515c;
    --text-muted: #9ca3af;
    --text-inverse: #ffffff;
    
    /* Border Colors - Light Mode */
    --border-primary: #d1d5db;
    --border-secondary: #9ca3af;
    --border-focus: #3b82f6;
    
    /* Brand Colors - Light Mode */
    --primary: #3b82f6;
    --primary-hover: #2563eb;
    --primary-light: #eff6ff;
    
    /* Status Colors - Light Mode */
    --success: #10b981;
    --success-light: #f0fdf4;
    --warning: #f59e0b;
    --warning-light: #fffbeb;
    --error: #ef4444;
    --error-light: #fef2f2;
    --danger: #ef4444;
    --danger-hover: #dc2626;
    --info: #06b6d4;
    --info-light: #ecfeff;
    --send-btn: #3b82f6;
    
    /* Tool Colors - Light Mode */
    --tool-blue: #3b82f6;
    --tool-green: #10b981;
    --tool-yellow: #f59e0b;
    --tool-red: #ef4444;
    --tool-purple: #8b5cf6;
    --tool-cyan: #06b6d4;
    --tool-lime: #84cc16;
    --tool-orange: #f97316;
    
    /* Shadow Colors - Light Mode */
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --shadow-dark: rgba(0, 0, 0, 0.2);
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    
    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.975rem;
    --text-base: 1.075rem;
    --text-lg: 1.175rem;
    --text-xl: 1.275rem;
    --text-2xl: 1.575rem;
    --text-logo: 22px;
    
    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-medium-bold: 550;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
}

/* Dark Mode Variables */
[data-theme="dark"] {
    /* Background Colors - Dark Mode */
    --background: #1A1D20;
    --background-card: #212429;
    --background-secondary: #262a30;
    --background-tertiary: #31363d;
    --background-hover: #1e293b;
    --background-overlay: rgba(0, 0, 0, 0.7);
    
    /* Text Colors - Dark Mode */
    --text-primary: #f8fafc;
    --text-secondary: #e2e8f0;
    --text-tertiary: #cbd5e1;
    --text-muted: #9ca3af;
    --text-inverse: #22262B;
    
    /* Border Colors - Dark Mode */
    --border-primary: #475569;
    --border-secondary: #64748b;
    --border-focus: #60a5fa;
    
    /* Brand Colors - Dark Mode */
    --primary: #60a5fa;
    --primary-hover: #3b82f6;
    --primary-light: #1e3a8a;
    
    /* Status Colors - Dark Mode */
    --success: #34d399;
    --success-light: #064e3b;
    --warning: #fbbf24;
    --warning-light: #78350f;
    --error: #f87171;
    --error-light: #7f1d1d;
    --danger: #f87171;
    --danger-hover: #ef4444;
    --info: #22d3ee;
    --info-light: #0e7490;
    
    /* Tool Colors - Dark Mode */
    --tool-blue: #60a5fa;
    --tool-green: #34d399;
    --tool-yellow: #fbbf24;
    --tool-red: #f87171;
    --tool-purple: #a78bfa;
    --tool-cyan: #22d3ee;
    --tool-lime: #a3e635;
    --tool-orange: #fb923c;
    
    /* Shadow Colors - Dark Mode */
    --shadow-light: rgba(0, 0, 0, 0.3);
    --shadow-medium: rgba(0, 0, 0, 0.4);
    --shadow-dark: rgba(0, 0, 0, 0.5);
}

/* Blueprint Theme Variables */
[data-theme="blueprint"] {
    /* Background Colors - Blueprint Theme */
    --background: #011747;
    --background-card: #091E4D;
    --background-secondary: #0a1f3a;
    --background-tertiary: #091E4D;
    --background-hover: #0a1f3a;
    --background-overlay: rgba(0, 0, 0, 0.8);
    
    /* Text Colors - Blueprint Theme */
    --text-primary: #ffffff;
    --text-secondary: #e2e8f0;
    --text-tertiary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-inverse: #011747;
    
    /* Border Colors - Blueprint Theme */
    --border-primary: #1a2f4a;
    --border-secondary: #2a3f5a;
    --border-focus: #FFC400;
    
    /* Brand Colors - Blueprint Theme */
    --primary: #FFC400;
    --primary-hover: #e6b000;
    --primary-light: #1a2f4a;
    
    /* Status Colors - Blueprint Theme */
    --success: #10b981;
    --success-light: #065f46;
    --warning: #f59e0b;
    --warning-light: #92400e;
    --error: #ef4444;
    --error-light: #991b1b;
    --danger: #ef4444;
    --danger-hover: #dc2626;
    --info: #06b6d4;
    --info-light: #155e75;
    
    /* Tool Colors - Blueprint Theme */
    --tool-blue: #3b82f6;
    --tool-green: #10b981;
    --tool-yellow: #f59e0b;
    --tool-red: #ef4444;
    --tool-purple: #8b5cf6;
    --tool-cyan: #06b6d4;
    --tool-lime: #84cc16;
    --tool-orange: #f97316;
    
    /* Shadow Colors - Blueprint Theme */
    --shadow-light: rgba(0, 0, 0, 0.4);
    --shadow-medium: rgba(0, 0, 0, 0.5);
    --shadow-dark: rgba(0, 0, 0, 0.6);
}

/* Theme Transition Animation */
* {
    transition: background-color var(--transition-normal), 
                color var(--transition-normal), 
                border-color var(--transition-normal);
}

/* Font Family */
body {
    font-family: 'Roboto', sans-serif;
}