:root {
  /* ── Colors ─────────────────────────────────────────── */
  --color-bg:      #021517;
  --color-bg-mid:  #1a4041;
  --color-footer:  #002B2B;
  --color-primary: #0a515a;
  --color-accent:  #d6f1f5;
  --color-surface: #f4f9fc;
  --color-white:   #ffffff;
  /* Alpha helpers para rgba sin romper la referencia al token */
  --color-bg-rgb:      2 21 23;
  --color-accent-rgb:  214 241 245;

  /* Filtro para teñir SVGs negros (brightness(0)) hacia --color-primary */
  --filter-tint-primary: brightness(0) saturate(100%)
    invert(26%) sepia(98%) saturate(371%)
    hue-rotate(153deg) brightness(89%) contrast(96%);

  /* ── Spacing ─────────────────────────────────────────── */
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-20:  20px;
  --space-24:  24px;
  --space-32:  32px;
  --space-40:  40px;
  --space-48:  48px;
  --space-64:  64px;
  --space-80:  80px;
  --space-88:  88px;
  --space-120: 120px;

  /* Gap homogéneo entre bloques/secciones de la home: flat 120px de
     1024 a 1440+, escalando de forma continua hasta 72px en ~480px
     (cubre 390→1024 con una sola fórmula, sin saltos entre breakpoints). */
  --section-gap: clamp(72px, calc(8.83vw + 29.56px), 120px);

  /* ── Border radius ───────────────────────────────────── */
  --radius-8:  8px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-32: 32px;

  /* ── Typography — font sizes ─────────────────────────── */
  --text-h1:      42px;
  --text-h2:      40px;
  --text-h3:      24px;
  --text-body-lg: 20px;
  --text-body:    16px;
  --text-ui:      14px;
  --text-caption: 13px;

  /* ── Typography — line heights ───────────────────────── */
  --lh-h1:      52px;
  --lh-h2:      48px;
  --lh-h3:      32px;
  --lh-body-lg: 30px;
  --lh-body:    24px;
  --lh-ui:      20px;
  --lh-caption: 18px;
}