/**
 * Neon Theme Variant - Enhanced Token-Based Version
 * 
 * Standalone theme variant that can be loaded independently.
 * Uses [data-theme="neon"] scope for activation.
 * CDN-compatible and opt-in via import or JS.
 * 
 * Enhanced with vibrant neon colors and glow effects.
 * 
 * @layer themes.variants
 */

@layer themes.variants {
  [data-theme="neon"] {
    /* Primary Colors - Vibrant neon cyan/pink theme */
    --color-primary: #0ff;
    --color-secondary: #f0f;
    
    /* Status Colors - Neon-enhanced status colors */
    --color-success: #0f0;
    --color-warning: #ff0;
    --color-error: #ff0040;
    --color-info: #00bfff;
    
    /* Text Colors - High contrast for neon theme */
    --color-text: #fff;
    --color-text-muted: #ccc;
    --color-text-inverse: #000;
    
    /* Surface Colors - Dark surfaces for neon glow */
    --color-background: #0a0a0a;
    --color-surface: #1a1a1a;
    --color-surface-elevated: #2a2a2a;
    
    /* Border Colors - Glowing neon borders */
    --color-border: #0ff;
    --color-border-strong: #f0f;
    
    /* Transition Colors for smooth animations */
    --color-transition-primary: #0ff;
    --color-transition-surface: #0a0a0a;
    --color-transition-text: #fff;
    
    /* Neon-specific theme properties with enhanced glow */
    --theme-neon-accent: #0ff;
    --theme-neon-glow: rgb(0 255 255 / 8000%);
    --theme-neon-gradient-start: var(--theme-gradient-start, #0ff);
    --theme-neon-gradient-end: var(--theme-gradient-end, #f0f);
    
    /* Enhanced focus and interaction states for neon theme */
    --color-focus: #0ff;
    --color-focus-glow: rgb(0 255 255 / 8000%);
    
    /* Enhanced shadow properties for neon glow effects */
    --shadow-color: var(--theme-shadow-color, rgb(0 255 255));
    --shadow-opacity-sm: 0.6;
    --shadow-opacity-md: 0.8;
    --shadow-opacity-lg: 1.0;
    --shadow-opacity-xl: 1.2;
    
    /* Strong backdrop for neon theme */
    --color-backdrop: rgb(0 0 0 / 9000%);
    --backdrop-blur: var(--theme-backdrop-blur, 8px);
    
    /* Neon-enhanced status background colors */
    --color-success-bg: rgb(0 255 0 / 1000%);
    --color-warning-bg: rgb(255 255 0 / 1000%);
    --color-error-bg: rgb(255 0 64 / 1000%);
    --color-info-bg: rgb(0 191 255 / 1000%);
    
    /* Neon status border colors with glow */
    --color-success-border: rgb(0 255 0 / 6000%);
    --color-warning-border: rgb(255 255 0 / 6000%);
    --color-error-border: rgb(255 0 64 / 6000%);
    --color-info-border: rgb(0 191 255 / 6000%);
    
    /* Enhanced interaction states for neon effects */
    --hover-opacity: 0.9;
    --hover-scale: var(--theme-hover-scale, 1.05);
    --active-opacity: 1.0;
    --active-scale: var(--theme-active-scale, 0.95);
    --disabled-opacity: 0.3;
    
    /* Faster transitions for responsive neon effects */
    --transition-fast: 100ms;
    --transition-normal: 200ms;
    --transition-slow: 300ms;
    --transition-ease-out: var(--theme-ease-out, cubic-bezier(0, 0, 0.2, 1));
    
    /* Neon-specific glow properties */
    --neon-glow-blur: 10px;
    --neon-glow-spread: 2px;
    --neon-pulse-duration: 2s;
    
    /* Surface overlay with neon tint */
    --color-surface-overlay: rgb(26 26 26 / 95%);
  }
}