:root {
    /* Colores principales del tema */
    --primary-color: #2bc7d9;
    --primary-hover-color: #1ea6b7; /* Tono más oscuro para hover */
    --primary-active-color: #187f8a; /* Tono más oscuro para active */
    --primary-contrast: #0d0d0d; /* Contraste oscuro para primario */

    /* Variantes del color primario */
    --primary-tint: #a3e8ef; /* Versión más clara del primario */
    --primary-shade: #2196a1; /* Versión más oscura del primario */

    --secondary-color: #27828c;
    --secondary-hover-color: #1f6871; /* Tono más oscuro para hover */
    --secondary-active-color: #195358; /* Tono más oscuro para active */
    --secondary-contrast: #ffffff; /* Contraste claro para secundario */

    /* Variantes del color secundario */
    --secondary-tint: #76b0b6; /* Versión más clara del secundario */
    --secondary-shade: #1b5e65; /* Versión más oscura del secundario */

    --background-color: #262223;
    --light-background-color: #f2f2f2;
    --dark-color: #0d0d0d;

    /* Nuevos colores añadidos */
    --accent-color: #ff8800; /* Naranja vibrante */
    --complementary-color: #6fcf97; /* Verde suave */
    --accent-color-danger: #ff4d4d; /* Rojo peligro para advertencias */

    /* Colores para el texto */
    --title-color: #2bc7d9;
    --subtitle-color: #27828c;
    --text-color: #0d0d0d;
    --text-light-color: #f2f2f2;
    --dark-blue-color:#002E5D;

    /* Colores de texto adicionales */
    --accent-text-color: #ff8800;
    --complementary-text-color: #6fcf97;

    /* Otras variantes de colores */
    --primary-light: rgba(43, 199, 217, 0.1); /* Versión más clara del primario */
    --secondary-light: rgba(39, 130, 140, 0.1); /* Versión más clara del secundario */

    /* Light blue BGs*/
    --light-blue-color:#EAF1FB;
}