/* ============================================================
   TOKENS — la única fuente de color, tipografía y forma.

   CAPA 1 de tres: primitivas. Aquí viven los valores crudos y NADA que hable
   de intención — eso es la capa 2 (`alias.css`). Una pantalla que use un
   primitivo directamente se salta la capa semántica.

   Cada valor sale de `docs/design/DIRECCION.md` — la autoridad de forma — o de
   un cálculo de contraste comprobado contra el papel. Un token sin línea
   detrás es un token inventado y se borra.

   Desde el 27-ago-2026 la piel es la dirección **B · Pizarra** (DIRECCION.md
   §6, elegida sobre 24 capturas): se lee a dos metros, no a cincuenta
   centímetros. La medición de superhuman.com sigue en
   `docs/ui/superhuman-medido.json` como ENTRADA, no como criterio: los siete
   rasgos que se heredan y los seis que se descartan están en §3, con motivo.
   ============================================================ */

/* --- Las tres familias. Sustituciones libres de las de la referencia:
   Super Sans VF -> Instrument Sans · Super Serif VF -> Instrument Serif
   Super Sans Mono VF -> JetBrains Mono. Variables, así que 460 existe.
   Autoalojadas: la consola del turno no depende de una CDN. --- */
@font-face{font-family:"Instrument Sans";src:url("/worker/fonts/InstrumentSans.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("/worker/fonts/InstrumentSerif.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/worker/fonts/JetBrainsMono.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}

:root{
  /* --- papel y tinta (crudo.fondos[0..1], crudo.textos[0]) --- */
  --papel:#F7F5F2;
  --papel-2:#F2F0EB;
  --papel-3:#EDEBE5;          /* tercera capa, interpolada entre las dos medidas */
  --tinta:#16150F;            /* 16.81:1 sobre papel — B sube el contraste */
  --tinta-70:rgba(22,21,15,.72);
  --tinta-45:rgba(22,21,15,.5);
  --tinta-12:rgba(22,21,15,.14);
  --tinta-06:rgba(22,21,15,.07);

  /* --- el único acento. Verde hondo, no el morado #714CB6 de Superhuman: era
     su identidad, no la de Ichu (DIRECCION.md §3). 10.29:1 sobre papel. --- */
  --acento:#0C4243;
  --acento-06:rgba(12,66,67,.07);
  --acento-14:rgba(12,66,67,.16);
  --lavanda:#CFE3DF;          /* relleno; tinta encima da 13.68:1 */

  /* --- bloques profundos a sangre (crudo.fondos[2..3]) --- */
  --ciruela:#421D24;          /* blanco encima 14.66:1 */
  --verde-hondo:#0C4243;      /* blanco encima 11.19:1 */
  --sobre-hondo:#FFFFFF;
  /* Texto encima de un color de ESTADO relleno. De dia los estados son oscuros
     y quiere blanco (7,5:1 el peor); de noche son claros y quiere tinta. Un
     solo --sobre-hondo no sirve para las dos caras. */
  --sobre-estado:#FFFFFF;
  --sobre-hondo-80:rgba(255,255,255,.8);
  --linea-hondo:rgba(255,255,255,.2);

  /* --- la hairline — nunca gris sólido. Al 20 % desaparecía a dos metros
     (DIRECCION.md §4), así que sube al 30 %. --- */
  --velo:rgba(22,21,15,.45);
  --linea:rgba(90,88,84,.3);
  --linea-fuerte:rgba(90,88,84,.5);

  /* --- forma: casi recta. La curva de 8-24 px era de app personal. --- */
  --r-1:4px; --r-2:6px; --r-3:8px; --r-4:12px; --r-max:999px;

  /* --- sombra: techo absoluto, no hay elevación (crudo.sombras[0]) --- */
  --sombra-max:0 1px 2px rgba(20,20,19,.08);
  --foco:0 0 0 2px var(--papel), 0 0 0 4px var(--acento);

  /* --- tipografía (crudo.familias, crudo.pesos, crudo.escala_tipografica) --- */
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Consolas,monospace;
  /* A dos metros 460 se deshilacha. */
  --w-cuerpo:500;
  --w-medio:600;
  --w-fuerte:700;

  /* Escala subida un peldaño entero: el cuerpo de trabajo pasa de 16 a 18 y
     los metadatos de 14 a 16. Los 14 px de Superhuman son la respuesta a leer
     correo a 50 cm; aquí se lee de pie (DIRECCION.md §2). */
  --t-xs:14px;  --lh-xs:20px;
  --t-sm:16px;  --lh-sm:24px;   /* metadatos */
  --t-md:18px;  --lh-md:27px;   /* cuerpo */
  --t-lg:24px;  --lh-lg:32px;   /* entrada */
  --t-xl:34px;  --lh-xl:40px;
  --t-2xl:44px; --lh-2xl:52px;
  /* tracking negativo solo a partir de 24px */
  --track-lg:-.2px;
  --track-2xl:-1px;

  /* --- ritmo: más aireado, menos filas por pantalla a propósito --- */
  --s1:4px; --s2:8px; --s3:14px; --s4:20px; --s5:28px; --s6:40px; --s7:56px;
  --dedo:56px;                 /* dedo de kiosco, no de móvil */

  /* --- movimiento. La tabla y el porque de cada valor: docs/design/MOVIMIENTO.md.
     `all` NO se copia de la referencia: anima lo que nadie pidio y lo hace
     fuera de la GPU. --- */
  --dur-1:120ms;   /* responde a un dedo: pulsado, foco */
  --dur-2:160ms;   /* un control cambia de color */
  --dur-3:200ms;   /* algo pequeno entra o sale: pastilla, aviso */
  --dur-4:260ms;   /* un panel o un cajon */
  --ease-sale:cubic-bezier(.23,1,.32,1);    /* entra/sale: casi todo el camino al principio */
  --ease-mueve:cubic-bezier(.77,0,.175,1);  /* se desplaza dentro de la pantalla */
  --ease-cajon:cubic-bezier(.32,.72,0,1);   /* el cajon lateral, curva de iOS */
  --trans:color var(--dur-3) var(--ease-sale), background-color var(--dur-3) var(--ease-sale), border-color var(--dur-3) var(--ease-sale);

  /* --- estado de una reserva. B los baja de tono para que el estado pueda
     ser BLOQUE y no matiz de texto: ahora rondan 7:1 sobre papel en vez de
     5.4:1. Comprobados sobre papel, papel-2 y papel-3, que es donde viven de
     verdad las pastillas. --- */
  --e-nueva:#7A4103;        /* 7.47 / 7.13 / 6.81 */
  --e-confirmada:#0F47C4;   /* 7.10 / 6.78 / 6.48 */
  --e-reconfirmada:#3B33C9; /* 7.71 / 7.37 / 7.04 */
  --e-demorada:#8F3407;     /* 7.25 / 6.93 / 6.62 */
  --e-sentada:#0B5C2A;      /* 7.48 / 7.15 / 6.83 */
  --e-en-servicio:#075B54;  /* 7.33 / 7.00 / 6.69 */
  --e-completada:#46525F;   /* 7.33 / 7.00 / 6.69 */
  --e-no-vino:#A61A1A;      /* 6.93 / 6.62 / 6.33 */
  --e-cancelada:#4B535F;    /* 7.14 / 6.82 / 6.52 */

  /* --- semántica de aviso, mismo criterio de contraste --- */
  --ok:#0B5C2A; --aviso:#7A4103; --malo:#A61A1A; --info:#0F47C4;
  --ok-suave:rgba(11,92,42,.10);
  --aviso-suave:rgba(122,65,3,.10);
  --malo-suave:rgba(166,26,26,.10);
  --info-suave:rgba(15,71,193,.10);
}

/* --- Noche: la dirección **C** del hueco 2, degradada a MODO y no a identidad
   (DIRECCION.md §6) — la marca no puede depender de la hora. Su tesis sigue
   valiendo: una pantalla de papel blanco a las 21:00 es una linterna en la cara
   del que atiende. Invierte papel y tinta conservando la familia; el acento
   pasa a ámbar de sala. Contrastes entre 8.2:1 y 10.5:1. --- */
:root[data-theme="noche"],
:root[data-theme="night"],
:root[data-theme="sunset"]{
  --papel:#14130F;
  --papel-2:#1D1B16;
  --papel-3:#26241E;
  --tinta:#F6F3EC;            /* 16.77 */
  --tinta-70:rgba(246,243,236,.7);
  --tinta-45:rgba(246,243,236,.46);
  --tinta-12:rgba(246,243,236,.14);
  --tinta-06:rgba(246,243,236,.07);
  --acento:#E0A34A;           /* 8.42 — ámbar de sala */
  --acento-06:rgba(224,163,74,.09);
  --acento-14:rgba(224,163,74,.18);
  --lavanda:#3B2E1A;
  /* En noche el velo no puede ser la tinta: la tinta es clara. Es el fondo. */
  --velo:rgba(10,9,7,.62);
  --linea:rgba(180,173,160,.24);
  --linea-fuerte:rgba(180,173,160,.42);
  /* En oscuro la sombra no informa: el techo baja a nada visible. */
  --sombra-max:0 1px 2px rgba(0,0,0,.5);
  --foco:0 0 0 2px var(--papel), 0 0 0 4px var(--acento);

  --sobre-estado:#14130F;   /* la tinta de la noche: los estados de noche son claros */
  --e-nueva:#F0B45C;        /* 10.08 */
  --e-confirmada:#8FB6FF;   /* 9.12 */
  --e-reconfirmada:#B4A6FF; /* 8.71 */
  --e-demorada:#FF9E64;     /* 9.14 */
  --e-sentada:#6FD69A;      /* 10.41 */
  --e-en-servicio:#6FD3C8;  /* 10.47 */
  --e-completada:#B2BCCA;   /* 9.68 */
  --e-no-vino:#FF958C;      /* 8.79 */
  --e-cancelada:#A5ADB9;    /* 8.21 */

  /* LA TINTA DE LA IMPRESORA. No es un color de la paleta y no cambia con el
     tema: el papel es blanco y el tóner es negro, en noche y en día. Están
     aquí —— y no como `#000` suelto en cada hoja de impresión —— porque un
     literal en una capa 3 es exactamente lo que el detector de deriva existe
     para cazar, y porque así la regla de impresión de la cocina y la del
     huésped no pueden separarse. */
  --papel-impreso:#fff;
  --tinta-impresa:#000;

  --ok:#6FD69A; --aviso:#F0B45C; --malo:#FF958C; --info:#8FB6FF;
  --ok-suave:rgba(111,214,154,.15);
  --aviso-suave:rgba(240,180,92,.15);
  --malo-suave:rgba(255,149,140,.15);
  --info-suave:rgba(143,182,255,.15);
}

@media (prefers-reduced-motion: reduce){
  :root{ --trans:none; --dur-1:.01ms; --dur-2:.01ms; --dur-3:.01ms; --dur-4:.01ms }
  /* Quien pide menos movimiento no pide menos información: se va el
     desplazamiento y se queda la señal (color y opacidad, cortas). Las cinco
     pantallas escriben duraciones literales, así que la regla vive aquí y no
     en cada hoja — tokens.css lo carga todo el sistema. */
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-property:opacity,color,background-color,border-color !important;
    transition-duration:120ms !important;
    scroll-behavior:auto !important;
  }
}