/* CSS Variables */
:root {
    /* Cores */
    --bg-dark-primary: #0B0B0F;
    --bg-dark-secondary: #121216;
    --bg-light: #FFFFFF;
    --bg-light-gray: #F5F5F5;
    --text-white: #FFFFFF;
    --text-gray: #B0B0B0;
    --text-dark: #1A1A1A;
    --accent-orange: #CC3355;
    --accent-red: #FF0000;
    --accent-green: #00C853;
    --accent-gold: #FF9500;

    /* Bordas Cards */
    --border-green: #28a745;
    --border-orange: #fd7e14;
    --border-blue: #007bff;
    --border-red: #dc3545;

    /* Layout */
    --container-width: 1200px;
    --spacing-section: 80px;
    --spacing-mobile: 50px;
    --gap-cards: 30px;
    --border-radius: 15px;

    /* Tipografia */
    --font-main: 'Montserrat', sans-serif;
    --h1-size: 48px;
    --h2-size: 36px;
    --h3-size: 24px;
    --text-size: 18px;
    --text-small: 16px;

    /* Transições */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Sombras */
    --shadow-small: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.15);
    --shadow-large: 0 8px 30px rgba(0, 0, 0, 0.2);
    --shadow-glow-orange: 0 0 30px rgba(204, 51, 85, 0.5);
    --shadow-glow-red: 0 0 30px rgba(255, 0, 0, 0.5);
    --shadow-glow-green: 0 0 20px rgba(0, 200, 83, 0.4);
}

/* Media Queries Breakpoints */
@media (max-width: 768px) {
    :root {
        --h1-size: 32px;
        --h2-size: 28px;
        --h3-size: 20px;
        --text-size: 16px;
        --spacing-section: 50px;
    }
}