/* ==========================================================================
   tokens.css · Lo que comparten la web (css/estilo.css) y el panel (panel/panel.css)
   Paleta "Piedra y ámbar". Guía completa: GUIA-ESTILO.md (en la raíz del sitio).
   Muestra viva de cada pieza con su contraste medido: /panel/estilos.php

   CÓMO SE USA
   - Se carga ANTES de la hoja de cada uno (inc/cabecera.php en la web, el
     <head> de cada pantalla del panel). Esa hoja, en su propio :root, pone
     solo lo suyo y lo que difiere, y como viene después, le gana a esto.
   - Un color o una medida nueva que sirva para los dos va ACÁ, no en las hojas.
   - Nada de colores escritos a mano en las hojas: siempre var(--…).

   LO QUE DIFIERE ENTRE WEB Y PANEL (acá va el valor del panel; la web lo pisa
   en el :root de estilo.css)
     --t-xs       .78rem = 12,5 px (piso del panel)   web .8rem = 12,8 px
     --tap        46px                                web 48px
     --r / --r-sm 14px / 10px                         web 16px / 12px
     --ink-soft   #4F5B61 (7:1 sobre blanco)          web #5A656B (6:1)
     --wa         #1B6B3A: letra WhatsApp sobre       web #0F7A40: relleno del
                  --wa-fondo (5,9:1)                  botón, con --on-wa (5,4:1)
   ========================================================================== */
:root{
  /* Colores base */
  --paper:#FCFBF9;         /* fondo de la página */
  --surface:#FFFFFF;       /* tarjetas y campos */
  --stone:#F0EEE9;         /* botón tranquilo, zonas apagadas */
  --stone-hover:#E9E6DF;
  --line:#E6E3DD;          /* borde de tarjetas (no es para campos) */
  --linea-campo:#8A867F;   /* borde de lo que se escribe o se elige (3,6:1 sobre blanco) */
  --blanco:#FFFFFF;
  --ink:#14181A;           /* texto (17,9:1) */
  --ink-soft:#4F5B61;      /* texto secundario (7:1) */
  --ink-faint:#626D72;     /* el gris más claro permitido para texto (5,3:1 blanco, 4,6:1 piedra) */
  --slate:#2F3A40;         /* pizarra: barra oscura y la solapa elegida */
  --on-slate:#F2F0EB;      /* texto sobre pizarra (10,2:1) */

  /* Ámbar: la acción fuerte, una por pantalla */
  --amber:#A96E0C;             /* bordes, íconos y foco; no es relleno de botón ni letra */
  --amber-claro:#E8A93A;
  --amber-halo:rgba(232,169,58,.22);   /* elegido (chips, segmento) */
  --amber-boton:#C8891F;       /* relleno del botón fuerte */
  --amber-boton-hover:#B57A17;
  --on-amber:#1D1707;          /* letra sobre el botón fuerte (6:1; 4,9:1 en hover) */
  --amber-texto:#8A5A0A;       /* ámbar como color de letra (5,9:1 blanco, 5,1:1 piedra) */

  /* Estados: ámbar "te falta algo", verde "listo", ladrillo "no se hizo o se pasó" */
  --amber-fondo:#FBF1DC;--amber-oscuro:#6B4505;--amber-linea:rgba(169,110,12,.35);  /* 7,6:1 */
  --verde:#22553A;--verde-fondo:#EDF5F0;--verde-linea:#CFE3D8;                       /* 7,8:1 */
  --verde-texto:var(--verde);  /* el nombre que usa la web */
  --ladrillo:#8A3620;--ladrillo-fondo:#FCF1ED;--ladrillo-linea:#EBD3CA;               /* 7,2:1 */

  /* WhatsApp */
  --wa:#1B6B3A;--wa-fondo:#E8F6EE;--on-wa:#FFFFFF;

  /* Letra: seis tamaños (--t-xs es el piso) y tres pesos */
  --t-xs:.78rem;--t-sm:.875rem;--t-md:1rem;--t-lg:1.15rem;--t-xl:1.35rem;--t-num:1.7rem;
  --w-normal:400;--w-medio:600;--w-fuerte:700;

  /* Espacios: múltiplos de 4 px */
  --e-1:4px;--e-2:8px;--e-3:12px;--e-4:16px;--e-5:24px;--e-6:32px;

  /* Esquinas: tarjetas y modales, campos, y lo redondo (botones, chips, pastillas) */
  --r:14px;--r-sm:10px;--r-pill:999px;

  /* Alto mínimo de lo que se toca */
  --tap:46px;

  /* Foco del teclado: 3 px ámbar con 2 px de aire (4,3:1 sobre blanco) */
  --foco:var(--amber);--foco-ancho:3px;--foco-aire:2px;
}