/* Spacing — 5px base step, matching the site's 10/25/50px rhythm
   (card gap 25px, grid row gap 50px, button padding 8/25px). */
:root {
  --space-0: 0;
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-5: 25px;
  --space-6: 30px;
  --space-8: 40px;
  --space-10: 50px;
  --space-12: 60px;
  --space-16: 80px;
  --space-20: 100px;
  --space-24: 120px;

  --grid-gap: clamp(16px, 12.83px + 0.85vw, 25px); /* @kind spacing */
  --grid-row-gap: clamp(28px, 20.25px + 2.07vw, 50px); /* @kind spacing */
  /* Alias que consume el markup de las rejillas de tarjeta (F3) */
  --card-gap-x: var(--grid-gap); /* @kind spacing */
  --card-gap-y: var(--grid-row-gap); /* @kind spacing */

  --section-py: clamp(40px, 25.92px + 3.76vw, 80px); /* @kind spacing */
  --section-py-lg: clamp(56px, 33.47px + 6.01vw, 120px); /* @kind spacing */

  /* Canal horizontal unico de pagina. Sustituye los 48 literales "32px" de F3.
     16px por debajo de 400px de viewport, 32px a partir de 800px. */
  --gutter-x: clamp(16px, 4vw, 32px); /* @kind spacing */
  /* --gutter (25px) se elimina: 0 consumidores en todo el proyecto
     (grep "var(--gutter)" fuera de tokens/ = 0). Mantenerlo como alias de
     --gutter-x lo habria subido a 32px, una desviacion formal sin efecto. */

  /* Layout — bizberg caps the container at 1170px; Elementor cards at 424px. */
  --container-max: 1170px;
  --container-wide: 1440px;
  /* min() lo hace idempotente: nunca puede ser mas ancho que su contenedor */
  --card-max: min(424px, 100%);

  /* --header-h: alto MINIMO de la barra interior [data-header-bar] (min-height).
     --header-h-sticky: alto REAL del <header> pegajoso; de el depende el
     scroll-padding-top de base.css, asi que tiene que MEDIR, no estimar.
     Con el markup de F3 (header con el canal lateral, [data-header-bar] con
     padding 8px 0 y box-sizing:border-box) el header vale
       max(--header-h, contenido + 16px) + 1px de borde inferior,
     y el contenido no baja de --tap-min (44px, fila de nav/CTA). De ahi la
     formula. Medido en Chrome sobre el fichero ya editado:
       375px  -> 61.000  (max(56, 44+16)=60 +1)
       768px  -> 62.906  (max(61.906, 60)=61.906 +1)
       1440px -> 73.000  (max(72, 49.19+16)=72 +1)
     El token da 61 / 62.906 / 73: exacto en los tres. El +--space-2 de
     base.css queda como holgura visible bajo la cabecera.
     Nota (efecto conocido): el otro consumidor de estos dos tokens es
     SiteHeader de ui_kits/website/Chrome.jsx (_ds_bundle.js:8400). Verificado
     que NO lo usa el sitio publico: 0 apariciones de SiteHeader/Chrome en
     "Sitio Web Dositec.dc.html". Solo afecta a las pantallas demo del kit. */
  --header-h: clamp(56px, 53.183px + 0.751vw, 64px); /* @kind spacing */
  --header-h-sticky: calc(max(var(--header-h), var(--tap-min) + 16px) + 1px); /* @kind spacing */
  --tap-min: 44px; /* @kind spacing */  /* destino tactil minimo WCAG 2.5.8 / HIG */

  /* Metrica de Button — FUENTE UNICA. La consume SIZES en _ds_bundle.js:316-337.
     Prohibido volver a escribir padding/tracking de boton en F3 o F4. */
  --btn-py-sm: clamp(9px, 8.648px + 0.094vw, 10px); /* @kind spacing */
  --btn-px-sm: clamp(14px, 11.18px + 0.752vw, 22px); /* @kind spacing */
  --btn-py-md: clamp(11px, 10.3px + 0.19vw, 13px); /* @kind spacing */
  --btn-px-md: clamp(18px, 13.78px + 1.13vw, 30px); /* @kind spacing */
  --btn-py-lg: clamp(13px, 11.943px + 0.282vw, 16px); /* @kind spacing */
  --btn-px-lg: clamp(20px, 12.96px + 1.88vw, 40px); /* @kind spacing */
  --btn-py-xl: clamp(15px, 13.24px + 0.47vw, 20px); /* @kind spacing */
  --btn-px-xl: clamp(24px, 14.14px + 2.63vw, 52px); /* @kind spacing */
}
