/*
 * BALANTIUM DESIGN SYSTEM - Spectral Coherence
 * Mathematical precision: Golden ratio, Fibonacci sequences, harmonic color theory
 * Visual organism matching the biological backend
 */

:root {
    /* Spectral Coherence Palette */
    --midnight-graphite: #0D0E10;
    --balantium-blue: #1E2456;
    --violet-resonance: #7A3BE4;
    --aqua-scatter: #31E3E0;
    
    /* Gradient Definitions */
    --gradient-primary: linear-gradient(135deg, #0D0E10 0%, #1E2456 35%, #7A3BE4 70%, #31E3E0 100%);
    --gradient-radial: radial-gradient(circle at center, #1E2456 0%, #0D0E10 70%);
    --gradient-subtle: linear-gradient(135deg, rgba(30, 36, 86, 0.1) 0%, rgba(122, 59, 228, 0.05) 100%);
    
    /* Semantic Colors */
    --primary: #7A3BE4;
    --primary-dark: #5A2BAA;
    --primary-light: #9A5BFF;
    --accent: #31E3E0;
    --accent-dark: #20B3B0;
    --accent-light: #51F3F0;
    
    /* Background System */
    --background: #0D0E10;
    --surface: #1A1C24;
    --surface-elevated: #252836;
    --surface-glass: rgba(26, 28, 36, 0.85);
    
    /* Border & Divider System */
    --border: rgba(122, 59, 228, 0.15);
    --border-light: rgba(122, 59, 228, 0.08);
    --border-glow: rgba(122, 59, 228, 0.5);
    
    /* Text Hierarchy - Scientific Precision */
    --text-primary: #B8BAC0;
    --text-secondary: #8A8C90;
    --text-tertiary: #6B6D70;
    
    /* Status Colors - Spectral */
    --success: #31E3E0;
    --warning: #F59E0B;
    --error: #FF6B9D;
    --info: #7A3BE4;
    
    /* Typography System - Scientific Precision */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Can upgrade to Satoshi/Neue Haas Grotesk */
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    
    /* Golden Ratio Typography Scale (φ = 1.618) - Refined for readability */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px - base */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.5rem;       /* 24px */
    --text-2xl: 2rem;        /* 32px */
    --text-3xl: 2.5rem;      /* 40px */
    --text-4xl: 3rem;        /* 48px */
    --text-hero: 3.5rem;     /* 56px */
    
    /* Font Weights */
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;
    
    /* Fibonacci Spacing System - Natural Growth Sequence */
    --space-1: 0.5rem;    /* 8px - F(4) */
    --space-2: 0.8125rem; /* 13px - F(7) */
    --space-3: 1.313rem;  /* 21px - F(8) */
    --space-5: 2.125rem;  /* 34px - F(9) */
    --space-8: 3.438rem;  /* 55px - F(10) */
    --space-13: 5.563rem; /* 89px - F(11) */
    --space-21: 9rem;     /* 144px - F(12) */
    --space-34: 14.563rem;/* 233px - F(13) */
    
    /* Golden Ratio Spacing (φ-based) */
    --space-phi: 1.618rem;    /* φ × base */
    --space-phi-2: 2.618rem;  /* φ^2 */
    --space-phi-3: 4.236rem;  /* φ^3 */
    
    /* Border Radius */
    --radius-sm: 0.25rem;   /* 4px */
    --radius-md: 0.5rem;    /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-xl: 1rem;      /* 16px */
    --radius-2xl: 1.5rem;   /* 24px */
    --radius-full: 9999px;
    
    /* Spectral Shadow & Glow System */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
    
    /* Spectral Glow Effects */
    --glow-violet: 0 0 20px rgba(122, 59, 228, 0.5), 0 0 40px rgba(122, 59, 228, 0.3);
    --glow-aqua: 0 0 20px rgba(49, 227, 224, 0.5), 0 0 40px rgba(49, 227, 224, 0.3);
    --glow-subtle: 0 0 30px rgba(122, 59, 228, 0.15);
    --glow-pulse: 0 0 40px rgba(122, 59, 228, 0.4);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-slower: 500ms ease;
    
    /* Z-Index Layers */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    
    /* Breakpoints (for reference in media queries) */
    --breakpoint-mobile: 640px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-wide: 1280px;
    --breakpoint-ultrawide: 1536px;
    
    /* Container Widths - Golden Ratio Based */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1036px;  /* 640 × φ */
    --container-xl: 1280px;
    --container-wide: 1680px; /* 1036 × φ */
    
    /* Particle System for Background */
    --particle-count: 50;
    --particle-opacity: 0.02;
    --particle-speed: 60s;
}

/* Animation Keyframes for Living System Energy */
@keyframes spectral-pulse {
    0%, 100% {
        box-shadow: var(--glow-subtle);
    }
    50% {
        box-shadow: var(--glow-pulse);
    }
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes float-particle {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: var(--particle-opacity);
    }
    50% {
        transform: translateY(-20px) translateX(10px);
        opacity: calc(var(--particle-opacity) * 1.5);
    }
}

/* Harmonic Navigation Reveal - Resonant fade-in sequence */
@keyframes harmonicFade {
    0% {
        opacity: 0;
        transform: translateY(-10px);
        filter: blur(4px);
    }
    60% {
        opacity: 0.5;
        transform: translateY(4px);
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Glow Pulse for Navigation Hover */
@keyframes glowPulse {
    0%, 100% { 
        text-shadow: 0 0 0 rgba(49, 227, 224, 0); 
    }
    50% { 
        text-shadow: 0 0 6px rgba(49, 227, 224, 0.6); 
    }
}