/*
 * AFA Escola El Cim — tokens de identidad visual
 * Fuente unica de verdad del diseno. Lo consumen: PWA del carnet,
 * validador publico y (desde el dia 22) el tema propio de WordPress.
 * Servido en las tres piezas como /shared/css/tokens.css via alias Nginx.
 *
 * Paleta: "el cim" = la cumbre. Azul de montana + naranja de sol.
 * Contrastes comprobados (ratio sobre blanco o sobre el propio color):
 *   blanco / verd-600      5.04:1  AA texto normal
 *   blanco / vermell-600   6.54:1  AA texto normal
 *   blanco / blau-700     11.63:1  AA texto normal
 *   blau-900 / crema      14.84:1  AA texto normal
 *   gris-600 / crema       7.70:1  AA texto normal
 *   blau-900 / taronja     5.24:1  AA texto normal
 *   blanco / taronja       3.00:1  SOLO texto grande  <-- NO usar blanco
 *                                   sobre naranja en texto normal.
 */
:root {
  /* Marca */
  --afa-blau-900:    #10243A;
  --afa-blau-700:    #1B3A5C;
  --afa-blau-500:    #2C5F8D;
  --afa-taronja-500: #E07A2F;
  --afa-crema:       #FBF8F3;
  --afa-blanc:       #FFFFFF;

  /* Estado del carnet — nunca solo color: van siempre con icono ✓/✗ */
  --afa-verd-600:    #1B7F46;
  --afa-verd-050:    #E8F5ED;
  --afa-vermell-600: #B3261E;
  --afa-vermell-050: #FBEAE9;

  /* Neutros */
  --afa-gris-900: #1A1D21;
  --afa-gris-600: #48505B;
  --afa-gris-300: #C8CDD4;
  --afa-gris-100: #EDEFF2;

  /* Semanticos */
  --afa-fons:          var(--afa-crema);
  --afa-text:          var(--afa-blau-900);
  --afa-text-suau:     var(--afa-gris-600);
  --afa-primari:       var(--afa-blau-700);
  --afa-primari-text:  var(--afa-blanc);
  --afa-accent:        var(--afa-taronja-500);
  --afa-accent-text:   var(--afa-blau-900);
  --afa-vora:          var(--afa-gris-300);

  /* Tipografia: pila del sistema. Cero webfonts — en 4G dentro del
     colegio cada peticion cuenta, y el carnet debe pintar al instante. */
  --afa-font: system-ui, -apple-system, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
  --afa-mida-xs:  0.8125rem;
  --afa-mida-s:   0.9375rem;
  --afa-mida-m:   1.0625rem;
  --afa-mida-l:   1.375rem;
  --afa-mida-xl:  1.875rem;
  --afa-mida-xxl: 2.5rem;
  --afa-pes-normal: 400;
  --afa-pes-fort:   600;
  --afa-pes-molt:   800;

  /* Espaciado (escala de 4) */
  --afa-espai-1: 0.25rem;
  --afa-espai-2: 0.5rem;
  --afa-espai-3: 0.75rem;
  --afa-espai-4: 1rem;
  --afa-espai-5: 1.5rem;
  --afa-espai-6: 2rem;
  --afa-espai-7: 3rem;

  /* Formas y sombras */
  --afa-radi-s: 6px;
  --afa-radi-m: 12px;
  --afa-radi-l: 20px;
  --afa-ombra-1: 0 1px 3px rgba(16,36,58,.12);
  --afa-ombra-2: 0 6px 20px rgba(16,36,58,.16);

  /* Objetivo tactil minimo (accesibilidad) */
  --afa-tap-min: 48px;
}

/*
 * El carnet se ensena a un comerciante y se escanea con otra camara:
 * el QR tiene que ser negro sobre blanco SIEMPRE. Por eso fijamos el
 * esquema claro y no ofrecemos modo oscuro en la pantalla del carnet;
 * iOS oscurece de oficio si no se declara.
 */
:root { color-scheme: light; }

/* Respeta a quien pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}