/* ============================================================================
   Matchitfy — el tema de las pantallas de autenticacion.

   Junto con auth.config.js es LO UNICO que este producto escribe: el HTML, el
   CSS y el JS de las cuatro pantallas viven en features/id/web y son los mismos
   para todo el taller.

   SE MAPEA, NO SE REPITE. Importa los tokens del producto y apunta a ellos. Si
   aqui se escribieran los colores otra vez, habria dos verdades sobre el mismo
   azul y el boton de entrar terminaria de un tono distinto al del resto del
   producto la primera vez que alguien retoque uno de los dos.

   Y gratis: tokens.css ya resuelve claro, oscuro y el interruptor manual
   (`[data-theme]`), asi que las cuatro pantallas heredan el tema completo sin
   una sola regla de mas aqui.
   ============================================================================ */
@import url("/css/tokens.css");

:root {
  --auth-font:         var(--font);
  --auth-font-display: var(--font);

  --auth-bg:      var(--bg);
  --auth-surface: var(--surface);
  --auth-sunk:    var(--sunk);

  --auth-ink:   var(--ink);
  --auth-ink-2: var(--ink-2);
  --auth-line:  var(--line);

  /* El boton de este producto es de tinta, no de color de marca: alto
     contraste y nada de ruido. Es la decision que ya estaba tomada en site.css
     (`background: var(--ink); color: var(--bg)`) y la que le corresponde a una
     audiencia que castiga el adorno.

     `--auth-accent-ink` invertido a proposito: sobre tinta, el texto es el
     fondo de la pagina. En oscuro se invierte solo, porque los dos tokens
     cambian juntos. */
  --auth-accent:     var(--ink);
  --auth-accent-ink: var(--bg);

  /* `--gap` es el ambar del descuadre, que en este producto ES el color de
     "mira esto". Reusarlo para el error mantiene una sola gramatica de color en
     vez de meter un rojo que no existe en ningun otro sitio. */
  --auth-danger: var(--gap);
  --auth-ok:     var(--ok);

  --auth-radius: var(--r);
}