/* ================================================================================================================================== */
/* Variables */
:root {
    /* Paleta de cors */
    --midnight-blue: #0B1A33;
    --cornflower-blue: #4B90F8;
    --goldenrod: #D6A419;
    --caribbean-green: #00C6BE;
    --deep-ruby: #623A40;
    --ivory: #F1F1E6;
    --alice-blue: #F4F9FF;
    --charcoal-blue: #35405D;
    --slate-gray: #616B8B;
    --light-slate-gray: #909ABB;
    --periwinkle: #2d2e31;

    /* Informaçoes da paleta de cores */
    --primary-color: var(--midnight-blue);
    --secondary-color: var(--cornflower-blue);
    --tertiary-color: var(--periwinkle);
    --gradient-backfround: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(75,144,248,1) 19%, rgba(97,157,246,1) 85%, rgba(241,241,230,0) 100%);
    --accent-color: var(--goldenrod);
    --background-color: var(--charcoal-blue);
    --text-color: var( --alice-blue);
    --secondary-text-color: var(--slate-gray);
    --border-color: var(--deep-ruby);
    --highlight-color: var(--caribbean-green);
    --error-color: var(--slate-gray);
    --success-color: var(--light-slate-gray);
    --warning-color: var(--periwinkle);
    --info-color: var(--ivory);

    --font-family: 'Roboto', sans-serif;
    --heading-color: var(--alice-blue);
    --heading-margin: 0 0 20px;
}


/* assets/css/tutorial.css */
#tutorial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8); /* Escurece a tela */
    /* display: flex; */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#tutorial-box {
    background: var(--deep-ruby);
    padding: 20px;
    border-radius: 8px;
    max-width: 500px;
    text-align: center;
}

.hidden {
    display: none;
}