/* ==========================================
   CYBER LUX THEME - CSS VARIABLES
   Global design tokens for AppList.AI
   ========================================== */

:root {
    /* ========================================
       SOLANA-INSPIRED COLOR PALETTE
       ======================================== */
    
    /* Primary Brand Colors */
    --color-primary: #14F195;          /* Solana Green - Execute buttons, success */
    --color-secondary: #9945FF;        /* Solana Purple - Brand accent */
    --color-tertiary: #00D4AA;         /* Solana Teal - Processing states */
    --color-accent: #19FB9B;           /* Light Cyan - Links, highlights */
    
    /* Status Colors */
    --status-queued: #FFB84D;          /* Orange - Agent queued */
    --status-processing: #00D4AA;      /* Teal - Agent processing */
    --status-completed: #14F195;       /* Green - Completed successfully */
    --status-failed: #FF4444;          /* Red - Execution failed */
    --status-refunded: #8892b0;        /* Gray - Credits refunded */
    
    /* Background Colors */
    --bg-primary: #0D0D0D;             /* Deep Black - Primary background */
    --bg-secondary: #1a1a2e;           /* Dark Navy - Cards, surfaces */
    --bg-tertiary: #16213e;            /* Slate Blue - Elevated surfaces */
    --bg-quaternary: #0f3460;          /* Dark Blue - Hover states */
    
    /* Glass Morphism */
    --glass-bg: rgba(255, 255, 255, 0.05);        /* Glass base */
    --glass-bg-hover: rgba(255, 255, 255, 0.08);  /* Glass hover */
    --glass-border: rgba(255, 255, 255, 0.1);     /* Glass borders */
    --glass-border-hover: rgba(20, 241, 149, 0.3); /* Glass hover border */
    
    /* Text Colors */
    --text-primary: #FFFFFF;                      /* Primary text */
    --text-secondary: rgba(255, 255, 255, 0.7);   /* Secondary text */
    --text-tertiary: #8892b0;                     /* Muted text */
    --text-disabled: #475569;                     /* Disabled text */
    --text-highlight: #64ffda;                    /* Highlighted text */
    
    /* Cyber Accent Colors */
    --cyber-cyan: #64ffda;                        /* Cyber highlights */
    --cyber-magenta: #ff64da;                     /* Alternative accent */
    --neon-green: #39FF14;                        /* Neon glow for active */
    
    /* Border Colors */
    --border-subtle: rgba(255, 255, 255, 0.1);    /* Subtle borders */
    --border-primary: rgba(20, 241, 149, 0.2);    /* Primary borders */
    --border-hover: rgba(20, 241, 149, 0.5);      /* Hover borders */
    
    /* ========================================
       TYPOGRAPHY
       ======================================== */
    
    /* Font Families */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Space Grotesk', 'Inter', sans-serif;
    --font-mono: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
    
    /* Font Sizes */
    --font-size-xs: 0.75rem;      /* 12px - Captions, credits */
    --font-size-sm: 0.875rem;     /* 14px - Helper text, metadata */
    --font-size-base: 1rem;       /* 16px - Body text */
    --font-size-lg: 1.125rem;     /* 18px - Large body */
    --font-size-xl: 1.25rem;      /* 20px - H6, small headers */
    --font-size-2xl: 1.5rem;      /* 24px - H4, component titles */
    --font-size-3xl: 2rem;        /* 32px - H3, category headers */
    --font-size-4xl: 2.5rem;      /* 40px - H2, section headers */
    --font-size-5xl: 3.5rem;      /* 56px - H1, hero text */
    
    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;
    --line-height-loose: 2;
    
    /* Letter Spacing */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    
    /* ========================================
       SPACING SYSTEM
       ======================================== */
    
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */
    
    /* ========================================
       BORDER RADIUS
       ======================================== */
    
    --radius-sm: 4px;
    --radius-base: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    
    /* ========================================
       SHADOWS
       ======================================== */
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-base: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5);
    
    /* Glow Shadows */
    --shadow-glow-primary: 0 0 20px rgba(20, 241, 149, 0.3);
    --shadow-glow-secondary: 0 0 20px rgba(153, 69, 255, 0.3);
    --shadow-glow-tertiary: 0 0 20px rgba(0, 212, 170, 0.3);
    
    /* ========================================
       Z-INDEX LAYERS
       ======================================== */
    
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1100;
    --z-fixed: 1200;
    --z-modal-backdrop: 1300;
    --z-modal: 1400;
    --z-popover: 1500;
    --z-header: 1500;
    --z-banner: 2000;
    --z-tooltip: 1600;
    --z-error-ui: 10000;
    
    /* ========================================
       TRANSITIONS
       ======================================== */
    
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-all: all 0.3s ease;
    
    /* ========================================
       ANIMATION DURATIONS
       ======================================== */
    
    --duration-instant: 0.1s;
    --duration-fast: 0.3s;
    --duration-normal: 0.5s;
    --duration-slow: 1s;
    --duration-slower: 2s;
    --duration-slowest: 3s;
    
    /* ========================================
       BREAKPOINTS (for reference in JS)
       ======================================== */
    
    --breakpoint-xs: 480px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* ==========================================
   UTILITY VARIABLE CLASSES
   ========================================== */

/* Background Utilities */
.bg-primary { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-tertiary { background-color: var(--bg-tertiary) !important; }
.bg-glass { background: var(--glass-bg) !important; }

/* Text Color Utilities */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }
.text-highlight { color: var(--text-highlight) !important; }
.text-green { color: var(--color-primary) !important; }
.text-purple { color: var(--color-secondary) !important; }
.text-teal { color: var(--color-tertiary) !important; }

/* Border Utilities */
.border-subtle { border: 1px solid var(--border-subtle) !important; }
.border-primary { border: 1px solid var(--border-primary) !important; }
.border-green { border: 1px solid var(--color-primary) !important; }

/* Font Family Utilities */
.font-sans { font-family: var(--font-sans) !important; }
.font-display { font-family: var(--font-display) !important; }
.font-mono { font-family: var(--font-mono) !important; }

/* Shadow Utilities */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-base { box-shadow: var(--shadow-base) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-glow-primary { box-shadow: var(--shadow-glow-primary) !important; }
.shadow-glow-secondary { box-shadow: var(--shadow-glow-secondary) !important; }

/* Transition Utilities */
.transition-fast { transition: var(--transition-fast) !important; }
.transition-base { transition: var(--transition-base) !important; }
.transition-slow { transition: var(--transition-slow) !important; }
.transition-all { transition: var(--transition-all) !important; }