/**
 * Kabosking Brand Colors System
 * Primary Brand Identity Colors
 */

:root {
    /* ========================================
       1️⃣ CORE BRAND COLORS (Primary Identity)
       ======================================== */
    
    /* Primary Green (Kabos) - Main Brand Color */
    --primary: #8BC53F;
    --primary-rgb: 139, 197, 63;
    --primary-dark: #7AB030;
    --primary-light: #A6D64F;
    
    /* Royal Gold (King) - Premium Accent */
    --gold: #D4AF37;
    --gold-rgb: 212, 175, 55;
    --gold-shadow: #B8962E;
    --gold-light: #E5C84D;
    
    /* Black Background - Foundation */
    --bg-primary: #0B0B0B;
    --bg-secondary: #1A1A1A;
    --bg-tertiary: #2A2A2A;
    
    /* ========================================
       2️⃣ SUPPORTING COLORS
       ======================================== */
    
    /* Dark Charcoal - Cards & Sections */
    --dark-charcoal: #1A1A1A;
    
    /* Soft Gold Shadow - Borders & Secondary Icons */
    --soft-gold: #B8962E;
    
    /* Light Lime Accent - Hover & Micro Interactions */
    --lime-accent: #A6D64F;
    
    /* ========================================
       3️⃣ TEXT COLORS
       ======================================== */
    
    --text-primary: #EDEDED;
    --text-secondary: #B8B8B8;
    --text-muted: #808080;
    --text-heading: #D4AF37; /* Gold for headlines */
    
    /* ========================================
       4️⃣ UI ELEMENTS
       ======================================== */
    
    /* Borders & Dividers */
    --border-primary: #2A2A2A;
    --border-secondary: #3A3A3A;
    --border-gold: #B8962E;
    
    /* Buttons */
    --btn-primary-bg: #8BC53F;
    --btn-primary-text: #0B0B0B;
    --btn-primary-hover: #7AB030;
    
    --btn-secondary-bg: #D4AF37;
    --btn-secondary-text: #0B0B0B;
    --btn-secondary-hover: #B8962E;
    
    /* Links */
    --link-color: #8BC53F;
    --link-hover: #A6D64F;
    
    /* ========================================
       5️⃣ STATUS COLORS (Functional)
       ======================================== */
    
    --success: #8BC53F;
    --success-bg: rgba(139, 197, 63, 0.1);
    
    --warning: #D4AF37;
    --warning-bg: rgba(212, 175, 55, 0.1);
    
    --error: #EF4444;
    --error-bg: rgba(239, 68, 68, 0.1);
    
    --info: #3B82F6;
    --info-bg: rgba(59, 130, 246, 0.1);
    
    /* ========================================
       6️⃣ SHADOWS & EFFECTS
       ======================================== */
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.8);
    
    --shadow-primary: 0 0 30px rgba(139, 197, 63, 0.3);
    --shadow-primary-hover: 0 0 50px rgba(139, 197, 63, 0.5);
    
    --shadow-gold: 0 0 30px rgba(212, 175, 55, 0.3);
    --shadow-gold-hover: 0 0 50px rgba(212, 175, 55, 0.5);
    
    /* ========================================
       7️⃣ GRADIENTS
       ======================================== */
    
    --gradient-primary: linear-gradient(135deg, #8BC53F 0%, #7AB030 100%);
    --gradient-gold: linear-gradient(135deg, #D4AF37 0%, #B8962E 100%);
    --gradient-dark: linear-gradient(180deg, #1A1A1A 0%, #0B0B0B 100%);
    
    /* ========================================
       8️⃣ SPACING & SIZING (Consistent System)
       ======================================== */
    
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
}

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

/* Background Colors */
.bg-primary { background-color: var(--primary); }
.bg-gold { background-color: var(--gold); }
.bg-dark { background-color: var(--bg-primary); }
.bg-dark-2 { background-color: var(--bg-secondary); }
.bg-dark-3 { background-color: var(--bg-tertiary); }

/* Text Colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-heading { color: var(--text-heading); }
.text-gold { color: var(--gold); }
.text-green { color: var(--primary); }

/* Border Colors */
.border-primary { border-color: var(--border-primary); }
.border-gold { border-color: var(--border-gold); }
.border-green { border-color: var(--primary); }

/* Hover Effects */
.hover-primary:hover { color: var(--primary); }
.hover-gold:hover { color: var(--gold); }
.hover-lime:hover { color: var(--lime-accent); }

/* Button Styles */
.btn-kabos {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    font-weight: 700;
    padding: 1rem 2rem;
    border-radius: var(--radius-xl);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-primary);
}

.btn-kabos:hover {
    background-color: var(--btn-primary-hover);
    box-shadow: var(--shadow-primary-hover);
    transform: translateY(-2px);
}

.btn-king {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    font-weight: 700;
    padding: 1rem 2rem;
    border-radius: var(--radius-xl);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-gold);
}

.btn-king:hover {
    background-color: var(--btn-secondary-hover);
    box-shadow: var(--shadow-gold-hover);
    transform: translateY(-2px);
}

/* Card Styles */
.card-kabos {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    transition: all 0.3s ease;
}

.card-kabos:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-primary);
    transform: translateY(-4px);
}

/* Gradient Backgrounds */
.gradient-primary { background: var(--gradient-primary); }
.gradient-gold { background: var(--gradient-gold); }
.gradient-dark { background: var(--gradient-dark); }

/* ========================================
   ANTI-PATTERNS (DO NOT USE)
   ======================================== */

/* ❌ NO Pure White - Breaks Premium Feel */
/* ❌ NO Multiple Greens - Dilutes Brand */
/* ❌ NO Excessive Gold - Looks Cheap */

/* Use #EDEDED instead of #FFFFFF */
/* Use only #8BC53F for green */
/* Use gold sparingly for headlines & accents */