/*
 * ============================================================
 * 01 — VARIABLES
 * CSS kintamieji naudojami visuose kituose failuose.
 * Norėdami pakeisti spalvą ar dydį — keiskite tik čia.
 * ============================================================
 */

:root {
    /* --- Pagrindinės spalvos --- */
    --sg-violet:            #9b51e0;
    --sg-violet-light:      #b86fff;
    --sg-violet-glow:       rgba(155, 81, 224, 0.35);
    --sg-violet-soft:       rgba(155, 81, 224, 0.12);
    --sg-violet-border:     rgba(155, 81, 224, 0.28);
    --sg-violet-border-hover: rgba(155, 81, 224, 0.50);

    /* --- Fonas --- */
    --sg-card-bg:           rgba(18, 14, 28, 0.72);
    --sg-dark-bg:           #000;
    --sg-dark-bg-2:         #121315;

    /* --- Tekstas --- */
    --sg-text:              #f0e9ff;
    --sg-text-dim:          rgba(220, 200, 255, 0.65);
    --sg-text-muted:        rgba(220, 200, 255, 0.40);

    /* --- Mygtukai --- */
    --sg-btn-play:          linear-gradient(135deg, #9b51e0 0%, #c77dff 100%);
    --sg-btn-review-bg:     rgba(255, 255, 255, 0.06);
    --sg-btn-review-border: rgba(155, 81, 224, 0.30);

    /* --- Formos --- */
    --sg-radius:            16px;
    --sg-radius-sm:         10px;
    --sg-radius-xs:         8px;

    /* --- Animacijos --- */
    --sg-transition:        0.32s cubic-bezier(0.22, 1, 0.36, 1);
    --sg-transition-fast:   0.18s ease;
}