/* ==========================================================================
   TOKENS · Precios Tienda
   --------------------------------------------------------------------------
   Único archivo del proyecto donde se declara un color, una fuente o una
   medida del sistema. Ningún otro CSS escribe un #hex a mano: si un valor no
   está aquí, es que no pertenece al sistema de diseño.

   El primer bloque es el apartado 1.1 de docs/guia-pantallas-precios-tienda.md
   copiado literalmente. No se toca: si la guía cambia, se vuelve a copiar.
   ========================================================================== */

/* --- Guía §1.1 · copia literal ------------------------------------------ */

:root{
  --papel:#F4F5EF;          /* fondo de la app */
  --papel-alto:#FFFFFF;     /* tarjetas */
  --papel-hundido:#E9EBE0;  /* huecos de foto, barra navegador */
  --tinta:#18211C;          /* texto principal */
  --tinta-suave:#6B7269;    /* texto secundario, etiquetas de campo */
  --verde:#2E6B45;          /* botones primarios, iconos de acción, badge nuevo */
  --verde-oscuro:#1E3A2B;   /* cabeceras */
  --verde-claro:#E4F0E8;    /* fondo de badges verdes de estado */
  --amarillo:#F3C623;       /* SOLO precios y porcentajes */
  --amarillo-borde:#D9A90C;
  --rojo:#C8342B;           /* errores y acciones destructivas */
  --rojo-claro:#F8E3E1;     /* fondo de badges/círculos de error */
  --linea:#DFE2D8;          /* bordes y separadores */
  --display:"Avenir Next Condensed","Arial Narrow",system-ui,sans-serif;
  --cuerpo:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",sans-serif;
  --dato:ui-monospace,"SF Mono",Menlo,monospace;
}

/* --- Medidas y colores complementarios de la guía (§1.3, §2.8) ----------
       Añadido: valores que la guía fija en prosa fuera del bloque §1.1,
       recogidos aquí para que ningún componente escriba el número a mano. */

:root{
  --alto-control:56px;      /* botones y campos principales */
  --alto-control-min:52px;  /* mínimo admitido por la guía */
  --tactil-min:44px;        /* objetivo táctil mínimo en cualquier elemento */
  --radio:12px;             /* radio general de botones y campos */
  --radio-tarjeta:14px;     /* tarjetas */
  --radio-modal:18px;       /* pop-up modal */
  --hueco:12px;             /* separación estándar entre elementos */
  --margen:16px;            /* padding de pantalla y de tarjeta */
  --velo:rgba(24,33,28,.55);/* fondo oscurecido del modal (§2.8) */
  --tinta-clara:#EFF3EA;    /* texto sobre la cabecera verde (§1.3) */
  --ancho-app:520px;        /* ancho máximo de la app móvil en escritorio */
  --ancho-panel:960px;      /* ancho máximo de los paneles web (§5) */
}