/* ── LOS TOKENS DE LA CASA ────────────────────────────────────────────────────────────────────
   La única definición de color, sombra y radio de toda la aplicación. Estaba incrustada dentro de
   `panel/index.html` —1.290 líneas de `<style>`— y duplicada palabra por palabra en
   `erp-preview/index.html`, así que había dos copias destinadas a divergir y ninguna que el resto
   del proyecto pudiera usar.

   Aquí no se decide NADA nuevo todavía: es exactamente el mismo CSS, movido. Lo que cambia es que
   ahora hay un sitio donde cambiarlo. */

*,*::before,*::after{box-sizing:border-box}html,body{margin:0;padding:0}
:root{
  --bg:#F1EEE4;--bg2:#EAE6D9;--surface:#FBFAF6;--surface2:#F3F0E8;--surface3:#ECE7DA;
  --border:#E4DFD1;--border2:#D3CDBB;--ink:#1B1F19;--ink2:#565B4E;--ink3:#878B79;
  /* EL VERDE DE LA CASA. Es el de la web pública —el que ve un cliente—, no el del panel:
     había dos verdes distintos, #2C4A3E fuera y #2F6B4F dentro, y eso se lee como un error de
     color, no como una gama. Gana el profundo: da 9,7 : 1 con el blanco frente a 6,3 : 1. */
  --brand:#2C4A3E;--brand2:#20372E;--brand-ink:#F6F9F7;--brand-soft:#E6EDE9;
  /* EL COBRE, acento secundario. Sustituye al dorado #B8945A de la web, que sobre blanco daba
     2,8 : 1 — por debajo del mínimo legible para un botón. Éste da 5,6 : 1 sobre blanco y
     4,8 : 1 sobre el marfil, así que vale también como texto y no solo como relleno. Es de la misma
     familia que la terracota del carnet de Wallet sin ser el mismo tono: allí es una masa de
     144 pt, aquí es un acento. */
  --accent:#9E5334;--accent2:#83432A;--accent-ink:#FFF8F4;--accent-soft:#F4E7E0;
  --success:#2E9E6B;--success-soft:#E1F1E8;--warning:#B9822B;--warning-soft:#F5EBD8;
  --danger:#C24638;--danger-soft:#F6E2DE;--info:#3F6E93;--info-soft:#E1EAF1;--focus:#2C4A3E;
  --sh-sm:0 1px 2px rgba(28,38,26,.06),0 1px 3px rgba(28,38,26,.05);
  --sh-md:0 2px 6px rgba(28,38,26,.06),0 8px 22px rgba(28,38,26,.08);
  --sh-lg:0 12px 40px rgba(28,38,26,.16),0 3px 10px rgba(28,38,26,.08);
  --r-sm:8px;--r-md:14px;--r-lg:20px;--sb:248px;
  /* `--cat` se fija POR ELEMENTO (cada barra o píldora dice de qué categoría es); aquí solo
     está su valor por defecto, para que nada dependa de una variable sin declarar. */
  --cat:var(--brand);
  /* Colores de categoría de gasto. Van aquí y no en el JS porque cambian con el tema: un
     hexadecimal escrito en el código se ve mal en uno de los dos. Ver COLOR_CATEGORIA en
     src/modules/facturas/categorias.js. */
  --cat-uva:#7B4B8A;--cat-carne:#B4453C;--cat-curado:#A65A2E;--cat-mar:#2F7E9E;
  --cat-huerta:#4E8C3F;--cat-pan:#B8862F;--cat-hielo:#5B8FB0;--cat-despensa:#8A7A2E;
  --cat-limpieza:#3E8F84;--cat-envase:#6B7A8F;--cat-menaje:#7A6A55;--cat-marketing:#9B5178;
  --cat-gris:#8B8F80;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;
  /* PALETA CLARA, SIEMPRE. `color-scheme` le dice al navegador con qué luz pintar lo que pinta
     ÉL —barras de desplazamiento, desplegables, campos, el fondo antes de que llegue el CSS—.
     Sin esto, un móvil en modo oscuro pone controles oscuros sobre nuestra crema.

     Aquí faltaba el punto y coma: `color-scheme:light` y `--h:212` se leían como UNA sola
     declaración, inválida, y el navegador las descartaba las dos. Ni había esquema de color
     declarado ni existía `--h`. */
  color-scheme:light;
  /* Tono del área (sala, barra, cocina…). Cada etiqueta lo sobreescribe en su `style`;
     esto es el valor de reserva. Ver src/modules/horarios/colores.js. */
  --h:212;}
/* ── ¿Y EL TEMA OSCURO? ESTÁ EN `panel.css`, A PROPÓSITO ──────────────────────────────────────
   Esta hoja la cargan las 18 páginas: las 16 públicas, el panel y la vista previa del ERP. Pero
   el tema oscuro solo lo quiere el panel, que tiene su conmutador.

   Estaba aquí, y eso rompía la web pública: el bloque redefinía `--bg` a casi negro pero NO
   `--text`, que es de `styles.css` y se quedaba en su negro claro. Resultado medido en Chrome:
   1,14 : 1 en trece páginas —texto invisible— para cualquier visitante con el móvil en oscuro.
   Y ganaba aunque `styles.css` cargue después, porque `:root:not([data-theme="light"])` pesa
   más que un `:root` pelado: una media query no añade especificidad, pero el `:not()` sí.

   La identidad de la casa es crema y verde. La web se queda clara, diga lo que diga el sistema
   operativo, y el panel sigue teniendo sus tres modos. */

/* ── LO QUE FALTABA PARA QUE ESTO SEA UN SISTEMA ─────────────────────────────────────────────
   Arriba está lo que ya existía —color, sombra, radio— porque el panel ya tenía una base seria.
   Lo que no había era escala de texto ni de espacio, así que cada pantalla elegía su tamaño y su
   margen: por eso dos tablas del mismo panel respiran distinto.

   Los tamaños son los que YA se estaban usando, puestos en una escala y con un nombre. No es un
   rediseño de la tipografía: es dejar de decidirla veinte veces. */
:root{
  /* TEXTO. Escala corta a propósito: con nueve tamaños se acaba mezclando 15 y 16 px sin
     criterio. `--fs-num` es para cifras en tabla — mismo cuerpo que el texto, pero se usa junto
     a `font-variant-numeric:tabular-nums` para que las columnas de dinero cuadren. */
  --fs-display:34px; --lh-display:1.12;
  --fs-h1:24px;      --lh-h1:1.2;
  --fs-h2:18px;      --lh-h2:1.3;
  --fs-h3:15px;      --lh-h3:1.35;
  --fs-body:14px;    --lh-body:1.5;
  --fs-small:13px;   --lh-small:1.45;
  --fs-label:12px;   --lh-label:1.3;
  --fs-caption:11.5px;
  --fs-num:14px;
  --fw-normal:400; --fw-medium:500; --fw-semi:600; --fw-bold:700;
  /* El seguimiento de las versalitas. Un rótulo en mayúsculas sin abrir se lee peor. */
  --ls-label:.04em;

  /* ESPACIO. Base de 4 px. Todo lo que ya había cae en esta rejilla o muy cerca. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* RADIOS. `--r-sm/md/lg` ya existían; faltaba el de píldora. */
  --r-pill:999px;

  /* CONTROLES. Un solo alto para botón, campo y selector: la mitad del desorden visual de un
     formulario es que sus tres controles miden distinto.
     44 px es el mínimo táctil cómodo; 52 px el de los formularios públicos, que se rellenan
     con el móvil en la mano. */
  --ctl-sm:32px; --ctl:38px; --ctl-lg:44px; --ctl-xl:52px;
  /* 16 px en un campo es lo que impide que Safari en iPhone amplíe la página al enfocar. Por
     debajo de eso, la página se queda torcida el resto de la visita. */
  --fs-input-movil:16px;

  /* ANCHOS. Una línea de texto no debe pasar de ~70 caracteres. */
  --w-prosa:68ch; --w-contenido:1180px; --w-formulario:520px;

  /* MOVIMIENTO. Corto y funcional: responde a lo que hace una persona, no decora. */
  --t-rapido:.12s; --t-medio:.18s; --t-lento:.26s;
  --ease:cubic-bezier(.2,.6,.3,1);
}

/* PUNTOS DE CORTE, escritos aquí porque una media query no puede leer una variable y conviene
   que estén en un sitio:  móvil ≤640 · tablet ≤1024 · escritorio >1024.
   El panel además pliega la barra lateral en 820 y reordena rejillas en 1080. */

@media (prefers-reduced-motion:reduce){
  :root{ --t-rapido:0s; --t-medio:0s; --t-lento:0s; }
}