/* ============================================
   AVACONNEX BRAND THEME VARIABLES
   Copper, Matte Black, and Neon Green
   ============================================ */

:root {
    /* PRIMARY BRAND COLORS */
    --color-copper: #B87333;
    --color-copper-light: #D4A574;
    --color-copper-dark: #8B5A2B;
    --color-copper-accent: #E8B88A;
    
    /* SECONDARY BRAND COLORS */
    --color-black: #1A1A1A;
    --color-black-light: #2D2D2D;
    --color-black-lighter: #404040;
    --color-black-dark: #0F0F0F;
    
    /* ACCENT BRAND COLORS */
    --color-neon-green: #39FF14;
    --color-neon-green-light: #7FFF4D;
    --color-neon-green-dark: #2DD60F;
    --color-neon-green-muted: #66FF33;
    
    /* SEMANTIC COLORS */
    --color-success: #39FF14;
    --color-danger: #FF4444;
    --color-warning: #FFB800;
    --color-info: #B87333;
    
    /* NEUTRAL COLORS */
    --color-white: #FFFFFF;
    --color-gray-50: #F9F9F9;
    --color-gray-100: #F3F3F3;
    --color-gray-200: #E8E8E8;
    --color-gray-300: #D3D3D3;
    --color-gray-400: #A8A8A8;
    --color-gray-500: #808080;
    --color-gray-600: #606060;
    --color-gray-700: #404040;
    --color-gray-800: #2D2D2D;
    --color-gray-900: #1A1A1A;
    
    /* TEXT COLORS */
    --text-primary: #1A1A1A;
    --text-secondary: #606060;
    --text-tertiary: #A8A8A8;
    --text-inverse: #FFFFFF;
    
    /* BACKGROUND COLORS */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F9F9F9;
    --bg-tertiary: #F3F3F3;
    --bg-dark: #1A1A1A;
    
    /* BORDER COLORS */
    --border-color: #E8E8E8;
    --border-color-dark: #D3D3D3;
    --border-color-light: #F3F3F3;
    
    /* SHADOW COLORS */
    --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.05);
    --shadow-md: 0 4px 6px rgba(26, 26, 26, 0.1);
    --shadow-lg: 0 10px 15px rgba(26, 26, 26, 0.15);
    --shadow-xl: 0 20px 25px rgba(26, 26, 26, 0.2);
    
    /* GRADIENTS */
    --gradient-copper: linear-gradient(135deg, #B87333 0%, #D4A574 100%);
    --gradient-copper-dark: linear-gradient(135deg, #8B5A2B 0%, #B87333 100%);
    --gradient-neon: linear-gradient(135deg, #39FF14 0%, #7FFF4D 100%);
    --gradient-dark: linear-gradient(135deg, #1A1A1A 0%, #2D2D2D 100%);
    --gradient-copper-neon: linear-gradient(135deg, #B87333 0%, #39FF14 100%);
    
    /* SPACING */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* BORDER RADIUS */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;
    
    /* TRANSITIONS */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
}

/* ============================================
   DARK MODE THEME
   ============================================ */

@media (prefers-color-scheme: dark) {
    :root {
        --text-primary: #F9F9F9;
        --text-secondary: #D3D3D3;
        --text-tertiary: #A8A8A8;
        --bg-primary: #1A1A1A;
        --bg-secondary: #2D2D2D;
        --bg-tertiary: #404040;
        --border-color: #404040;
        --border-color-dark: #2D2D2D;
        --border-color-light: #606060;
    }
}

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

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

.text-copper-light {
    color: var(--color-copper-light);
}

.text-neon-green {
    color: var(--color-neon-green);
}

.text-neon-green-muted {
    color: var(--color-neon-green-muted);
}

.bg-copper {
    background-color: var(--color-copper);
}

.bg-copper-light {
    background-color: var(--color-copper-light);
}

.bg-neon-green {
    background-color: var(--color-neon-green);
}

.bg-black {
    background-color: var(--color-black);
}

.border-copper {
    border-color: var(--color-copper);
}

.border-neon-green {
    border-color: var(--color-neon-green);
}

/* ============================================
   GRADIENT UTILITIES
   ============================================ */

.gradient-copper {
    background: var(--gradient-copper);
}

.gradient-copper-dark {
    background: var(--gradient-copper-dark);
}

.gradient-neon {
    background: var(--gradient-neon);
}

.gradient-copper-neon {
    background: var(--gradient-copper-neon);
}

/* ============================================
   SHADOW UTILITIES
   ============================================ */

.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-xl {
    box-shadow: var(--shadow-xl);
}

/* ============================================
   GLOW EFFECTS
   ============================================ */

.glow-copper {
    box-shadow: 0 0 20px rgba(184, 115, 51, 0.3);
}

.glow-neon {
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.3);
}

.glow-neon-strong {
    box-shadow: 0 0 30px rgba(57, 255, 20, 0.5);
}

/* ============================================
   ACCENT BORDERS
   ============================================ */

.accent-top {
    border-top: 3px solid var(--color-copper);
}

.accent-left {
    border-left: 3px solid var(--color-copper);
}

.accent-bottom {
    border-bottom: 3px solid var(--color-neon-green);
}

.accent-right {
    border-right: 3px solid var(--color-neon-green);
}