:root {
    --primary:          #00bfff;
    --dark:             #121212;
    --light:            #e0e0e0;
    --muted:            #9e9e9e;
    --gray:             #333;
    --success:          #4CAF50;
    --error:            #F44336;

    --overlay-dark:     rgba(18, 18, 18, 0.90);
    --overlay-primary:  rgba(0, 191, 255, 0.08);
    --border-primary:   rgba(0, 191, 255, 0.15);
    --card-bg:          rgba(18, 18, 18, 0.50);

    --font-heading:     'Montserrat', sans-serif;
    --font-body:        'Roboto', sans-serif;

    --transition:       all 0.3s ease;
    --radius:           5px;
    --shadow:           0 5px 20px rgba(0, 0, 0, 0.20);
    --shadow-lg:        0 15px 40px rgba(0, 0, 0, 0.30);
    --glow:             0 0 20px rgba(0, 191, 255, 0.20);
    --glow-lg:          0 0 40px rgba(0, 191, 255, 0.30);

    --header-h:         70px;
    --container-px:     20px;
}

@media (min-width: 768px) {
    :root {
        --container-px: 30px;
    }
}