/* ─── DESIGN TOKENS ─────────────────────────────────────────────── */
/* Paleta y escala tipográfica confirmadas por Diego (capturas del style
   guide de Figma — "Colors" + "Desktop Typestyles"), ya no placeholder. */

:root {

  /* Color — Figma "Colors" → Primary */
  --color-pine:      #123B40; /* acento — botones, nav oscuro */
  --color-cream:     #FAF9F4; /* fondos claros */
  --color-white:     #FFFFFF; /* blanco puro — distinto del cream, uso puntual (Diferenciales) */
  --color-bg-dark:   #1C1C1C;
  --color-olive:     #6F7263; /* texto secundario / tag */
  --color-olive-15:  rgb(111 114 99 / 15%); /* "Olive 15%" — mismo hex, variante de opacidad */

  /* Alias semánticos — el resto del CSS consume estos, no los de arriba */
  --color-bg:         var(--color-cream);
  --color-text:       var(--color-bg-dark);
  --color-text-soft:  var(--color-olive);
  --color-border:     var(--color-olive-15);
  --color-accent:     var(--color-pine);
  --color-accent-soft: color-mix(in srgb, var(--color-pine) 85%, white);

  /* Typography — Satoshi, única tipografía del proyecto (PP Fragment es
     del portfolio personal de Diego, no se vincula acá). El nivel H03 del
     style guide usa un serif en Figma, pero en este proyecto sale en
     Satoshi Regular como el resto — ver .text-h03 en typography.css. */
  --font-family: 'Satoshi', sans-serif;

  /* Escala — Figma "Desktop Typestyles", tamaño desktop / line-height.
     Mobile: clamp() hacia abajo manteniendo el tope desktop exacto.
     El coeficiente vw de cada uno está calculado para que el tope se
     alcance recién en 1440px (tope/1440*100) — antes solo --fs-h0 estaba
     bien calibrado así; el resto se frenaba 100-330px antes de 1440, con
     lo cual en una laptop de 1440 ya se veían al tamaño máximo (pensado
     para pantallas más anchas) en vez de seguir escalando hasta ahí. */
  --fs-h0:  clamp(56px, 11vw, 160px);    /* Satoshi Bold   · 160/100% */
  --fs-h01: clamp(40px, 5vw, 72px);      /* Satoshi Bold   · 72/100%  — hero H1 */
  --fs-h02: clamp(34px, 4.44vw, 64px);   /* Satoshi Bold   · 64/100%  — section title */
  --fs-h03: clamp(28px, 3.89vw, 56px);   /* Satoshi Regular · 56/100% — acento puntual (serif en Figma, Satoshi acá) */
  --fs-h04: clamp(26px, 2.78vw, 40px);   /* Satoshi Medium · 40/110% */
  --fs-h05: clamp(22px, 2.22vw, 32px);   /* Satoshi Medium · 32/105% */
  --fs-h06: 24px;                       /* Satoshi Medium · 24/130% */

  --fs-body-xl: 18px; /* Satoshi Regular · 18/140% */
  --fs-body-md: 16px; /* Satoshi Regular · 16/140% */
  --fs-body-sm: 14px; /* Satoshi Regular · 14/140% */

  --fs-eyebrow: 14px; /* Satoshi Medium · 14/100%, uppercase */
  --fs-label:   12px; /* Satoshi Medium · 12/100% */
  --fs-cta:     16px; /* Satoshi Medium · 16/100% */

  --lh-h0:  1;
  --lh-h01: 1;
  --lh-h02: 1;
  --lh-h03: 1;
  --lh-h04: 1.1;
  --lh-h05: 1.05;
  --lh-h06: 1.3;
  --lh-body: 1.4;

  /* Spacing — múltiplos de 4px, mismo criterio que diego-portfolio */
  --spacing: 4px;
  --space-xs:  calc(var(--spacing) * 2);   /* 8px */
  --space-sm:  calc(var(--spacing) * 4);   /* 16px */
  --space-md:  calc(var(--spacing) * 6);   /* 24px */
  --space-lg:  calc(var(--spacing) * 10);  /* 40px */
  --space-xl:  calc(var(--spacing) * 16);  /* 64px */
  --space-2xl: calc(var(--spacing) * 24);  /* 96px */

  /* Layout — frame de Figma es 1440px con margen de 40px por lado
     (contenido 1360px); container-max = 1440 para que ese margen salga
     exacto del padding, sin el doble recorte de max-width + padding. */
  --container-max: 1440px;
  --container-pad: 40px;
  /* Unifica el padding lateral mobile — antes convivían 19px (tests),
     20px (benefits/applications/product/works/impact) y 24px (el resto,
     por herencia de .container) sueltos por sección. 20px porque es el
     valor con el que ya alinea el logo del nav (.hero-nav-row, 20px a la
     izquierda) — ver QA fix punto 6. */
  --container-pad-mobile: 20px;
  --radius: 16px;
}