/* CronosControl — design tokens.
 * Direction B, "L'instrument". Decided 2026-09-10, see docs/07-diseno.md section 4.
 *
 * Every colour pair used for text on the mural must reach 7:1, and every meaningful
 * non-text element 3:1. That is not a convention here: test/contrast.test.js reads
 * this file and fails the build when a pair drops below its floor. Change a value and
 * the test tells you what it broke.
 *
 * Sizes are parameterised on --touch and the type scale so that confirming a different
 * tablet does not mean redrawing anything.
 */

:root {
  /* --- Ground and ink. One ground, fixed. See section 2.1: it is the colour of
     cold-rolled steel, and deliberately not a tinted near-black. --- */
  --acer:        #272C30;
  --tinta:       #F4F7F7;   /* on --acer: 13.09:1 */
  --tinta-suau:  #B4C0C3;   /* on --acer:  7.57:1 — this is the floor, do not darken */

  /* The only structural device in the product. Separates keypad rows, draws the
     working day. Was #4A5257 and measured 1.77:1, under the 3:1 a meaningful
     non-text element needs. See section 3.5. */
  --filet:       #707A80;   /* on --acer: 3.21:1 */

  /* --- The two actions. They are plates, not text, and they differ in POLARITY,
     not only in hue: entering is a light plate with dark ink, leaving is a dark
     plate with light ink. That is why the distinction survives having colour
     removed entirely — the two plates separate 5.43:1 in greyscale. See 3.4. --- */
  --entrada:            #4FD07C;
  --entrada-tinta:      #0E1214;   /* on --entrada: 9.55:1 */
  --sortida:            #8F2018;
  --sortida-tinta:      #F7FAFA;   /* on --sortida: 8.38:1 */
  /* The dark plate reaches only 1.60:1 against the ground, under the 3:1 WCAG 2.2
     SC 1.4.11 asks of a control's boundary. Fixed with a rule around the plate rather
     than by lowering the red, which would break the 8.38:1 of the ink inside it.
     Measured on the rendered screen: the rule sits at 7.57:1 against the ground. */
  --sortida-vora:        #B4C0C3;
  --sortida-vora-gruix:  2px;

  /* Pressed key: the whole block inverts. Same language as the plates above. */
  --premut-fons:  var(--tinta);
  --premut-tinta: var(--acer);

  /* --- The document surface: the management desktop, section 6 of docs/07.
     "El escritorio no hereda el aparato: lo invierte", and it inverts LITERALLY —
     the same two colours exchanged, not a third one approximating the idea. The
     bone that section 2.4 asked for would have been a colour neither surface
     uses, in a direction whose whole thesis is one ground and no ambience.

     One new colour in the entire second surface, and it is the secondary ink.

     --doc-filet is the same --filet as the mural, and that is the finding: it
     clears 3:1 on BOTH grounds — 3.21:1 on steel, 4.07:1 on paper — because the
     two grounds are each other's inversion and it falls between them. The only
     structural device in the product is literally the same object on both. --- */
  --doc-fons:       var(--tinta);
  --doc-tinta:      var(--acer);    /* on --doc-fons: 13.09:1, the mural's own number */
  --doc-tinta-suau: #454E52;        /* on --doc-fons:  7.91:1 */
  --doc-filet:      var(--filet);   /* on --doc-fons:  4.07:1 */

  /* --- Densidad y medida del panel. Sección 11.3 de docs/07-diseno.md, dirección C.
     UN PANEL TIENE ZONAS DE LECTURA Y ZONAS DE TRABAJO, y hasta el 15 de septiembre de 2026
     tenían el mismo espaciado: `padding: 14px 16px 14px 0` en toda tabla y el mismo `gap` en
     un formulario. Una tabla que se escanea y un formulario que se rellena no piden lo mismo.

     No hay una tercera tinta y se dice por qué: entre el secundario (7,91:1) y el suelo de 7:1
     solo caben 0,8 puntos —el escalón más claro que aguanta es #4C5559, a 7,09:1— y una tinta
     que nadie distingue no es un nivel de jerarquía, es un token que nadie sabrá cuándo usar.
     El tercer nivel se resuelve con TAMAÑO, como decía la dirección que pasaría si la medición
     no daba. La regla manda sobre la dirección. --- */
  --pas-lectura: 10px;   /* lo que se escanea: tablas, listas, la cola */
  --pas-treball: 20px;   /* lo que se rellena: formularios, diálogos */
  --doc-mesura:  68ch;   /* la medida del texto seguido. Las tablas van a sangre */

  /* There is NO green and NO red here. They are the colours of the moment of
     punching, and punching never happens on this surface — section 6.3. Entering
     and leaving read as the words they are. */

  /* --- Type. One family, no exceptions: IBM Plex Sans is the only candidate whose
     digits are tabular without being asked, which is what keeps a clock that
     repaints every second from dancing. See section 0.1. --- */
  --familia: "IBM Plex Sans", system-ui, sans-serif;

  /* The hour: slightly condensed to leave air, heavier to carry at size.
     Checked against a specimen at 150px across five axis settings; below 550 the
     figures go thin and generic. See section 4.2c. */
  --hora-amplada: 85;
  --hora-pes:     550;

  /* Bringhurst's traditional sequence, unmodified. An instrument uses catalogue
     sizes, not a geometric progression of its own. See section 2.3. */
  --mida-12:  12px;  --mida-14:  14px;  --mida-16:  16px;  --mida-18:  18px;
  --mida-21:  21px;  --mida-24:  24px;  --mida-36:  36px;  --mida-48:  48px;
  --mida-60:  60px;  --mida-72:  72px;  --mida-96:  96px;  --mida-144: 144px;
  --mida-192: 192px;

  /* --- Geometry. Parameterised: the reference device is a 10" Android in portrait
     at 800x1280, confirmed, but a personal phone is the other client of the same
     interface. --- */
  --touch:        88px;   /* PLAN.md 5.2 floor */
  --tecla-alt:    152px;  /* The key height, FIXED and identical on every screen that shows a
                             keypad: it must not move between screen A and screen B. 200x152
                             is 30.400 px2, well over the 88px floor and 1,6x direction A. */
  --tecla-calle:  44px;   /* column gutter — half of why the keypad does not read
                             as a table. See section 4.3. */
  --marge:        56px;
  --radi:         4px;    /* one small radius, on plates only. Keys have none. */
}

/* --- El movimiento. Sección 8 de docs/07-diseno.md -------------------------------------
   TRES duraciones y DOS curvas para todo el producto, por el mismo motivo por el que hay
   una sola familia tipográfica y un solo filete: un número por sitio no es un sistema, es
   una acumulación de decisiones que nadie volvió a mirar.

   Las duraciones son cortas porque la superficie que más se usa es una pared donde se
   ficha cuatro veces al día durante cinco años, y medio segundo repetido miles de veces
   no es elegancia, es espera. --- */
:root {
  /* El acuse de recibo: la tecla que invierte, el foco, el botón que se hunde. Por debajo
     de ~100 ms el ojo lo lee como instantáneo, y esto NO quiere ser instantáneo: quiere
     decir "te he oído". Es el número que ya tenía el mural, medido y sin motivo para
     moverlo. */
  --durada-toc: 120ms;

  /* Lo que llega: un detalle que se despliega, una pestaña que cambia, una ficha que se
     abre. Solo en panel y móvil, que es donde hay tiempo. */
  --durada-arriba: 160ms;

  /* El único sitio donde se gasta, y se gasta a propósito: el sello del fichaje. Era 140
     y no bastaba -- ver 8.6. No retrasa nada: el fichaje ya está confirmado y escrito
     cuando esto empieza. */
  --durada-segell: 220ms;

  /* Entrar: arranque rápido, cola larga, PARADA SECA. Sin rebote, que en un instrumento
     dice que algo se escapó y volvió. Es la curva que el mural ya usaba desde la fase 4,
     y se queda como la única de entrada del producto. */
  --corba-arriba: cubic-bezier(.2, .9, .3, 1);

  /* Salir: lo contrario. Lo que se va acelera y desaparece, porque una cosa que se retira
     despacio pide que la mires mientras se va. */
  --corba-marxa: cubic-bezier(.4, 0, 1, 1);
}

/* Las duraciones a cero, y NADA MÁS a cero. Reducir el movimiento no es quedarse sin
   saber si el sistema te ha oído: la tecla sigue invirtiendo, el sello sigue apareciendo,
   el detalle sigue abriéndose. Lo que desaparece es el tránsito, no la respuesta. Una
   sola ruta de código, sin una segunda que mantener. */
@media (prefers-reduced-motion: reduce) {
  :root { --durada-toc: 0ms; --durada-arriba: 0ms; --durada-segell: 0ms; }
}