/* 
===============================================================================
WIND LOAD SOLUTIONS - DESIGN SYSTEM VARIABLES
Foundation CSS variables extracted from your existing wind_styles.css
Save as: /webapp/assets/base/variables.css
===============================================================================
*/

:root {
    /* ===== BRAND COLORS ===== */
    /* Primary Blues - Your existing color system */
    --primary-blue: #3b82f6;
    --primary-blue-dark: #2563eb;
    --primary-blue-darker: #1d4ed8;
    --primary-blue-light: #60a5fa;
    --primary-blue-lighter: #93c5fd;
    
    /* Success Greens */
    --success-green: #10b981;
    --success-green-dark: #059669;
    --success-green-darker: #047857;
    --success-green-light: #34d399;
    --success-green-lighter: #6ee7b7;
    
    /* Warning & Error */
    --warning-amber: #f59e0b;
    --warning-amber-dark: #d97706;
    --warning-amber-light: #fbbf24;
    --danger-red: #ef4444;
    --danger-red-dark: #dc2626;
    --danger-red-light: #f87171;
    
    /* Purple Accent */
    --purple-accent: #8b5cf6;
    --purple-accent-dark: #7c3aed;
    --purple-accent-light: #c084fc;
    
    /* ===== BACKGROUND SYSTEM ===== */
    /* Main gradients from your existing system */
    --bg-primary: linear-gradient(180deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    --bg-secondary: linear-gradient(135deg, #0f172a, #1e293b);
    
    /* Glass morphism system */
    --bg-glass: rgba(255, 255, 255, 0.08);
    --bg-glass-hover: rgba(255, 255, 255, 0.12);
    --bg-glass-active: rgba(255, 255, 255, 0.15);
    --bg-glass-strong: rgba(255, 255, 255, 0.1);
    
    /* Backdrop effects */
    --backdrop-blur: blur(20px) saturate(180%);
    --backdrop-blur-strong: blur(25px) saturate(200%);
    --backdrop-blur-light: blur(15px) saturate(160%);
    
    /* Gradient overlays */
    --gradient-primary: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(16, 185, 129, 0.15) 100%);
    --gradient-success: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%);
    --gradient-warning: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.15) 100%);
    --gradient-danger: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.15) 100%);
    --gradient-purple: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(124, 58, 237, 0.15) 100%);
    
    /* ===== TYPOGRAPHY SYSTEM ===== */
    /* Font family */
    --font-family: 'Inter', sans-serif;
    
    /* Font weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    
    /* Font sizes - Responsive scale */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */
    --text-4xl: 2.25rem;    /* 36px */
    --text-5xl: 3rem;       /* 48px */
    
    /* Line heights */
    --leading-tight: 1.1;
    --leading-normal: 1.4;
    --leading-relaxed: 1.5;
    --leading-loose: 1.6;
    
    /* Letter spacing */
    --tracking-tight: -0.025em;
    --tracking-normal: 0em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    
    /* ===== TEXT COLORS ===== */
    --text-white: #ffffff;
    --text-light: #e2e8f0;
    --text-muted: #94a3b8;
    --text-dark: #1e293b;
    --text-darker: #0f172a;
    
    /* Semantic text colors */
    --text-primary: var(--primary-blue-light);
    --text-success: var(--success-green-light);
    --text-warning: var(--warning-amber-light);
    --text-danger: var(--danger-red-light);
    
    /* ===== SPACING SYSTEM ===== */
    /* Based on 8px grid system */
    --spacing-0: 0;
    --spacing-1: 0.25rem;   /* 4px */
    --spacing-2: 0.5rem;    /* 8px */
    --spacing-3: 0.75rem;   /* 12px */
    --spacing-4: 1rem;      /* 16px */
    --spacing-5: 1.25rem;   /* 20px */
    --spacing-6: 1.5rem;    /* 24px */
    --spacing-8: 2rem;      /* 32px */
    --spacing-10: 2.5rem;   /* 40px */
    --spacing-12: 3rem;     /* 48px */
    --spacing-16: 4rem;     /* 64px */
    --spacing-20: 5rem;     /* 80px */
    
    /* Semantic spacing names */
    --spacing-xs: var(--spacing-2);    /* 8px */
    --spacing-sm: var(--spacing-3);    /* 12px */
    --spacing-md: var(--spacing-5);    /* 20px */
    --spacing-lg: var(--spacing-8);    /* 32px */
    --spacing-xl: var(--spacing-10);   /* 40px */
    --spacing-2xl: var(--spacing-12);  /* 48px */
    --spacing-3xl: var(--spacing-16);  /* 64px */
    
    /* ===== BORDER RADIUS SYSTEM ===== */
    --radius-none: 0;
    --radius-sm: 0.375rem;   /* 6px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-xl: 1rem;       /* 16px */
    --radius-2xl: 1.25rem;   /* 20px */
    --radius-3xl: 1.5rem;    /* 24px */
    --radius-full: 9999px;
    
    /* ===== BORDER COLORS ===== */
    --border-light: rgba(255, 255, 255, 0.1);
    --border-medium: rgba(255, 255, 255, 0.15);
    --border-strong: rgba(255, 255, 255, 0.2);
    --border-primary: rgba(59, 130, 246, 0.3);
    --border-success: rgba(16, 185, 129, 0.3);
    --border-warning: rgba(245, 158, 11, 0.3);
    --border-danger: rgba(239, 68, 68, 0.3);
    
    /* ===== SHADOW SYSTEM ===== */
    /* Card shadows */
    --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --shadow-card-hover: 0 20px 50px rgba(0, 0, 0, 0.25), 0 8px 32px rgba(59, 130, 246, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    
    /* Button shadows */
    --shadow-button: 0 4px 15px rgba(59, 130, 246, 0.3);
    --shadow-button-hover: 0 8px 25px rgba(59, 130, 246, 0.4);
    --shadow-button-success: 0 4px 15px rgba(16, 185, 129, 0.3);
    --shadow-button-warning: 0 4px 15px rgba(245, 158, 11, 0.3);
    --shadow-button-danger: 0 4px 15px rgba(239, 68, 68, 0.3);
    
    /* Input shadows */
    --shadow-input: 0 4px 15px rgba(0, 0, 0, 0.1);
    --shadow-input-focus: 0 0 0 3px rgba(59, 130, 246, 0.2), 0 8px 25px rgba(59, 130, 246, 0.15);
    
    /* ===== TRANSITION SYSTEM ===== */
    --transition-fast: all 0.2s ease;
    --transition-normal: all 0.3s ease;
    --transition-slow: all 0.4s ease;
    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ===== Z-INDEX SYSTEM ===== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-toast: 800;
    --z-sidebar: 1000;
    --z-menu-toggle: 1001;
    
    /* ===== LAYOUT SYSTEM ===== */
    /* Container max widths */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
    --container-full: 100%;
    
    /* Sidebar widths */
    --sidebar-width: 380px;
    --sidebar-collapsed: 60px;
    
    /* Header heights */
    --header-height: 80px;
    --header-compact: 60px;
    
    /* ===== COMPONENT SIZES ===== */
    /* Button heights */
    --button-sm: 36px;
    --button-md: 44px;
    --button-lg: 52px;
    
    /* Input heights */
    --input-sm: 36px;
    --input-md: 44px;
    --input-lg: 52px;
    
    /* Icon sizes */
    --icon-xs: 14px;
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;
    --icon-xl: 32px;
    
    /* ===== AI ASSISTANT COLORS ===== */
    --ai-bg: rgba(139, 92, 246, 0.1);
    --ai-border: rgba(139, 92, 246, 0.3);
    --ai-text: #c084fc;
    --ai-accent: var(--purple-accent);
}