/** MARCA */
:root {
    --violeta-activo: #6B49C8;
    --turquesa-suave: #59B2A0;
    --coral-calido: #E07A5F;
    --crema-rosado: #FAF1EE;
    --marfil-neutro: #FFF8FF;
    --brea-negro: #1B1918;

    --color-blanco-solido: var(--marfil-neutro);
    --color-gris-claro-0: #EEE8FF;
    --color-gris-claro-1: #DED8FF;
    --color-gris-claro-2: #CEC8EF;
    --color-gris-claro-3: #BEB8DF;
    --color-gris-medio-1: #9E98BF;
    --color-gris-medio-2: #6a6699;
    --color-gris-medio-3: #3f3d41;

    --color-gris-oscuro-1: #2a2629;
    --color-negro-solido: #0a0609;
}

/** Temas */

:root {
    --color-fondo: var(--marfil-neutro);
    --color-frente: var(--brea-negro);
    --color-primario: var(--violeta-activo);
    --color-secundario: var(--turquesa-suave);
    --color-acento: var(--coral-calido);

    --color-rosa: #C90406;
    --color-amarillo: #e4d128;
    --color-verde: #27AE60;
    --color-gris-0: var(--color-gris-claro-0);
    --color-gris-1: var(--color-gris-claro-1);
    --color-gris-2: var(--color-gris-medio-1);
    --color-gris-3: var(--color-gris-medio-3);
}

:root.tema-claro {
    --color-bg: var(--color-gris-claro-0) !important;
    --color-fondo: var(--marfil-neutro) !important;
    --color-frente: var(--brea-negro) !important;
    --color-primario: var(--violeta-activo) !important;
    --color-secundario: var(--turquesa-suave) !important;
    --color-acento: var(--coral-calido) !important;
    --color-gris-0: var(--color-gris-claro-0) !important;
    --color-gris-1: var(--color-gris-claro-1) !important;
    --color-gris-2: var(--color-gris-medio-1) !important;
    --color-gris-3: var(--color-gris-medio-3) !important;
}


:root.tema-oscuro {
    --color-bg: var(--color-negro-solido) !important;
    --color-fondo: var(--brea-negro) !important;
    --color-frente: var(--marfil-neutro) !important;

    --color-primario: var(--violeta-activo) !important;
    --color-secundario: var(--turquesa-suave) !important;
    --color-acento: var(--coral-calido) !important;

    --color-gris-0: var(--color-gris-oscuro-1) !important;
    --color-gris-1: var(--color-gris-medio-3) !important;
    --color-gris-2: var(--color-gris-medio-2) !important;
    --color-gris-3: var(--color-gris-claro-3) !important;

}