/* ============================================================
   css/tokens.css — Conocemed · Núcleo (chat 02)
   Variables de diseño. Cambiar la paleta del sistema entero es
   editar este archivo y ningún otro.

   Parte del sistema visual nuevo de la agenda (azul marino, un solo
   acento, color reservado para lo que significa algo), para que el
   expediente y la agenda se sientan del mismo lugar.

   Uso en cada página, en este orden:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap">
     <link rel="stylesheet" href="css/tokens.css">
     <link rel="stylesheet" href="css/base.css">
   Sin la fuente, todo cae a la del sistema y sigue funcionando.
   ============================================================ */

:root {
  /* ── Marca ── */
  --marca:         #1B72B8;   /* acción principal, enlaces, foco */
  --marca-oscura:  #123F73;   /* encabezado, hover de la acción */
  --marca-suave:   #E2F1F7;   /* fondo de selección; texto encima en --marca-oscura */

  /* ── Tinta y superficies ── */
  --tinta:    #14304F;        /* texto principal            ≥ 12:1 */
  --tinta-2:  #4A6479;        /* texto secundario            ≥ 5.6:1 */
  --tinta-3:  #526D86;        /* ayudas y metadatos          ≥ 4.6:1 incluso sobre fondo-3 */
  --linea:    #D4E3EE;        /* separadores */
  --linea-2:  #7090AA;        /* borde de controles          ≥ 3:1 (WCAG 1.4.11) */
  --fondo:    #FFFFFF;        /* tarjetas, campos */
  --fondo-2:  #EEF5FA;        /* lienzo de la página */
  --fondo-3:  #E7F0F7;        /* filas alternas, bloques en reposo */

  /* ── Semánticos: el color significa algo, no decora.
        Cada color cumple ≥ 4.5:1 sobre blanco y sobre su -suave. ── */
  --ok:           #37712A;  --ok-suave:      #EAF5E3;
  --aviso:        #9A5A04;  --aviso-suave:   #FDF0DC;
  --peligro:      #B02A20;  --peligro-suave: #FBE8E6;
  --info:         #16609E;  --info-suave:    #E2F1F7;

  /* ── Sedes (enum cerrado en reglas). Solo para puntos y bordes:
        como color de texto no alcanzan contraste AA. ── */
  --sede-mixco:          #16A34A;
  --sede-san_cristobal:  #7C3AED;

  /* ── Ambiente: franja de pruebas (firebase.js marca <html data-entorno>) ── */
  --entorno-dev:       #9A5A04;
  --entorno-emulador:  #6B3FA0;

  /* ── Tipografía ── */
  --f-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-dato:  "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Escala 12 / 14 / 16 / 20 / 26 / 34. Nada fuera de ella. */
  --t-xs:   .75rem;
  --t-sm:   .875rem;
  --t-base: 1rem;
  --t-md:   1.25rem;
  --t-lg:   1.625rem;
  --t-xl:   2.125rem;

  /* ── Espaciado (base 4 px) ── */
  --e-1: .25rem;  --e-2: .5rem;  --e-3: .75rem;  --e-4: 1rem;
  --e-6: 1.5rem;  --e-8: 2rem;   --e-12: 3rem;

  /* ── Forma ── */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --sombra-1: 0 1px 2px rgb(18 63 115 / .06);
  --sombra-2: 0 1px 2px rgb(18 63 115 / .06), 0 4px 14px rgb(18 63 115 / .07);
  --sombra-3: 0 12px 40px rgb(18 63 115 / .22);

  /* ── Controles ── */
  --control-alto: 44px;       /* objetivo táctil mínimo */
  --ancho-max:    1200px;
}