/* =========================================================================
   Guarabit · Design tokens
   Una sola fuente de verdad. Ningún componente inventa valores.
   ========================================================================= */

:root {
  /* --- Color: superficies -------------------------------------------- */
  --paper:        #FBFAF7;  /* blanco cálido, superficie base             */
  --paper-sunk:   #F1EFE7;
  --ink:          #101010;  /* campo negro pleno                          */
  --ink-soft:     #1A1A18;

  /* Campo de color saturado. Es el recurso gráfico dominante del sitio:
     secciones enteras pintadas, con texto en tinta encima.               */
  --field:        #27C4A0;
  --field-deep:   #14806A;

  /* --- Color: texto ---------------------------------------------------
     Contraste verificado. Sobre --paper (#FBFAF7):
       strong 17.5:1 · body 12.4:1 · muted 5.9:1                          */
  --text-strong:  #101010;
  --text:         #2B2B24;
  --text-muted:   #5E5E52;
  --text-faint:   #77776A;

  /* Sobre --ink (#101010): 16.8:1 / 10.2:1 / 5.5:1 */
  --text-on-ink:       #F4F3EE;
  --text-on-ink-muted: #B3B2A8;
  --text-on-ink-faint: #85847A;

  /* Sobre --field (#27C4A0): tinta 8.9:1 · profundo 4.7:1 (solo ≥18px) */
  --text-on-field:       #0B1F1A;
  --text-on-field-muted: #0C4438;

  /* --- Color: acento ---------------------------------------------------
     --field NO sirve para texto sobre papel (1.9:1). Para texto, accent.  */
  --accent:       #0A6B56;  /* 6.4:1 sobre --paper — el único de texto    */
  --accent-on-ink:#4BD6B4;  /* 8.9:1 sobre --ink                          */
  --accent-wash:  #E2F3EE;

  /* --- Color: líneas --------------------------------------------------- */
  --rule:          rgba(16, 16, 16, 0.14);
  --rule-strong:   rgba(16, 16, 16, 0.28);
  --rule-on-ink:   rgba(244, 243, 238, 0.18);
  --rule-on-field: rgba(11, 31, 26, 0.24);

  --focus: #0A6B56;

  /* --- Tipografía ------------------------------------------------------
     Una sola familia para todo el sitio: Montserrat variable. El contraste
     tipográfico ya no sale de mezclar dos fuentes, sino del rango de pesos:
     el display va en 800 y los numerales en 200. Esa distancia es la que
     antes ponía la diferencia entre serif y grotesca.                       */
  --font-display: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Montserrat', 'Segoe UI', system-ui, sans-serif;

  --w-thin:    200;   /* numerales gigantes        */
  --w-light:   300;   /* itálica de acento         */
  --w-regular: 400;   /* cuerpo                    */
  --w-medium:  500;   /* botones, enlaces          */
  --w-semi:    600;   /* registro técnico, cinta   */
  --w-bold:    700;   /* títulos de sección        */
  --w-black:   800;   /* display                   */

  /* --s-1 queda definido aunque hoy no se use: la escala no debe tener huecos. */

  /* Escala. El salto entre --fs-colossal y el resto es deliberado:
     el impacto viene de que no haya tamaños intermedios que lo amortigüen. */
  --fs-colossal: clamp(2.5rem, min(12.5vw, 14.5vh), 11.5rem);
  --fs-giant:    clamp(2.25rem, 6.5vw, 5.5rem);
  --fs-h2:       clamp(2rem, 4.5vw, 3.75rem);
  --fs-h3:       clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  --fs-lead:     clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  --fs-body:     1.0625rem;
  --fs-sm:       0.9375rem;
  --fs-xs:       0.8125rem;
  --fs-eyebrow:  0.75rem;

  /* Numeral gigante que estructura las secciones */
  --fs-numeral: clamp(4.5rem, 14vw, 12rem);

  --lh-colossal: 0.94;
  --lh-tight:    0.98;
  --lh-snug:     1.14;
  --lh-normal:   1.5;
  --lh-loose:    1.62;

  --ls-colossal: -0.035em;
  --ls-tight:    -0.015em;
  --ls-eyebrow:  0.16em;

  /* --- Espacio (escala 4px) -------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;    --s-11: 11rem;

  --section-y: clamp(5rem, 11vw, 11rem);
  --gutter:    clamp(1.25rem, 4vw, 3.5rem);

  --measure:       58ch;
  --measure-tight: 38ch;
  --max-wide:      1600px;

  --radius-sm: 3px;
  --radius:    6px;
  --radius-lg: 14px;

  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  140ms;
  --dur:       280ms;
  --dur-slow:  720ms;
}