/*
 * 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: NO se anotan a mano. Los calcula `php bin/contrast.php`, que lee
 * este fichero, resuelve las variables y comprueba cada pareja que se usa de
 * verdad contra WCAG 2.1. Devuelve 1 si alguna incumple, así que se pasa
 * DESPUES de sustituir la paleta y ANTES de desplegar.
 *
 * Lo que hay que saber al cambiar la paleta:
 *  - El par flojo es blanco/naranja: 3.00:1. Sirve para texto GRANDE y nada
 *    mas. "Grande" en WCAG son 24px, o 18.7px si va en negrita — un titular
 *    de 17px en negrita NO cuenta, y es el error facil.
 *  - El par blanco/naranja al reves (naranja sobre blanco) mide igual: el
 *    contraste es simetrico. Da lo mismo cual va de fondo.
 *  - Los tintes 050 son fondos de distintivo con su 600 encima. Van justos:
 *    el verde daba 4.49 contra un minimo de 4.5 y hubo que aclararlo.
 */
:root {
  /* Marca */
  --afa-blau-900:    #10243A;
  --afa-blau-700:    #1B3A5C;
  --afa-blau-500:    #2C5F8D;
  --afa-taronja-500: #E07A2F;
  --afa-taronja-050: #FDF1E6;
  --afa-crema:       #FBF8F3;
  --afa-blanc:       #FFFFFF;

  /* Estado del carnet — nunca solo color: van siempre con icono ✓/✗ */
  --afa-verd-600:    #1B7F46;
  --afa-verd-050:    #EAF7EF;   /* aclarado: con #E8F5ED el par daba 4.49 */
  --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;
  /* Para tablas de datos y registros: las cifras tienen que alinearse en
     columna, y una proporcional no lo hace. */
  --afa-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --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;
  /* 900 existe DE VERDAD en la pila del sistema: SF Pro Black en iOS y
     macOS, Roboto Black en Android. No es negrita falsa —el navegador no
     engorda trazos, usa otro corte de la familia—, así que se puede pedir
     sin miedo. Reservado para logotipo y titulares grandes: a cuerpo de
     texto, 900 no se distingue de 800 y solo cierra los contornos. */
  --afa-pes-negre:  900;

  /* 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;

  /*
   * Capas translúcidas. Viven aquí y no escritas en cada hoja porque llevan
   * DENTRO un color de la paleta: un rgba() suelto por ahí se queda con el
   * azul viejo el día que cambie la paleta, y no se nota hasta que alguien lo
   * mira de cerca. Si se toca --afa-blau-900, hay que tocar --afa-vel.
   *
   * Se escriben en rgba y no con color-mix() a propósito: color-mix pide
   * navegadores recientes y, si no lo entiende, la declaración se cae entera
   * y el velo del diálogo desaparece. Un valor literal funciona en todo.
   */
  --afa-vel:        rgba(16, 36, 58, .6);      /* velo detrás de los diálogos */
  --afa-realc-clar: rgba(255, 255, 255, .14);  /* realce sobre fondo oscuro */
  --afa-vora-clara: rgba(255, 255, 255, .35);  /* borde sobre fondo oscuro */

  /* 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;
}

/*
 * NADA de franjas de color a la izquierda de las cajas.
 *
 * Es un recurso cómodo y por eso está en todas partes, lo que hace que un
 * proyecto parezca hecho con la plantilla de otro. Aquí los estados se marcan
 * de dos maneras propias:
 *
 *  - Los avisos sin leer llevan el TRIÁNGULO del logotipo (la muntanya, el
 *    "cim") delante del título. Es el motivo de la casa, no un adorno
 *    genérico.
 *  - Los mensajes de aviso llevan una MARCA CIRCULAR con el mismo lenguaje
 *    de símbolos que el validador (✓ / ✗ / !), sobre fondo teñido.
 *
 * En los dos casos el color va acompañado de forma y de peso tipográfico, así
 * que siguen funcionando sin distinguir colores.
 */

/*
 * El atributo hidden tiene que ganar SIEMPRE.
 *
 * El navegador lo aplica con una regla propia, [hidden] { display: none }, que
 * pesa menos que cualquier clase. Así que un `display: flex` en una clase lo
 * anula sin avisar: el elemento sigue oculto para los lectores de pantalla
 * pero se ve en pantalla.
 *
 * Es exactamente lo que pasó con las notas: la caja estaba vacía y "oculta",
 * pero .nota { display: flex } la mantenía visible, y como la marca circular
 * es un pseudoelemento, en el móvil aparecía un (!) suelto debajo del carnet.
 *
 * Este es el sitio donde !important es correcto: hidden es una instrucción
 * semántica y ninguna regla de maquetación debería poder contradecirla.
 */
[hidden] { display: none !important; }

/*
 * 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;
  }
}