/* ==========================================================================
   Autopartes Las Heras — design tokens

   Fuente de verdad del diseño. Todo color que esté acá tiene que estar
   espejado en theme.json, o el cliente no lo ve en el editor de bloques.

   El verde sale del logo (#4caf50, muestreado del SVG del cliente). Con texto
   blanco da 2,8:1, así que sobre verde el texto va en tinta; y para texto
   verde sobre fondo claro se usa --lh-green-deep, que sí pasa 4,5:1.
   ========================================================================== */

:root {
	/* --- Campos de color --------------------------------------------------- */
	--lh-ground: #f2f3ef;      /* fondo de la página */
	--lh-tone: #e4e7e0;        /* un escalón de tono sobre el fondo */
	--lh-ink: #0c100d;         /* texto y campos oscuros */
	--lh-ink-soft: #1a201b;    /* un escalón sobre la tinta, para tarjetas */
	--lh-green: #4caf50;       /* marca: acciones y campo verde */
	--lh-green-deep: #1f6b25;  /* verde legible como texto sobre claro */
	--lh-white: #ffffff;

	/* Texto secundario. Sigue siendo legible: 7:1 sobre el fondo. */
	--lh-muted: #3f4640;
	--lh-on-ink-muted: #b9c1ba;

	/* --- Tipografía: una sola familia, cinco escalones ---------------------- */
	--lh-font: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--lh-fs-display: clamp(2.35rem, 0.5rem + 6.9vw, 8rem);
	--lh-fs-h2: clamp(2.125rem, 1.1rem + 3.9vw, 4.5rem);
	--lh-fs-h3: clamp(1.3125rem, 1.05rem + 1.05vw, 1.875rem);
	--lh-fs-body: clamp(1.0625rem, 1.03rem + 0.12vw, 1.1875rem);
	--lh-fs-small: 0.9375rem;

	/* --- Layout -------------------------------------------------------------- */
	--lh-gutter: clamp(16px, 3.2vw, 40px);   /* un solo par de márgenes, todo el sitio */
	--lh-max: 1560px;
	--lh-section-y: clamp(88px, 6vw + 48px, 200px);
	--lh-header-h: 76px;

	/* --- Formas: cuadradas, una sola decisión -------------------------------- */
	--lh-radius: 0;

	/* --- Movimiento (escala de transitions.dev) ------------------------------ */
	--lh-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--lh-dur-quick: 150ms;
	--lh-dur-fast: 250ms;
	--lh-dur-slow: 400ms;
	--lh-dur-reveal: 600ms;
	--lh-reveal-distance: 24px;
	--lh-stagger: 70ms;

	--lh-z-header: 100;
}