/* CSS Variables */
:root {
    /* Colors */
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-tertiary: #0f3460;

    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-gold: #FFD700;

    --btn-buy: #4CAF50;
    --btn-buy-hover: #45a049;
    --btn-upgrade: #FF9800;
    --btn-upgrade-hover: #e68900;

    --selected-border: #FFD700;
    --empty-slot: #2a2a3e;

    /* Sword Level Colors */
    --sword-lv1: #8B4513;
    --sword-lv2: #A0522D;
    --sword-lv3: #C0C0C0;
    --sword-lv4: #FFD700;
    --sword-lv5: #87CEEB;
    --sword-lv6: #4169E1;
    --sword-lv7: #9370DB;
    --sword-lv8: #FF1493;
    --sword-lv9: #FF4500;
    --sword-lv10: #FF0000;

    /* Sizes */
    --grid-gap: 8px;
    --tile-size: 80px;
    --border-radius: 8px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
}

@media (max-width: 400px) {
    :root {
        --tile-size: 70px;
        --grid-gap: 6px;
    }
}