/* ===========================================
   NIKA WOW - CSS Variables
   Sistema de Design Futurista para Esports
   =========================================== */

:root {
    /* ===== CORES BASE (DARK THEME) ===== */
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-tertiary: #1a1a24;
    --bg-elevated: #1e1e2a;
    --bg-glass: rgba(255, 255, 255, 0.03);
    --bg-glass-hover: rgba(255, 255, 255, 0.06);

    /* ===== CORES DE TEXTO ===== */
    --text-primary: #ffffff;
    --text-secondary: #a0a0b0;
    --text-muted: #606070;
    --text-disabled: #404050;

    /* ===== CORES DE DESTAQUE ===== */
    --accent-primary: #ff4444;
    --accent-primary-rgb: 255, 68, 68;
    --accent-secondary: #4488ff;
    --accent-secondary-rgb: 68, 136, 255;
    --accent-warning: #ffaa00;
    --accent-warning-rgb: 255, 170, 0;
    --accent-success: #00ff88;
    --accent-success-rgb: 0, 255, 136;

    /* Cores do Jogo */
    --color-pirata: #ff4444;
    --color-pirata-rgb: 255, 68, 68;
    --color-marinha: #4488ff;
    --color-marinha-rgb: 68, 136, 255;

    /* Medalhas */
    --color-gold: #ffd700;
    --color-gold-rgb: 255, 215, 0;
    --color-silver: #c0c0c0;
    --color-silver-rgb: 192, 192, 192;
    --color-bronze: #cd7f32;
    --color-bronze-rgb: 205, 127, 50;

    /* ===== CORES DE STATUS ===== */
    --color-success: #00ff88;
    --color-success-rgb: 0, 255, 136;
    --color-warning: #ffaa00;
    --color-warning-rgb: 255, 170, 0;
    --color-danger: #ff4444;
    --color-danger-rgb: 255, 68, 68;
    --color-info: #00aaff;
    --color-info-rgb: 0, 170, 255;

    /* ===== GRADIENTES ===== */
    --gradient-pirata: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
    --gradient-marinha: linear-gradient(135deg, #4488ff 0%, #0044cc 100%);
    --gradient-gold: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
    --gradient-silver: linear-gradient(135deg, #e0e0e0 0%, #a0a0a0 100%);
    --gradient-bronze: linear-gradient(135deg, #cd7f32 0%, #8b4513 100%);
    --gradient-card: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 100%);
    --gradient-glow-red: radial-gradient(circle, rgba(255,68,68,0.2) 0%, transparent 70%);
    --gradient-glow-blue: radial-gradient(circle, rgba(68,136,255,0.2) 0%, transparent 70%);

    /* ===== GLASSMORPHISM ===== */
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-bg-strong: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-strong: rgba(255, 255, 255, 0.15);
    --glass-blur: blur(12px);
    --glass-blur-strong: blur(20px);

    /* ===== SOMBRAS ===== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);

    /* Sombras com Glow */
    --shadow-glow-red: 0 0 30px rgba(255, 68, 68, 0.3);
    --shadow-glow-blue: 0 0 30px rgba(68, 136, 255, 0.3);
    --shadow-glow-gold: 0 0 30px rgba(255, 215, 0, 0.3);
    --shadow-glow-success: 0 0 20px rgba(0, 255, 136, 0.3);

    /* ===== BORDAS ===== */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-color-strong: rgba(255, 255, 255, 0.15);
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
    --border-radius-full: 9999px;

    /* ===== TIPOGRAFIA ===== */
    --font-display: 'Orbitron', 'Inter', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Tamanhos */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    --text-5xl: 3rem;        /* 48px */
    --text-6xl: 3.75rem;     /* 60px */

    /* Line Heights */
    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* ===== ESPAÇAMENTOS ===== */
    --space-1: 0.25rem;      /* 4px */
    --space-2: 0.5rem;       /* 8px */
    --space-3: 0.75rem;      /* 12px */
    --space-4: 1rem;         /* 16px */
    --space-5: 1.25rem;      /* 20px */
    --space-6: 1.5rem;       /* 24px */
    --space-8: 2rem;         /* 32px */
    --space-10: 2.5rem;      /* 40px */
    --space-12: 3rem;        /* 48px */
    --space-16: 4rem;        /* 64px */
    --space-20: 5rem;        /* 80px */

    /* ===== TRANSIÇÕES ===== */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ===== Z-INDEX ===== */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-popover: 500;
    --z-tooltip: 600;
    --z-toast: 700;

    /* ===== LARGURAS ===== */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;

    /* ===== HEATMAP COLORS ===== */
    --heatmap-cold: #0066ff;
    --heatmap-cool: #00ccff;
    --heatmap-neutral: #00ff66;
    --heatmap-warm: #ffcc00;
    --heatmap-hot: #ff4400;
    --heatmap-extreme: #ff0000;
}

/* ===== MEDIA QUERY BREAKPOINTS ===== */
/*
   Mobile: < 640px
   Tablet: 640px - 1024px
   Desktop: > 1024px
   Wide: > 1280px
*/