/* =============================================================
   ui/comprador-tokens.css — los colores y las letras del comprador
   =============================================================
   La "hoja de contactos" (PLAN.md, Fase 5, punto 8): elegir fotos como lo
   hace el fotógrafo, cada foto un cuadro con su número en el borde y lo
   elegido marcado con un círculo de lápiz.

   SOLO TOKENS. Esta hoja redefine en `:root` los que ya existen en
   `style.css` y agrega los del diseño. La cargan las cuatro páginas del
   comprador DESPUÉS de `style.css` (a igual especificidad gana la que viene
   después) y NO la carga el panel: así el panel sigue con sus colores sin
   que haya que tocar una sola regla suya. La categoría de `check.mjs` *"la
   hoja del comprador no entra al panel"* vigila las dos cosas.

   Los contrastes se miden en `check.mjs` (*"los colores del comprador pasan
   el contraste"*) sobre los valores de este archivo: si cambiás uno y deja de
   leerse, el chequeo lo nombra.

   Las cinco reglas de la dirección:
   1. El rojo (`--lapiz`) significa "la elegiste". Nada más lo usa.
   2. El ámbar (`--tinta`) es información del rollo: números de cuadro,
      cantidades, precio. Nunca un botón.
   3. Nada tapa la foto.
   4. Una sola animación: el círculo que se dibuja al elegir.
   5. El botón principal va en papel, uno por pantalla.
   ============================================================= */

:root {
  color-scheme: dark;

  /* La paleta */
  --bg: #1E2023;              /* base de película: gris carbón, no negro */
  --bg-2: #2A2D31;            /* tira: campos, ventanas, tarjetas */
  --bg-3: #33363B;
  --line: #3A3D42;            /* corte: separadores, decorativo */
  --line-2: #767A81;          /* el borde de los controles */
  --borde-campo: #767A81;     /* 3,79 sobre la base · 3,21 sobre una ventana */
  --text: #ECE9E2;
  --papel: #ECE9E2;
  --text-2: #A3A098;
  --text-3: #96938C;          /* 5,33 sobre la base · 4,51 sobre una ventana (antes daba 3,72) */
  --tinta: #E3A72F;           /* la tinta del borde de la película */
  --lapiz: #F34E42;         /* el lápiz graso: solo lo que elegiste */
  --cuarto-oscuro: #141517;   /* el fondo del visor, para mirar la foto */
  --ladrillo: #3A2422;        /* los errores, que no se confunden con el rojo */
  --ladrillo-borde: #8C3A33;
  --danger: #E39A92;

  /* Los botones principales pasan a papel (regla 5) */
  --accent: #ECE9E2;
  --accent-2: #F7F5F0;
  --accent-soft: rgba(236, 233, 226, 0.10);
  --accent-soft-2: rgba(236, 233, 226, 0.20);
  --accent-12: rgba(236, 233, 226, 0.12);
  --accent-40: rgba(236, 233, 226, 0.4);
  --sobre-color: #1E2023;     /* texto sobre un botón papel o sobre el rojo */

  /* Lo que va sobre una foto, en papel y no en blanco puro */
  --sobre-foto: #ECE9E2;
  --cabecera: rgba(30, 32, 35, 0.92);

  /* Los errores, en ladrillo */
  --error-fondo: #3A2422;
  --error-borde: #8C3A33;
  --error-texto: #ECE9E2;

  /* Las letras */
  --fuente-titulo: 'Anybody', 'Instrument Sans', sans-serif;
  --fuente-marca: 'Anybody', 'Instrument Sans', sans-serif;
  --fuente-texto: 'Instrument Sans', -apple-system, sans-serif;
  --fuente-cuadro: 'Doto', ui-monospace, monospace;
  /* Anybody se pide en un solo corte —ancho 75, peso 800— y los títulos lo
     piden así para que el navegador no busque otro. */
  --peso-titulo: 800;
  --ancho-titulo: 75%;
}