:root {
    /* ========== COLORS: DARK MODE ========== */
    --bg-primary: #09090b;
    --bg-secondary: #111318;
    --bg-tertiary: #1a1d23;
    --bg-panel: rgba(17, 19, 24, 0.6);
    --bg-hover: rgba(30, 32, 40, 0.8);
    
    /* Text colors */
    --text-primary: #f8f9fa;
    --text-secondary: #a0aec0;
    --text-tertiary: #718096;
    
    /* Accent colors - Vibrant indigo & emerald */
    --accent-primary: #6366f1;
    --accent-secondary: #ec4899;
    --accent-success: #10b981;
    --accent-warning: #f59e0b;
    --accent-error: #ef4444;
    --accent-info: #0ea5e9;
    
    --accent-primary-hover: #4f46e5;
    --accent-secondary-hover: #db2777;
    --accent-success-hover: #059669;
    
    /* Borders & dividers */
    --border-subtle: rgba(148, 163, 184, 0.1);
    --border-light: rgba(148, 163, 184, 0.2);
    --border-medium: rgba(148, 163, 184, 0.3);
    --border-dark: #2d3748;
    
    /* ========== TYPOGRAPHY ========== */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    --font-mono: 'Fira Code', 'JetBrains Mono', 'Monaco', 'Menlo', monospace;
    
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* ========== SPACING ========== */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 2.5rem;
    --spacing-3xl: 3rem;
    
    /* ========== SHADOWS ========== */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px 0 rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px 0 rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 12px 32px 0 rgba(0, 0, 0, 0.7);
    
    --shadow-glow-indigo: 0 0 20px rgba(99, 102, 241, 0.3);
    --shadow-glow-emerald: 0 0 20px rgba(16, 185, 129, 0.3);
    
    /* ========== TRANSITIONS ========== */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ========== BORDER RADIUS ========== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    
    /* ========== BACKDROP & GLASS ========== */
    --backdrop-blur: blur(10px);
    --backdrop-blur-light: blur(6px);
}

:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}