/**
 * Lamyx Design System: variables.css
 * Core Design Tokens & Visual Identity System
 */

:root {
    /* --- COLOR PALETTE (PRESERVED) --- */
    --base-white: #ffffff;
    --surface-light: #f8fafc;
    --surface-card: rgba(255, 255, 255, 0.85);
    
    /* Branding Colors */
    --brand-purple: #5A2DA0;
    --brand-purple-light: rgba(90, 45, 160, 0.05);
    --tech-cyan: #31C2C4;
    --tech-turquoise: #49D1D3; /* preserved logo cyan/turquoise */
    --neon-purple: #8B5CF6;
    
    /* Semantic Colors */
    --neon-green: #22c55e; /* Premium active success state */
    --neon-green-hover: #16a34a;
    --error-red: #ef4444;
    
    /* Typography Colors */
    --text-charcoal: #0f172a; /* Slate 900 */
    --text-muted: #475569; /* Slate 600 */
    --muted-gray: #64748b; /* Slate 500 */
    
    /* Borders & Dividers */
    --border-light: rgba(90, 45, 160, 0.08);
    --border-glass: rgba(255, 255, 255, 0.2);
    
    /* --- TYPOGRAPHY SYSTEM --- */
    --font-arabic: 'IBM Plex Sans Arabic', 'Cairo', sans-serif;
    --font-english: 'Inter', sans-serif;
    
    /* Fluid Typographic Clamps (Responsive sizes without media queries) */
    --fluid-h1: clamp(2.25rem, 8vw, 4.25rem);
    --fluid-h2: clamp(1.75rem, 6vw, 3rem);
    --fluid-h3: clamp(1.25rem, 4vw, 2rem);
    --fluid-p: clamp(0.95rem, 2vw, 1.15rem);
    --fluid-small: clamp(0.75rem, 1.5vw, 0.875rem);
    
    /* --- SPACING & LAYOUT SYSTEM --- */
    --section-pad: clamp(4rem, 10vw, 8rem);
    --container-max-width: 1200px;
    --grid-gap: 2rem;
    
    /* --- SHADOWS & GLOWS --- */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 10px 30px rgba(90, 45, 160, 0.04);
    --shadow-lg: 0 20px 50px rgba(90, 45, 160, 0.08);
    --shadow-glow-purple: 0 8px 30px rgba(90, 45, 160, 0.2);
    --shadow-glow-cyan: 0 8px 30px rgba(49, 194, 196, 0.2);
    
    /* --- BORDER RADIUS --- */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-premium: 32px; /* For bento grids & large panels */
}