/* ==========================================================================
   Conecta Juventud — Centroamérica 2026
   Tokens de diseño · Manual de marca v1, cap. 16, con la escala de radios
   corregida según el Manual UX/UI v1, cap. 2.1 y 11.2.

   Este es el ÚNICO archivo del proyecto donde se escribe un código de color,
   un tamaño de letra o un radio. Todo componente se refiere a estos nombres.
   ========================================================================== */

:root {

    /* ── Marca ──────────────────────────────────────────── */
    --cj-azul:              #004B93;
    --cj-oro:               #E3A21A;

    /* ── Escala azul ────────────────────────────────────── */
    --azul-900:             #05335F;
    --azul-800:             #033C73;
    --azul-700:             #024383;
    --azul-600:             #004B93;
    --azul-500:             #2E6BA6;
    --azul-400:             #618FBC;
    --azul-300:             #94B3D2;
    --azul-200:             #C2D4E5;
    --azul-100:             #E0E9F2;
    --azul-50:              #F2F6FA;

    /* ── Escala dorada ──────────────────────────────────── */
    /* ── El oro para texto (corregido en la Fase 9) ──────────────────────
       Era #A2781C, con el comentario «única versión apta para texto». La
       auditoría lo midió y NO lo era: 3.66:1 sobre el oro-100 y 3.70:1 sobre
       el gris-100, por debajo del 4.5:1 que exige la WCAG 2.1 AA para texto
       normal. Lo usaban la etiqueta «Pendiente», la señal «requiere atención»
       y la referencia bíblica del impulso del día.

       El valor nuevo conserva el tono del oro de marca —41°— y su saturación;
       solo baja la luminosidad hasta que pasa AA en los cuatro fondos del
       proyecto. El peor caso queda en 5.03:1.

       El oro de marca (--oro-600 #E3A21A) NO se toca: sigue siendo el color de
       los fondos, los bordes y los acentos, donde el requisito es otro. */
    --oro-700:              #896210;   /* la versión apta para texto: 5.03:1 en el peor fondo */
    --oro-600:              #E3A21A;
    --oro-500:              #EAB953;
    --oro-200:              #F7E3BA;
    --oro-100:              #FCF4E4;

    /* ── Neutros ────────────────────────────────────────── */
    --tinta:                #1F2A33;   /* texto principal, nunca negro puro */
    --gris-600:             #5D6A75;
    --gris-400:             #B9C4CE;
    --gris-300:             #DCE2E8;
    --gris-100:             #F4F7FA;
    --blanco:               #FFFFFF;

    /* ── Funcionales ────────────────────────────────────── */
    --exito:                #2E7D46;
    --exito-fondo:          #EDF6EE;
    --error:                #B3261E;
    --error-fondo:          #FBECEA;
    --aviso:                #896210;
    --aviso-fondo:          #FCF4E4;

    /* ── Semánticos ─────────────────────────────────────── */
    /* Esta es la capa que deben usar los componentes. */
    --fondo:                var(--blanco);
    --fondo-alt:            var(--azul-50);
    --fondo-superficie:     var(--gris-100);
    --texto:                var(--tinta);
    --texto-suave:          var(--gris-600);
    --texto-inverso:        var(--blanco);
    --borde:                var(--gris-300);
    --borde-campo:          var(--gris-400);
    --primario:             var(--azul-600);
    --primario-hover:       var(--azul-700);
    --primario-oscuro:      var(--azul-900);
    --foco:                 var(--oro-600);

    /* ── Tipografía ─────────────────────────────────────── */
    /* Restricción heredada del manual corporativo de la Iglesia.
       Sin fuentes externas: ya están instaladas en todos los dispositivos. */
    --fuente:               "Helvetica Neue", Helvetica, Arial, sans-serif;

    --t-display:            32px;
    --t-titulo-1:           28px;
    --t-titulo-2:           22px;
    --t-titulo-3:           19px;
    --t-titulo-4:           16px;
    --t-cuerpo:             16px;   /* mínimo de lectura, no es sugerencia */
    --t-cuerpo-sm:          14px;
    --t-etiqueta:           11px;
    --t-nav:                10px;

    --lh-titulo:            1.2;
    --lh-cuerpo:            1.6;
    --track-etiqueta:       0.12em;
    --track-nav:            0.14em;

    /* ── Espaciado (múltiplos de 4) ─────────────────────── */
    --e-1:                  4px;
    --e-2:                  8px;
    --e-3:                  16px;
    --e-4:                  24px;
    --e-5:                  40px;
    --e-6:                  64px;

    /* ── Geometría ──────────────────────────────────────── */
    /* Escala de radios aprobada por el liderazgo (UX/UI 2.1).
       Sustituye al valor único de 2 px del manual de marca. */
    --radio-tarjeta:        16px;
    --radio-control:        12px;
    --radio-chico:          8px;
    --radio-completo:       999px;

    --borde-grosor:         1px;
    --borde-destacado:      4px;
    --ancho-lectura:        620px;
    --ancho-panel:          1100px;
    --toque-min:            44px;

    --foco-grosor:          2px;    /* contorno de foco y borde de campo activo */
    --foco-desplazamiento:  2px;    /* separación del contorno respecto al elemento */
    --barra-azul-ancho:     40px;   /* barra del patrón de encabezado (32–46) */
    --barra-azul-alto:      3px;    /* idem (2–3) */
    --emblema-nav:          32px;   /* emblema en la barra de navegación */
    --emblema-estado:       64px;   /* emblema como ilustración de estado */
    --casilla:              22px;   /* casilla de verificación */

    --alto-boton:           48px;
    --alto-campo:           44px;
    --alto-barra-nav:       56px;
    --margen-lateral:       20px;   /* fijo en móvil */

    /* ── Movimiento ─────────────────────────────────────── */
    --d-instantanea:        100ms;
    --d-rapida:             150ms;
    --d-media:              250ms;
    --d-lenta:              400ms;
    --d-expresiva:          600ms;

    --curva-salida:         cubic-bezier(0.0, 0.0, 0.2, 1);
    --curva-entrada:        cubic-bezier(0.4, 0.0, 1.0, 1);
    --curva-ambas:          cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Preferencia del sistema de reducir animaciones (manual de marca 13.3). */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}