:root {
    /* Colores generales */

    --color-fondo-pagina: #ffffff;
    --color-fondo-secundario: #f1f1f1;

    --color-texto-principal: #111111;
    --color-texto-secundario: #5f5f5f;

    --color-borde: #b8b8b8;

    /* Colores de acciones */

    --color-primario: #62549d;
    --color-primario-hover: #514487;

    --color-secundario: #5b5b5b;
    --color-secundario-hover: #444444;

    --color-peligro: #cc3b3b;
    --color-peligro-hover: #ad2f2f;

    --color-correcto: #198754;
    --color-incorrecto: #dc3545;
    --color-advertencia: #d79a00;

    /* Contenedores */

    --ancho-contenido: 1200px;
    --ancho-texto: 900px;

    /* Bordes */

    --radio-pequeno: 8px;
    --radio-mediano: 14px;
    --radio-grande: 22px;

    /* Sombras */

    --sombra-suave:
        0 8px 24px
        rgba(0, 0, 0, 0.08);

    --sombra-media:
        0 16px 40px
        rgba(0, 0, 0, 0.14);

    /* Transiciones */

    --transicion-rapida: 0.2s ease;
    --transicion-normal: 0.35s ease;
}