/*
 * Tokens de Grupo PASA · fuente única de verdad
 * ═════════════════════════════════════════════
 *
 * Todo lo visual de las herramientas internas sale de aquí. Si un componente
 * necesita un color, un tamaño o un radio que no esté en este archivo, la
 * respuesta correcta casi siempre es usar el que más se parezca — y si de
 * verdad falta, agregarlo aquí y no en el componente. Un valor suelto en un
 * componente es el primer paso para tener dos sistemas.
 *
 * Especificación: docs/design-system.md
 * Contrastes:     python3 tokens/verificar-contraste.py
 *
 * ── Los tres estados del tema ──────────────────────────────────────────────
 *
 * Claro es el default y vive en `:root` a secas. Oscuro se aplica por dos vías
 * que no se pisan: la preferencia del sistema, y la elección explícita del
 * usuario. El bloque de `prefers-color-scheme` va acotado con
 * `:root:not([data-tema="claro"])` — sin eso, quien tenga el sistema en oscuro
 * no podría forzar el claro, que es justo lo que promete el toggle.
 */

:root {
  /* ── color · superficies ────────────────────────────────────────────── */
  --pasa-fondo: #f0f0f0;
  --pasa-superficie: #ffffff;
  --pasa-chrome: #00142e;

  /* ── color · texto, en tres niveles ─────────────────────────────────── */
  /* La jerarquía la cargan el color y el tamaño, nunca el peso. */
  --pasa-titulo: #00095b;
  --pasa-texto: #0f0f0f;
  --pasa-soporte: #5f5d60;
  --pasa-chrome-texto: #ffffff;

  /* ── color · acción ────────────────────────────────────────────────── */
  /*
    El relleno es claro a propósito y lleva texto OSCURO encima: 9.11:1. En
    MUI hay que fijar `primary.contrastText` en oscuro, porque calcula blanco
    por omisión y reintroduce el problema de contraste en el componente más
    usado del sistema.

    El contorno no es decoración: el relleno da 1.85:1 contra la página, así
    que sin él el botón no tiene forma reconocible aunque su texto se lea
    perfecto. Es lo que exige WCAG 1.4.11 a 3:1.
  */
  --pasa-accion: #82b6f7;
  --pasa-accion-texto: #0f0f0f;
  --pasa-accion-borde: #00095b;

  --pasa-enlace: #00095b;

  /* ── color · líneas ────────────────────────────────────────────────── */
  /* Muy sutiles a propósito: guían el ojo, no dibujan una rejilla. */
  --pasa-divisor: #d8d8d8;
  --pasa-borde: #d8d8d8;
  --pasa-borde-foco: #00095b;

  /* Una franja de fila alterna en tablas densas. La ayuda de lectura más
     eficiente que existe, y gratis. */
  --pasa-fila-alterna: #f7f7f7;

  /* ── color · inhabilitado ──────────────────────────────────────────── */
  --pasa-inhabilitado-fondo: #bcbcbe;
  --pasa-inhabilitado-texto: #5f5d60;

  /* ── color · estados ───────────────────────────────────────────────── */
  /*
    Tres matices muy separados —159°, 112° y 47° entre sí— porque los paneles
    no están calibrados y muchos traen matiz azulado de fábrica.

    REGLA DURA: ninguna distinción crítica puede depender solo del color. Cada
    estado lleva ícono. Eso es lo que además resuelve el daltonismo sin
    proponérselo.
  */
  --pasa-peligro: #9f001e;
  --pasa-peligro-tinte: #f8e8ea;
  --pasa-exito: #0a6b36;
  --pasa-exito-tinte: #e5f2ea;
  --pasa-aviso: #995a00;
  --pasa-aviso-tinte: #fbf1de;

  /* Neutro/informativo: el cuarto estado, sin inventar un color nuevo. */
  --pasa-info: #00095b;
  --pasa-info-tinte: #e8ebf5;

  /* ── tipografía ────────────────────────────────────────────────────── */
  /*
    Stack del sistema, sin webfont. Cero petición de red, cero FOIT, cero
    desplazamiento de layout — y en una flota Windows / macOS / Android la
    diferencia entre Segoe UI e Inter no la nota nadie, mientras que 200 ms de
    texto invisible sí. Si Inter está instalada localmente se usa; si no, el
    sistema pone su sans moderna y nadie espera.
  */
  --pasa-fuente: Inter, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /*
    Los números en ancho fijo. No es estética: en una tabla de cantidades, las
    cifras tienen que alinearse por columna para poder compararlas de un
    vistazo, y una sans proporcional pone el 1 más angosto que el 8.
  */
  --pasa-fuente-numero: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace;

  /* Escala comprimida, razón ≈1.2. Una razón apretada lee como instrumento
     técnico; una amplia (1.333) lee como landing de marketing. */
  --pasa-txt-11: 11px;
  --pasa-txt-12: 12px;
  --pasa-txt-13: 13px;
  --pasa-txt-15: 15px;
  --pasa-txt-19: 19px;
  --pasa-txt-24: 24px;

  /* Dos pesos. Nada de 600 ni 700: la inflación de pesos es lo que fecha una
     interfaz a 2019. */
  --pasa-peso-normal: 400;
  --pasa-peso-medio: 500;

  --pasa-linea-apretada: 1.25;
  --pasa-linea: 1.5;

  /* ── espaciado ─────────────────────────────────────────────────────── */
  /*
    Dos valores para lo que se ve: 12 entre hermanos, 24 entre bandas. El ojo
    aprende la regla en tres segundos y luego lee «24 = tema nuevo» sin
    pensarlo. Tres o cuatro valores de gap destruyen esa lectura.

    Los de 4 y 8 existen para lo interno de un componente —el aire entre un
    ícono y su etiqueta—, no para separar bloques.
  */
  --pasa-esp-4: 4px;
  --pasa-esp-8: 8px;
  --pasa-esp-12: 12px;
  --pasa-esp-24: 24px;

  /* ── forma ─────────────────────────────────────────────────────────── */
  /* La firma visual. 4px en todo lo interactivo, 8px solo en badges. */
  --pasa-radio: 4px;
  --pasa-radio-badge: 8px;
  --pasa-borde-ancho: 1px;

  /* Existe para que nadie tenga que buscar «cuánta sombra». La respuesta es
     ninguna: sin sombras, sin bevel, sin gradientes. La separación se logra
     con fondo, espaciado y jerarquía. */
  --pasa-sombra: none;

  /*
    El logotipo es arte monocromo negro. En oscuro se invierte con `filter` en
    lugar de mantener un segundo archivo: invertirlo lo vuelve blanco y sigue
    leyéndose. Vive como token para que ningún componente lo escriba a mano.
  */
  --pasa-logo-filtro: none;

  /* ── movimiento ────────────────────────────────────────────────────── */
  /* Solo para comunicar estado —algo se guardó, algo se encoló—, nunca para
     adornar. Corto: en teléfonos viejos lo lento se siente roto. */
  --pasa-transicion: 120ms ease-out;

  /* ── layout ────────────────────────────────────────────────────────── */
  /*
    Barra de 64 y no de 48: es el único lugar donde vive la identidad, y con 48
    el tigre no alcanzaba a leerse.

    La marca es 160×54 —proporción 3.06:1— porque esa es la del arte. La altura
    es la que le da presencia; el ancho lo dicta el dibujo, para no cortarlo ni
    rodearlo de relleno vacío.

    El tigre sale del logotipo (`docs/img/tigre-badge.png`, reconstruido en
    blanco) y NO de la imagen de fondo del acceso: ese archivo tiene el dibujo
    tocando tres de sus cuatro bordes, así que es un fondo hecho para sangrar y
    no puede mostrar un animal completo.
  */
  --pasa-chrome-alto: 64px;
  --pasa-marca-ancho: 160px;
  --pasa-marca-alto: 54px;
  --pasa-contenido-max: 1440px;
  --pasa-control-alto: 32px;
  --pasa-control-alto-movil: 44px; /* objetivo táctil mínimo */

  /* ── la pantalla de acceso ──────────────────────────────────────────────
     El lienzo del acceso, y solo el del acceso. No es una superficie de la
     aplicación: es el único lugar donde la marca puede ser expresiva, así que
     aquí sí hay degradado y una imagen grande. Las reglas de «sin sombra, sin
     bisel, radio de 4» siguen aplicando a los componentes que van encima.

     En claro son los tres azules de prospeccion.pasachihuahua.mx tal cual —a
     135° y con el tigre a 0.85— porque el objetivo es que se vea igual. No
     salen de la paleta de operativo y por eso viven aquí abajo y no arriba,
     entre los colores del sistema: no se usan en ningún otro lugar.

     En oscuro no hay degradado: el chrome plano y el tigre al 40%. Bajar la
     opacidad es lo que deja leer la tarjeta, que ahí también es navy. */
  --pasa-acceso-degradado: linear-gradient(135deg, #062a66 0%, #0b3d91 45%, #2f80ed 100%);
  --pasa-acceso-textura: 0.85;
}

/* ── modo oscuro ─────────────────────────────────────────────────────────
 *
 * Derivado, no tomado de operativo —que solo definió claro— y verificado con
 * tokens/verificar-contraste.py. Dos reglas lo gobiernan:
 *
 *   1. El relleno de acción es EL MISMO en los dos modos. El botón primario no
 *      cambia de identidad al apagar la luz.
 *   2. Se conserva la familia navy del chrome, para que el modo oscuro se lea
 *      como el mismo sistema y no como otra marca.
 */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --pasa-fondo: #0b1524;
    --pasa-superficie: #121e30;
    --pasa-chrome: #00142e;

    --pasa-titulo: #a8c8f5;
    --pasa-texto: #e8edf5;
    --pasa-soporte: #9aa7b8;

    /* En oscuro el relleno ya da 8.70:1 contra la página: el contorno es del
       mismo color, o sea que no hay contorno y no hace falta. */
    --pasa-accion-borde: #82b6f7;
    --pasa-enlace: #a8c8f5;

    --pasa-divisor: #22304a;
    --pasa-borde: #22304a;
    --pasa-borde-foco: #82b6f7;
    --pasa-fila-alterna: #16233a;

    --pasa-inhabilitado-fondo: #2a3446;
    --pasa-inhabilitado-texto: #9aa7b8;

    --pasa-peligro: #ff9aa8;
    --pasa-peligro-tinte: #2a0e14;
    --pasa-exito: #7bd8a4;
    --pasa-exito-tinte: #0c2318;
    --pasa-aviso: #efc178;
    --pasa-aviso-tinte: #241804;

    --pasa-info: #a8c8f5;
    --pasa-info-tinte: #14203a;

    --pasa-logo-filtro: invert(1) brightness(1.7);

    /* Sin degradado, y el tigre al 40%: la tarjeta también es navy y con el
       tigre a 0.85 se perdía dentro del fondo. */
    --pasa-acceso-degradado: none;
    --pasa-acceso-textura: 0.4;
  }
}

:root[data-tema="oscuro"] {
  --pasa-fondo: #0b1524;
  --pasa-superficie: #121e30;
  --pasa-chrome: #00142e;

  --pasa-titulo: #a8c8f5;
  --pasa-texto: #e8edf5;
  --pasa-soporte: #9aa7b8;

  --pasa-accion-borde: #82b6f7;
  --pasa-enlace: #a8c8f5;

  --pasa-divisor: #22304a;
  --pasa-borde: #22304a;
  --pasa-borde-foco: #82b6f7;
  --pasa-fila-alterna: #16233a;

  --pasa-inhabilitado-fondo: #2a3446;
  --pasa-inhabilitado-texto: #9aa7b8;

  --pasa-peligro: #ff9aa8;
  --pasa-peligro-tinte: #2a0e14;
  --pasa-exito: #7bd8a4;
  --pasa-exito-tinte: #0c2318;
  --pasa-aviso: #efc178;
  --pasa-aviso-tinte: #241804;

  --pasa-info: #a8c8f5;
  --pasa-info-tinte: #14203a;

  --pasa-logo-filtro: invert(1) brightness(1.7);

  --pasa-acceso-degradado: none;
  --pasa-acceso-textura: 0.4;
}

/* ── base ────────────────────────────────────────────────────────────────
 *
 * Lo mínimo para que los tokens se noten sin imponer un reset. Una aplicación
 * que ya trae el suyo puede ignorar este bloque y quedarse solo con las
 * variables de arriba.
 */

.pasa {
  background: var(--pasa-fondo);
  color: var(--pasa-texto);
  font-family: var(--pasa-fuente);
  font-size: var(--pasa-txt-13);
  font-weight: var(--pasa-peso-normal);
  line-height: var(--pasa-linea);
}

/*
  Toda cifra comparable va con esto. `tabular-nums` es el cinturón por si la
  fuente monoespaciada no cargó: pide las variantes de ancho fijo del propio
  tipo, que casi toda sans moderna trae.
*/
.pasa-num {
  font-family: var(--pasa-fuente-numero);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/*
  Foco visible, siempre, y con la misma forma en todas las apps. Un anillo de
  2px separado 2px del elemento: se ve sobre relleno claro y sobre navy, y no
  desplaza el layout como haría un borde.
*/
.pasa :focus-visible {
  outline: 2px solid var(--pasa-borde-foco);
  outline-offset: 2px;
}

/* Quien pidió menos movimiento, recibe menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .pasa * {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}