/**
 * 🐺 Wolf Protocol Design System v1.0
 * Centralized CSS Variables for Musichien Platform
 * 
 * Usage: <link rel="stylesheet" href="css/wolf-theme.css">
 * 
 * This file is the SINGLE SOURCE OF TRUTH for all colors and design tokens.
 * All hardcoded colors (#fbbf24, etc.) should be replaced with these variables.
 */

:root {
  /* Core Colors - Midnight Theme */
  --wolf-midnight: #0f172a;      /* Slate 900 - Main background */
  --wolf-dark: #1e293b;           /* Slate 800 - Cards, sections */
  --wolf-slate-700: #334155;       /* Slate 700 - Borders, dividers */
  --wolf-slate-600: #475569;       /* Slate 600 - Secondary text */
  --wolf-text: #e2e8f0;           /* Slate 200 - Primary text */
  --wolf-text-light: #cbd5e1;      /* Slate 300 - Secondary text */
  
  /* Accent Colors - Gold & Amber */
  --wolf-gold: #fbbf24;            /* Amber 400 - Primary accent */
  --wolf-amber: #f59e0b;           /* Amber 500 - Hover states */
  --wolf-burn: #b45309;            /* Amber 700 - Active states */
  --wolf-amber-light: #fcd34d;     /* Amber 300 - Light accents */
  
  /* Status Colors */
  --wolf-success: #10b981;         /* Emerald 500 - Success states */
  --wolf-success-dark: #059669;    /* Emerald 600 - Success hover */
  --wolf-danger: #ef4444;          /* Red 500 - Error states */
  --wolf-danger-dark: #dc2626;     /* Red 600 - Error hover */
  --wolf-warning: #f59e0b;         /* Amber 500 - Warning states */
  --wolf-info: #3b82f6;             /* Blue 500 - Info states */
  
  /* UI Variables */
  --header-height: 4rem;
  --border-radius: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-xl: 0.75rem;
  --border-radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-gold: 0 10px 30px rgba(251, 191, 36, 0.4);
  --shadow-gold-hover: 0 15px 40px rgba(251, 191, 36, 0.6);
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  --transition-slower: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Styles */
body {
    background-color: var(--wolf-midnight);
    color: var(--wolf-text);
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
}

/* Utility Classes - Text Colors */
.text-wolf-gold { color: var(--wolf-gold); }
.text-wolf-amber { color: var(--wolf-amber); }
.text-wolf-success { color: var(--wolf-success); }
.text-wolf-danger { color: var(--wolf-danger); }
.text-wolf-warning { color: var(--wolf-warning); }

/* Utility Classes - Background Colors */
.bg-wolf-dark { background-color: var(--wolf-dark); }
.bg-wolf-midnight { background-color: var(--wolf-midnight); }
.bg-wolf-gold { background-color: var(--wolf-gold); }
.bg-wolf-amber { background-color: var(--wolf-amber); }

/* Utility Classes - Borders */
.border-wolf-gold { border-color: var(--wolf-gold); }
.border-wolf-amber { border-color: var(--wolf-amber); }

/* Components - Buttons */
.wolf-btn {
    background: var(--wolf-amber);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    transition: all var(--transition-base);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.wolf-btn:hover {
    background: var(--wolf-burn);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.wolf-btn:active {
    transform: translateY(0);
}

.wolf-btn-primary {
    background: linear-gradient(135deg, var(--wolf-gold), var(--wolf-amber));
    box-shadow: var(--shadow-gold);
}

.wolf-btn-primary:hover {
    box-shadow: var(--shadow-gold-hover);
    transform: translateY(-2px);
}

.wolf-btn-success {
    background: var(--wolf-success);
}

.wolf-btn-success:hover {
    background: var(--wolf-success-dark);
}

.wolf-btn-danger {
    background: var(--wolf-danger);
}

.wolf-btn-danger:hover {
    background: var(--wolf-danger-dark);
}

/* Components - Elite Badge */
.elite-badge {
    background: linear-gradient(135deg, var(--wolf-gold), var(--wolf-amber));
    color: var(--wolf-midnight);
    padding: 0.25rem 0.75rem;
    border-radius: var(--border-radius-full);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 6px rgba(251, 191, 36, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Components - Glass Card */
.glass-card {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: var(--border-radius-lg);
    transition: all var(--transition-slower);
}

.glass-card:hover {
    transform: translateY(-8px);
    border-color: rgba(251, 191, 36, 0.5);
    box-shadow: 0 25px 50px rgba(251, 191, 36, 0.2);
}

/* Components - Gold Gradient Text */
.gold-gradient {
    background: linear-gradient(135deg, var(--wolf-gold) 0%, var(--wolf-amber) 50%, var(--wolf-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: goldShimmer 5s ease infinite;
    background-size: 200% 200%;
}

@keyframes goldShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Components - Navigation */
.nav-glass {
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(251, 191, 36, 0.2);
}

/* Components - Moonlight Background */
.moonlight-bg {
    background: linear-gradient(135deg, var(--wolf-midnight) 0%, #1a1f35 50%, var(--wolf-midnight) 100%);
    position: relative;
    overflow: hidden;
}

.moonlight-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    animation: moonPulse 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes moonPulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.2); opacity: 0.5; }
}

/* Components - Elite Card Glow */
.elite-card {
    border: 2px solid rgba(251, 191, 36, 0.5);
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.3);
    position: relative;
}

.elite-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--wolf-gold), var(--wolf-amber), var(--wolf-gold));
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.elite-card:hover::before {
    opacity: 0.3;
}

.elite-card:hover {
    box-shadow: 0 0 50px rgba(251, 191, 36, 0.6);
}

/* Responsive Design */
@media (max-width: 768px) {
    :root {
        --header-height: 3.5rem;
    }
}

/* Print Styles */
@media print {
    .wolf-btn,
    .elite-badge {
        display: none;
    }
}