/* === Variables globales para temas === */
:root {
    --color-principal: #363e45;
    --color-principal-dark: #24292e;
    --color-principal-light: #4d5760;
    --color-principal-soft: #6c7885;
    --color-principal-contrast: #ff6b7d;

    --color-secondary: #fa344c;
    --color-secondary-dark: #c32034;
    --color-secondary-light: #ff6b7d;
    --color-secondary-soft: #ff9ba7;
    --color-secondary-contrast: #ffd6db;


    --color-text: #363e45;
    --color-text-light: #ffffff;
}

.principal {
    background-color: var(--color-principal) !important;
    color: var(--color-text-light) !important;
}

.principal-light {
    background-color: var(--color-principal-light) !important;
    color: var(--color-text-light) !important;
}
.principal-dark {
     background-color: var(--color-principal-dark) !important;
     color: var(--color-text-light) !important;
}

.principal-soft {
    background-color: var(--color-principal-soft) !important;
    color: var(--color-text-light) !important;
}

.secondary {
    background-color: var(--color-secondary) !important;
    color: var(--color-text-light) !important;
}
.secondary-light {
    background-color: var(--color-secondary-light) !important;
    color: var(--color-text-light) !important;
}

.text-principal {
    color: var(--color-text) !important;
}

.text-secondary {
    color: var(--color-secondary) !important;
}