/* ============================================================================
   scalebatch — tokens del sitio.

   Mundo visual: MARCAJE DE PISO DE PLANTA. Pintura de trafico sobre concreto,
   franja de ambar, letra de plantilla, y el codigo de color normalizado de
   seguridad. La direccion y su contrato viven en
   `web/mockups/01-marcaje-de-piso.html`.

   CUATRO REGLAS QUE COSTARON UNA SESION, y las cuatro se midieron en pantalla:

   1. EL AMBAR VA EN BORDE Y ALERTA, NUNCA COMO FONDO DE SUPERFICIE. El
      amarillo de seguridad original (#FFD100) cansaba la vista al cubrir area
      en una pantalla de pared. Se bajo a ambar y ademas se le acoto el uso.
      Un bloque grande de --paint es el error que este comentario existe para
      impedir.

   2. UN TOKEN, UN TRABAJO, Y --ground-3 NO ES CONCRETO. Los dos primeros
      escalones de superficie son piso: concreto calido. El tercero es ACERO,
      y es un material distinto a proposito, porque lo usa el chrome (cabecera
      de calle, botones de preset). Si el tercero fuera concreto mas claro, la
      cabecera se leeria como un tramo mas de calle, que es exactamente el bug
      que se reporto.

   3. --concrete-dim ES MAS OSCURO QUE --concrete, Y ANTES NO LO ERA. Al subir
      el contraste del texto terciario se dejo el secundario sin tocar, y el
      "dim" quedo MAS CLARO que el que debia ser mas brillante. Los dos se
      recalibraron aqui: --concrete 8.6:1 y --concrete-dim 6.4:1 sobre
      --ground-2. La jerarquia ahora se lee y los dos pasan el piso de 4.5:1.

   4. EL COLOR DE ESTADO NO ES DECORACION, ES LA NORMA ANSI. Verde es paso,
      azul es AVISO, rojo es alto, ambar es precaucion. Por eso la parada
      PREVISTA es azul y no ambar: un punto de control programado es un aviso,
      no una advertencia. Cambiar uno de estos cuatro cambia lo que la pantalla
      le dice a un operario que ya sabe leerlos.

   El monitor de lotes es SIEMPRE oscuro y no ofrece tema claro: vive en una
   pantalla de pared de taller. El sitio de marketing si ofrece los dos, porque
   un visitante lo abre en un laptop a plena luz.
   ============================================================================ */

:root {
  color-scheme: dark;

  /* --- superficies: las dos primeras son PISO, la tercera es HERRAJE --- */
  --ground:    #1A1816;   /* concreto calido, el fondo de todo */
  --ground-2:  #232120;   /* concreto un escalon arriba: paneles y tarjetas */
  --ground-3:  #2E3439;   /* ACERO. chrome: cabecera de calle, controles */
  --line:      #38352F;   /* la junta entre losas */

  /* --- tinta --- */
  --ink:          #F2F2F0;  /* texto principal */
  --concrete:     #C2BCB2;  /* secundario. 8.6:1 sobre --ground-2 */
  --concrete-dim: #A6A099;  /* terciario. 6.4:1 sobre --ground-2 */

  /* --- la pintura. VER REGLA 1: borde y alerta, nunca fondo de area --- */
  --paint: #E3A21C;

  /* EL AMBAR COMO LETRA ES OTRO TOKEN QUE EL AMBAR COMO FORMA, y es la regla 2
     otra vez. Sobre concreto oscuro coinciden, asi que aqui no se nota; sobre
     superficie clara se separan y mucho: como forma #B06E00 da 3.7:1, que basta
     para una barra, y como letra hace falta #7A4A00 para llegar a 7.0:1. Tener
     un solo token obliga a elegir entre una barra apagada o una letra ilegible. */
  --paint-ink: #E3A21C;

  /* --- estado de flujo. VER REGLA 4: es la norma, no la paleta --- */
  --state-running: #00A34B;  /* verde seguridad: paso */
  --state-notice:  #1E9BE0;  /* azul aviso: parada PREVISTA */
  --state-stopped: #E01B33;  /* rojo ANSI: alto */
  --state-done:    #A6A099;  /* gris: terminado, y por eso calla */

  /* Tinta que va ENCIMA de cada estado cuando el estado es fondo. Rol distinto
     del color de estado, por la regla 2: el rojo pinta una barra de 5px y ahi
     funciona; como fondo de un rotulo necesita saber que tinta lo cruza. */
  --on-stopped: #FFFFFF;
  --on-notice:  #03202E;
  --on-paint:   #1A1816;

  /* EL ROJO COMO TINTA ES OTRO TOKEN, y esto se midio: `--state-stopped` da
     3.34:1 sobre --ground-2, por debajo del piso de 4.5:1. Como BARRA de 5px y
     como FONDO de rotulo funciona, porque ninguno de los dos es texto. Como
     texto no, y hoy solo lo salva que el unico rojo escrito va a peso 800 con
     el segundo canal detras. Cualquier texto rojo nuevo usa este.
     Es la regla 2 del encabezado otra vez: un token, un trabajo. */
  --state-stopped-ink: #FF6B7D;   /* 5.7:1 sobre --ground-2 */

  /* --- riel y respiracion --- */
  --sb-content-max:  78rem;
  --sb-page-gutter:  clamp(1rem, 4vw, 3rem);
  --sb-desktop-max:  90rem;

  /* --- tipografia. LOS ROLES SON CONTRATO DEL WORKSPACE, las familias no.
         `WEB_PATTERNS.md` §9 exige que exista font-sans para interfaz y
         font-mono con cifras tabulares para valores, codigos e IDs. Que sean
         Archivo y Martian Mono es eleccion de este producto. --- */
  --font-sans: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ── Tema claro, SOLO para el sitio de marketing ────────────────────────────
   El concreto pasa de sombra a luz de dia y la pintura se oscurece, porque el
   mismo ambar que brilla sobre concreto oscuro se lava sobre concreto claro.
   Los cuatro estados se oscurecen por lo mismo: mantienen su significado y
   recuperan contraste. */
[data-theme="light"] {
  color-scheme: light;

  --ground:    #EFEDE9;
  --ground-2:  #E2DFD9;
  --ground-3:  #CBD2D6;   /* el acero tambien se aclara, sigue siendo acero */
  --line:      #C4BEB2;

  --ink:          #17150F;
  --concrete:     #4A463D;
  --concrete-dim: #625D52;

  --paint:     #B06E00;   /* el ambar como FORMA sobre claro: 3.7:1 */
  --paint-ink: #7A4A00;   /* el ambar como LETRA sobre claro: 7.0:1 */

  --state-running: #00713A;
  --state-notice:  #0B6FA4;
  --state-stopped: #B01126;
  --state-done:    #625D52;

  --on-stopped: #FFFFFF;
  --on-notice:  #FFFFFF;
  --on-paint:   #FFFFFF;

  --state-stopped-ink: #96001A;   /* el mismo rol, con la luminancia invertida */
}

/* El monitor de lotes NO hereda el tema claro: vive en una pantalla de pared.
   Se marca con `data-surface="board"` y se queda con la paleta oscura pase lo
   que pase con la preferencia del visitante. */
[data-surface="board"] {
  color-scheme: dark;
  --ground:    #1A1816;
  --ground-2:  #232120;
  --ground-3:  #2E3439;
  --line:      #38352F;
  --ink:          #F2F2F0;
  --concrete:     #C2BCB2;
  --concrete-dim: #A6A099;
  --paint: #E3A21C;
  --paint-ink: #E3A21C;
  --state-running: #00A34B;
  --state-notice:  #1E9BE0;
  --state-stopped: #E01B33;
  --state-done:    #A6A099;
  --on-stopped: #FFFFFF;
  --on-notice:  #03202E;
  --on-paint:   #1A1816;
  --state-stopped-ink: #FF6B7D;
}