/* =============================================
   SURVIVAL SQUAD - Color Variables
   ============================================= */

:root {
    /* ===================
       BACKGROUNDS
       =================== */
    --bg-dark: #0a0a0f;
    --bg-darker: #050508;
    --bg-card: #12121a;
    --bg-card-hover: #1a1a25;
    --bg-overlay: rgba(10, 10, 15, 0.95);

    /* ===================
       ACCENTS / BRAND
       =================== */
    --accent-primary: #00f0ff;      /* Cyan neon */
    --accent-secondary: #ff00aa;    /* Magenta neon */
    --accent-tertiary: #7b00ff;     /* Violet */

    /* ===================
       MEDALS / RANKS
       =================== */
    --accent-gold: #ffd700;
    --accent-silver: #c0c0c0;
    --accent-bronze: #cd7f32;

    /* ===================
       TEXT COLORS
       =================== */
    --text-primary: #ffffff;
    --text-secondary: #8a8a9a;
    --text-muted: #5a5a6a;
    --text-dark: #0a0a0f;

    /* ===================
       STATUS COLORS
       =================== */
    --success: #00ff88;
    --warning: #ffaa00;
    --danger: #ff4444;
    --info: #00a8ff;

    /* ===================
       BORDERS
       =================== */
    --border-color: #2a2a3a;
    --border-light: #3a3a4a;
    --border-accent: var(--accent-primary);

    /* ===================
       GRADIENTS
       =================== */
    --gradient-primary: #2563eb;
    --gradient-gold: linear-gradient(135deg, #ffd700, #ff8c00);
    --gradient-silver: linear-gradient(135deg, #c0c0c0, #808080);
    --gradient-bronze: linear-gradient(135deg, #cd7f32, #8b4513);
    --gradient-dark: linear-gradient(135deg, var(--bg-darker) 0%, var(--bg-dark) 100%);
    --gradient-card: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-darker) 100%);

    /* ===================
       SHADOWS
       =================== */
    --shadow-glow: 0 0 30px rgba(0, 240, 255, 0.3);
    --shadow-glow-strong: 0 0 60px rgba(0, 240, 255, 0.6);
    --shadow-glow-secondary: 0 0 30px rgba(255, 0, 170, 0.3);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-card-hover: 0 10px 40px rgba(0, 240, 255, 0.1);

    /* ===================
       RARITY COLORS
       =================== */
    --rarity-common: #808080;
    --rarity-rare: #0066ff;
    --rarity-epic: #9900ff;
    --rarity-legendary: var(--gradient-gold);
}

/* ===================
   DARK MODE (default)
   =================== */
[data-theme="dark"] {
    --bg-dark: #0a0a0f;
    --bg-darker: #050508;
    --bg-card: #12121a;
    --text-primary: #ffffff;
    --text-secondary: #8a8a9a;
}

/* ===================
   LIGHT MODE (optional)
   =================== */
[data-theme="light"] {
    --bg-dark: #f5f5f7;
    --bg-darker: #e5e5e7;
    --bg-card: #ffffff;
    --bg-card-hover: #f0f0f2;
    --text-primary: #1a1a1f;
    --text-secondary: #6a6a7a;
    --text-muted: #9a9aaa;
    --border-color: #d0d0d8;
}