/* =====================================================================
   Laboratorio - Tokens
   Los colores, las medidas, las tipografias y las dos variantes de tema.

   Parte de la hoja de estilos del Laboratorio, que se sirve en varios archivos
   enlazados en orden desde src/views/_estilos.php. El orden importa:
   la cascada es la concatenacion de todos ellos, y este va primero
   porque todo lo demas usa lo que se define aca.
   =====================================================================

   Todos los colores salen de variables. El tema oscuro solo redefine las
   variables, no vuelve a declarar componentes.

   TEMA: el claro es el predeterminado, siempre.

   A proposito NO se usa @media (prefers-color-scheme: dark): con esa regla el
   sistema operativo decidia por el operador y la sala terminaba viendo la
   aplicacion en oscuro sin haberlo pedido. El oscuro se activa solo cuando el
   usuario lo elige con el boton de la cabecera, que guarda la preferencia en
   una cookie y el servidor la escribe como data-tema="oscuro" en <html>.

   Al venir del servidor, el tema correcto se aplica en el primer pintado: no
   hay parpadeo de claro a oscuro al cargar la pagina.

   LOS NOMBRES DICEN EL PAPEL, NO EL COLOR
   ---------------------------------------
   Antes se llamaban por el color: azul-900, azul-800, azul-600 y azul-100.
   Mientras el acento fue azul el nombre alcanzaba; el dia que deje de serlo
   -y el plan es que cada sala tenga el suyo- un token con "azul" en el
   nombre guardando un verde es una trampa para el que venga despues. Ahora
   se llaman por lo que hacen:

     --banda          la barra oscura de arriba, y nada mas
     --acento-fuerte  el relleno de lo elegido: boton primario, chip activo
     --acento         enlaces, bordes de lo activo, texto de acento
     --acento-suave   fondos teñidos, para marcar sin gritar

   CONTRASTE
   ---------
   Cada par texto/fondo de este archivo llega al minimo AA de 4.5:1. El
   --texto-tenue anterior estaba en 2.8:1 -es el color de las fechas y de
   todas las aclaraciones chicas-, asi que ahora es mas oscuro: se lee.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Tema claro (predeterminado)
   --------------------------------------------------------------------- */
:root {
  /* Alinea los controles nativos del navegador (scrollbars, selectores de
     fecha) con el tema, si no un input[type=date] se ve oscuro sobre claro. */
  color-scheme: light;

  --banda:         #101826;
  --acento-fuerte: #1a3fa8;
  --acento:        #1d4ed8;
  /* Solo para el hover de lo que ya está relleno de acento. No es "el
     acento un poco más claro": es el otro color que también aguanta letra
     blanca encima, y en oscuro tiene que ir para el otro lado. */
  --acento-hover:  #2856cc;
  --acento-suave:  #e7ecfb;
  /* La variante del acento para usar ENCIMA de la banda. Hace falta porque
     en el tema claro el acento es oscuro y la banda también: una barra de
     --acento sobre --banda da 2.65:1, o sea que no se ve. Esta es clara y
     funciona sobre las dos bandas, la del tema claro y la del oscuro, así
     que no se redefine por tema: solo por sala. */
  --acento-banda:  #7fb0ff;

  /* El fondo es un gris cálido, no azulado: deja que el azul del acento y
     el rojo del semáforo sean lo único frío de la pantalla. */
  --fondo:        #f1f0ec;
  --fondo-panel:  #ffffff;
  --fondo-suave:  #f8f7f4;
  --fondo-hover:  #eae8e2;

  --texto:        #14181f;
  --texto-suave:  #57534c;
  --texto-tenue:  #6b665d;

  --borde:        #e2ded5;
  --borde-fuerte: #ccc7bd;
  /* El borde de en medio: para un dibujo que SIGNIFICA algo y no solo
     separa. --borde-fuerte da 1.68:1 contra el panel, que alcanza para una
     linea divisoria pero no para un punto que dice "este hito todavia no
     paso": eso es contenido no textual y la pauta pide 3:1. Este da
     exactamente 3.00:1 en claro y 3.58:1 en oscuro. Lo usa la via de una
     parte, en componentes.css. */
  --borde-medio:  #9c9488;
  /* Borde de máximo contraste: casi negro sobre fondo claro. En el tema oscuro
     se redefine a blanco. Se usa para que cada tarjeta del teléfono resalte. */
  --borde-contraste: #14181f;

  --verde:      #177244;
  --verde-bg:   #e4f2e9;
  --ambar:      #8a5a00;
  --ambar-bg:   #f8efdc;
  --rojo:       #b3261e;
  --rojo-bg:    #fbeae7;
  --violeta:    #6d28a8;
  --violeta-bg: #f0e9fa;
  --gris-bg:    #eae8e2;

  /* Los paneles se separan con un borde, no con una sombra: la sombra
     queda como un apoyo mínimo para que la cabecera se despegue. */
  --sombra: 0 1px 2px rgba(20, 24, 31, .05);

  /* Lo que ocupa la barra de arriba cuando esta pegada. No es decorativo:
     el bloque pegajoso de cada listado -el titulo con las pestañas- se pega
     JUSTO debajo de ella, y sin esta medida se le mete atras.

     Arranca en CERO y lo escribe fs.js con el alto medido. Cero no es un
     valor de relleno: es exactamente lo que corresponde cuando la barra NO
     esta pegada, que es el caso del telefono y el de una pagina sin
     JavaScript. O sea que si nadie la escribe, la pantalla queda como
     estaba siempre.

     No lleva un numero escrito a mano porque no hay uno solo que sirva: la
     barra mide 56px a 1280, 101 a 900 y 125 a 780 -entre los 700 y los 1000
     el menu se va a dos renglones-. Ver .cabecera en armazon.css. */
  --alto-cabecera: 0px;

  /* Lo mismo, para la cabecera de la ficha de reparacion, que tambien se
     queda a la vista. Solo la usa scroll-padding-top, que tiene que dejar
     libres las DOS: la barra de la aplicacion y esta. La cabecera de la
     ficha no necesita la medida para pegarse -se cuelga de --alto-cabecera
     con un `top` y listo-, asi que sin JavaScript queda en cero y lo unico
     que se pierde es el margen al llegar con Tab. */
  --alto-ficha: 0px;

  --radio: 4px;
  --radio-chico: 3px;

  /* Las tres familias se sirven desde el propio servidor; ver fuentes.css.
     Detrás de cada una va el respaldo del sistema, que es lo que se ve si
     el .woff2 no llegó a cargar. */
  --fuente:         "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-display: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --fuente-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

/* ---------------------------------------------------------------------
   Tema oscuro: solo cuando el operador lo elige.
   Redefine unicamente las variables; ningun componente se vuelve a declarar.
   --------------------------------------------------------------------- */
:root[data-tema="oscuro"] {
  color-scheme: dark;

  /* La banda se va MAS oscura que el contenido. En claro es la parte
     oscura de la pantalla; en oscuro, la única manera de que siga
     leyéndose como cabecera es que sea lo más oscuro de todo. */
  --banda:         #070c13;
  /* El acento se aclara para leerse sobre fondo oscuro, y el relleno se
     queda en un azul que aguanta letra blanca encima. */
  --acento-fuerte: #2d62e0;
  --acento:        #7fb0ff;
  --acento-hover:  #3f70e0;
  --acento-suave:  #16233a;

  --fondo:        #0d1219;
  --fondo-panel:  #151d28;
  --fondo-suave:  #1b2532;
  --fondo-hover:  #222d3b;

  --texto:        #e9edf3;
  --texto-suave:  #9fabbb;
  --texto-tenue:  #7c8899;

  --borde:        #29333f;
  --borde-fuerte: #3a4654;
  --borde-medio:  #66748a;
  --borde-contraste: #ffffff;

  --verde:      #5cc98d;
  --verde-bg:   #133023;
  --ambar:      #e5aa4a;
  --ambar-bg:   #2a2111;
  --rojo:       #f28b83;
  --rojo-bg:    #2c1513;
  --violeta:    #c7a0ed;
  --violeta-bg: #2b1f3d;
  --gris-bg:    #222d3b;

  --sombra: 0 1px 2px rgba(0, 0, 0, .35);
}

/* ---------------------------------------------------------------------
   El acento de cada sala

   El servidor escribe data-sala en <html>, al lado del data-tema, y aca
   cada sala redefine su acento. Sirve para saber de un vistazo donde
   estas parado: en la sala equivocada, un REQUI cargado no se deshace
   con Ctrl+Z.

   Los tres tonos salen de rotar el azul original y despues ajustar el
   brillo hasta que cada par pase el minimo AA de 4.5:1. Estan los tres
   escritos aunque el de Wilde sea igual al predeterminado: se leen como
   una tabla de tres salas y no como "dos salas y la que quedo".

   NINGUNO es rojo, ambar, verde ni violeta, y no es casualidad: esos
   cuatro son los colores del estado de una reparacion, y --acento
   aparece 87 veces adentro del contenido. Una sala violeta pondria dos
   violetas distintos en la misma pantalla, uno queriendo decir "REP. POR
   LAB" y el otro nada.

   Con "Todas las salas" no hay data-sala y queda el acento
   predeterminado, que es justamente lo que corresponde: no estas parado
   en ninguna.

   La especificidad esta pensada: :root[data-sala] empata con
   :root[data-tema="oscuro"], asi que el par oscuro de cada sala lleva
   los dos atributos y gana por tener uno mas. Si alguna vez se agrega
   una sala, son dos lineas y van juntas.
   --------------------------------------------------------------------- */
:root[data-sala="rebisco"] { --acento: #10776e; --acento-fuerte: #0f635c; --acento-hover: #1a847b; --acento-suave: #e7fbf9; --acento-banda: #6fd8cd; --sala-cabecera: #78b8b0; }
:root[data-sala="biyemas"] { --acento: #2d1dd8; --acento-fuerte: #261aa8; --acento-hover: #3628cc; --acento-suave: #e9e7fb; --acento-banda: #8a7fff; --sala-cabecera: #d5968c; }
:root[data-sala="wilde"]   { --acento: #1d4ed8; --acento-fuerte: #1a3fa8; --acento-hover: #2856cc; --acento-suave: #e7ecfb; --acento-banda: #7fb0ff; --sala-cabecera: #c7a173; }

:root[data-tema="oscuro"][data-sala="rebisco"] { --acento: #6fd8cd; --acento-fuerte: #138077; --acento-hover: #15837a; --acento-suave: #163a37; }
:root[data-tema="oscuro"][data-sala="biyemas"] { --acento: #8a7fff; --acento-fuerte: #3c2de0; --acento-hover: #4c3fe0; --acento-suave: #19163a; }
:root[data-tema="oscuro"][data-sala="wilde"]   { --acento: #7fb0ff; --acento-fuerte: #2d62e0; --acento-hover: #3f70e0; --acento-suave: #16233a; }