/**
 * AIGF Plugin - Centralized CSS Variables
 * Single source of truth for all design tokens
 * Version: 1.0.0
 */

:root {
    /* ========================================================================
       Color Palette - Purple/Neon Theme
       ======================================================================== */
    
    /* Primary Colors */
    --bg-1: #0b0720;
    --bg-2: #140b3a;
    --primary: #9B5DE5;
    --accent: #B388FF;
    --neon: #C77DFF;
    --text: #E9E7FE;
    --muted: #B9B4D9;
    
    /* Extended Purple Palette */
    --primary1: #6B46C1;
    --secondary1: #8B5CF6;
    --accent1: #A78BFA;
    --light-purple1: #DDD6FE;
    --dark-purple1: #4C1D95;
    --neon-purple: #9B5DE5;
    
    /* Text Colors */
    --text-light1: #FFFFFF;
    --text-dim1: #E5E7EB;
    --text-muted1: #9CA3AF;
    --text-dark: #333333;
    --text-medium: #666666;
    --text-gray: #495057;
    
    /* Accent Colors */
    --electric-blue: #00F5D4;
    
    /* Semantic Colors */
    --error: #FF6B9D;
    --error-bg: rgba(255, 107, 157, 0.1);
    --error-border: rgba(255, 107, 157, 0.3);
    --error-dark: #721c24;
    
    --success: #64FFDA;
    --success-bg: rgba(100, 255, 218, 0.1);
    --success-light: #d4edda;
    --success-dark: #155724;
    
    --warning: #ffc107;
    --warning-bg: #fff3cd;
    --warning-dark: #856404;
    
    --info: #17a2b8;
    --info-light: #d1ecf1;
    --info-dark: #0c5460;
    
    /* Glass Morphism */
    --glass-bg: rgba(139, 92, 246, 0.1);
    --glass-border: rgba(167, 139, 250, 0.2);
    
    /* Gradients */
    --bg-gradient1: linear-gradient(135deg, #1E1B4B 0%, #0F0F23 100%);
    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--neon) 100%);
    --gradient-accent: linear-gradient(135deg, var(--accent1) 0%, var(--primary) 100%);
    --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    /* ========================================================================
       Z-Index Scale
       ======================================================================== */
    
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-notification: 800;
    
    /* ========================================================================
       Spacing Scale
       ======================================================================== */
    
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    
    /* ========================================================================
       Icon Sizes
       ======================================================================== */
    
    --icon-xs: 12px;
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;
    --icon-xl: 32px;
    --icon-2xl: 48px;
    
    /* ========================================================================
       Typography
       ======================================================================== */
    
    /* Font Families */
    --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'Courier New', Courier, monospace;
    
    /* Font Sizes - Fluid Typography */
    --font-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);      /* 12-14px */
    --font-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);        /* 14-16px */
    --font-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);      /* 16-18px */
    --font-md: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);         /* 18-20px */
    --font-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);        /* 20-24px */
    --font-xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);          /* 24-32px */
    --font-2xl: clamp(2rem, 1.5rem + 2vw, 2.5rem);             /* 32-40px */
    --font-3xl: clamp(2.5rem, 2rem + 2.5vw, 3rem);             /* 40-48px */
    
    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* ========================================================================
       Border Radius
       ======================================================================== */
    
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 50%;
    --radius-pill: 999px;
    
    /* ========================================================================
       Shadows
       ======================================================================== */
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
    --shadow-glow: 0 0 20px rgba(155, 93, 229, 0.4);
    --shadow-glow-strong: 0 8px 32px rgba(155, 93, 229, 0.3);
    
    /* ========================================================================
       Transitions
       ======================================================================== */
    
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-all: all 0.3s ease;
    
    /* ========================================================================
       Breakpoints (for use in JS)
       ======================================================================== */
    
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
}

/* ========================================================================
   Dark Mode Support (Prefers Color Scheme)
   Note: Current design is optimized for dark theme by default
   ======================================================================== */

/* ========================================================================
   Reduced Motion Support
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================================================
   Print Styles
   ======================================================================== */

@media print {
    :root {
        --bg-1: #ffffff;
        --bg-2: #f8f9fa;
        --text: #000000;
        --text-light1: #000000;
    }
}
