/**
 * NeutralAiz Design System Variables
 * Version: 1.0.0
 * 
 * CRITICAL: These are the EXACT values from the design system.
 * Do not modify these values - they define the complete visual language.
 */

:root {
    /* ============================================
       CORE BACKGROUND PALETTE
       Very dark grey with blue hint
       ============================================ */
    --color-bg-primary: #0a0a0f;      /* Base: Very dark grey with blue hint */
    --color-bg-secondary: #0d0d14;    /* Slightly lighter */
    --color-bg-tertiary: #111119;     /* Panel backgrounds */
    
    /* ============================================
       GLASS MORPHISM EFFECTS
       Critical for the aesthetic
       ============================================ */
    --color-glass-bg: rgba(15, 18, 25, 0.85);          /* Standard glass panels - darker */
    --color-glass-bg-hover: rgba(20, 25, 35, 0.9);     /* Hover state - darker */
    --color-glass-border: rgba(60, 70, 90, 0.4);       /* Visible borders - blue tinted */
    --color-glass-border-hover: rgba(80, 90, 110, 0.5);
    
    /* Enhanced Visibility Variants */
    --color-glass-bg-heavy: rgba(10, 12, 18, 0.95);    /* Chat/important sections - very dark */
    --color-input-bg: rgba(8, 10, 15, 0.9);            /* Form inputs - very dark */
    --color-input-border: rgba(50, 60, 80, 0.5);
    --color-button-bg: rgba(25, 30, 40, 0.8);          /* Buttons - darker */
    --color-button-border: rgba(70, 80, 100, 0.5);
    
    /* ============================================
       LAYERED CONTAINER SYSTEM
       Creates depth through opacity
       ============================================ */
    --color-container-1: rgba(10, 12, 20, 0.7);   /* 70% opacity - darker base */
    --color-container-2: rgba(10, 12, 20, 0.5);   /* 50% opacity */
    --color-container-3: rgba(10, 12, 20, 0.35);  /* 35% opacity */
    --color-container-4: rgba(10, 12, 20, 0.2);   /* 20% opacity */
    
    /* ============================================
       TEXT HIERARCHY
       Blue-tinted for coherence
       ============================================ */
    --color-text-primary: rgba(235, 240, 255, 0.92);    /* Bright blue-white */
    --color-text-secondary: rgba(205, 215, 245, 0.82);  /* Light blue-gray */
    --color-text-tertiary: rgba(175, 190, 225, 0.68);   /* Medium blue-gray */
    --color-text-disabled: rgba(145, 160, 195, 0.45);   /* Muted blue */
    
    /* ============================================
       ACCENT COLORS
       ============================================ */
    --color-accent-blue: #2563eb;
    --color-accent-blue-light: #3b82f6;
    --color-accent-blue-dark: #1e40af;
    --color-accent-yellow: #fbbf24;
    --color-accent-yellow-light: #fcd34d;
    --color-accent-yellow-dark: #f59e0b;
    
    /* Glow Effects */
    --color-accent-glow: rgba(37, 99, 235, 0.4);
    --color-accent-yellow-glow: rgba(251, 191, 36, 0.4);
    
    /* ============================================
       STATUS INDICATORS
       ============================================ */
    --color-live: #ff3333;                          /* Live/Recording */
    --color-success: rgba(34, 197, 94, 0.8);
    --color-warning: rgba(251, 191, 36, 0.8);
    --color-error: rgba(239, 68, 68, 0.8);
    --color-info: rgba(59, 130, 246, 0.8);
    
    /* ============================================
       SYNTAX HIGHLIGHTING (for code viewers)
       ============================================ */
    --color-syntax-keyword: #569cd6;      /* Blue for keywords */
    --color-syntax-string: #ce9178;       /* Orange for strings */
    --color-syntax-number: #b5cea8;       /* Green for numbers */
    --color-syntax-comment: #6a9955;      /* Green for comments */
    --color-syntax-property: #9cdcfe;     /* Light blue for properties */
    --color-syntax-tag: #569cd6;          /* Blue for HTML/XML tags */
    --color-syntax-attribute: #9cdcfe;    /* Light blue for attributes */
    
    /* ============================================
       ADDITIONAL UI COLORS
       ============================================ */
    --color-highlight-yellow: #ffeb3b;    /* Search highlight */
    --color-overlay-dark: rgba(0, 0, 0, 0.7);
    --color-overlay-heavy: rgba(0, 0, 0, 0.9);
    --color-white-10: rgba(255, 255, 255, 0.1);
    --color-white-20: rgba(255, 255, 255, 0.2);
    --color-white-30: rgba(255, 255, 255, 0.3);
    --color-white-40: rgba(255, 255, 255, 0.4);
    --color-white-70: rgba(255, 255, 255, 0.7);
    --color-black-20: rgba(0, 0, 0, 0.2);
    --color-black-80: rgba(0, 0, 0, 0.8);
    
    /* ============================================
       TYPOGRAPHY
       ============================================ */
    --font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 
                          'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 
                          'Helvetica Neue', sans-serif;
    --font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 
                        'Fira Mono', 'Roboto Mono', monospace;
    
    /* Font Sizes - Larger for Readability */
    --font-size-xs: 14px;   /* Minimum size */
    --font-size-sm: 16px;   /* Body text */
    --font-size-md: 18px;   /* Emphasized body */
    --font-size-lg: 20px;   /* Small headers */
    --font-size-xl: 24px;   /* Section headers */
    --font-size-2xl: 28px;  /* Major headers */
    --font-size-3xl: 36px;  /* Page titles */
    
    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line Heights */
    --line-height-tight: 1.15;    /* Headers */
    --line-height-normal: 1.3;    /* Body text */
    --line-height-relaxed: 1.5;   /* Long-form content */
    
    /* Letter Spacing */
    --letter-spacing-ui: 0.5px;   /* UI elements */
    --letter-spacing-body: 0;     /* Body text */
    
    /* ============================================
       SPACING SCALE
       Tight, compact design
       ============================================ */
    --spacing-xs: 2px;    /* Micro adjustments */
    --spacing-sm: 4px;    /* Between related elements */
    --spacing-md: 8px;    /* Standard gap */
    --spacing-lg: 12px;   /* Section spacing */
    --spacing-xl: 16px;   /* Component padding */
    --spacing-2xl: 20px;  /* Major sections */
    --spacing-3xl: 24px;  /* Page margins */
    
    /* ============================================
       BLUR EFFECTS
       Critical for glass look
       ============================================ */
    --blur-sm: 8px;    /* Subtle glass */
    --blur-md: 12px;   /* Standard panels */
    --blur-lg: 20px;   /* Important elements */
    --blur-xl: 30px;   /* Modal overlays */
    
    /* ============================================
       BORDER RADIUS
       Sharp, minimal corners
       ============================================ */
    --radius-xs: 2px;     /* Buttons, inputs */
    --radius-sm: 3px;     /* Cards, panels */
    --radius-md: 4px;     /* Modals, dropdowns */
    --radius-lg: 6px;     /* Large containers */
    --radius-full: 9999px; /* Pills, badges */
    
    /* ============================================
       TRANSITIONS
       ============================================ */
    --transition-fast: 150ms ease;    /* Hover states */
    --transition-normal: 250ms ease;  /* Panel changes */
    --transition-slow: 350ms ease;    /* Modal animations */
    
    /* ============================================
       SHADOWS
       Dark theme optimized
       ============================================ */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 20px var(--color-accent-glow);
    
    /* ============================================
       Z-INDEX SCALE
       ============================================ */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-popover: 500;
    --z-tooltip: 600;
    --z-notification: 700;
    
    /* ============================================
       COMPONENT HEIGHTS
       Minimum touch targets
       ============================================ */
    --height-button: 42px;
    --height-input: 42px;
    --height-status-bar: 40px;
    --height-row: 48px;
    
    /* ============================================
       BREAKPOINTS
       ============================================ */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* ============================================
   GLASS MORPHISM MIXIN
   Use this class for all glass panels
   ============================================ */
.glass {
    background: var(--color-glass-bg);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));  /* Safari support */
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
}

.glass:hover {
    background: var(--color-glass-bg-hover);
    border-color: var(--color-glass-border-hover);
}

/* Heavy glass for important sections */
.glass-heavy {
    background: var(--color-glass-bg-heavy);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border: 1px solid var(--color-glass-border);
}

/* ============================================
   TYPOGRAPHY UTILITIES
   ============================================ */
.text-ui {
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-ui);
    font-weight: var(--font-weight-medium);
}

.text-primary {
    color: var(--color-text-primary);
}

.text-secondary {
    color: var(--color-text-secondary);
}

.text-tertiary {
    color: var(--color-text-tertiary);
}

.text-disabled {
    color: var(--color-text-disabled);
}

/* ============================================
   FOCUS STATES
   Accessibility compliant
   ============================================ */
:focus-visible {
    outline: 2px solid var(--color-accent-blue);
    outline-offset: 2px;
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
}

::-webkit-scrollbar-thumb {
    background: rgba(100, 110, 130, 0.4);
    border-radius: var(--radius-md);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(120, 130, 150, 0.6);
}

/* ============================================
   SELECTION STYLES
   ============================================ */

::selection {
    background-color: var(--color-accent-blue);
    color: var(--color-text-primary);
}

::-moz-selection {
    background-color: var(--color-accent-blue);
    color: var(--color-text-primary);
}

/* ============================================
   ANIMATION KEYFRAMES
   ============================================ */
@keyframes pulse-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(10px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}