/* ==========================================================================
   TOKENS
   Fuente de verdad del design system. Ningún otro archivo define valores
   crudos de color, tipografía, espaciado o movimiento: todos consumen de acá.
   Especificación y trazabilidad: docs/design-system.md
   ========================================================================== */

:root {
  /* --- Superficies ------------------------------------------------------ */
  --color-bg: #faf8f5;            /* marfil cálido — fondo por defecto       */
  --color-surface: #ffffff;       /* blanco — alternancia de sección         */
  --color-surface-deep: #1a1a18;  /* carbón — secciones invertidas y footer  */

  /* --- Tinta ------------------------------------------------------------ */
  --color-ink: #1a1a18;
  --color-muted: #6b6862;
  --color-on-deep: #faf8f5;

  /* --- Acento nude ------------------------------------------------------
     Dos variantes con usos SEPARADOS y no intercambiables (decisión D-05).
     --color-accent falla AA contra fondos claros (2.27:1): nunca es texto.  */
  --color-accent: #b9a394;        /* fondo de badge, borde, relleno de estado */
  --color-accent-ink: #7e6354;    /* texto, links, foco — AA 5.21:1           */
  --color-accent-on-deep: #b9a394;/* sí es texto sobre oscuro — AAA 7.25:1    */

  /* --- Estructura ------------------------------------------------------- */
  --color-border: #e3ded6;
  --color-border-strong: #cfc7bb;

  /* --- Velo de legibilidad sobre fotografía -----------------------------
     Las paradas no son estéticas: están calculadas contra el peor caso de
     cada foto (zona más clara = blanco puro) para que el texto encima
     mantenga AA. El retrato de mobile es de clave alta —media 176/255— y
     con un velo suave el texto quedaba en 1.29:1. Verificado con
     docs/investigacion/verificar-contraste-sobre-foto.py                  */
  --overlay-photo: linear-gradient(
    to bottom,
    rgb(26 26 24 / 0.30) 0%,
    rgb(26 26 24 / 0.22) 40%,
    rgb(26 26 24 / 0.70) 72%,
    rgb(26 26 24 / 0.88) 100%
  );

  /* Scrim local del header sobre foto: protege los links de 12px sin tener
     que oscurecer el centro del hero. Alpha 0.78 → 4.92:1 en el peor caso. */
  --overlay-header: linear-gradient(
    to bottom,
    rgb(26 26 24 / 0.78) 0%,
    rgb(26 26 24 / 0) 100%
  );

  /* --- Familias --------------------------------------------------------- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Escala tipográfica (fluida, 375px → 1360px) ---------------------- */
  --type-h1: clamp(2rem, 1.25rem + 3.2vw, 3.5rem);           /* 32 → 56px */
  --type-h2: clamp(1.5rem, 1.2rem + 1.28vw, 2.125rem);       /* 24 → 34px */
  --type-h3: clamp(1.25rem, 1.15rem + 0.43vw, 1.5rem);       /* 20 → 24px */
  --type-h4: 1.0625rem;                                      /*      17px */
  --type-lead: clamp(1.125rem, 1.05rem + 0.32vw, 1.375rem);  /* 18 → 22px */
  --type-body: 1.0625rem;                                    /*      17px */
  --type-small: 0.875rem;                                    /*      14px */
  --type-eyebrow: 0.75rem;                                   /*      12px */
  --type-button: 0.8125rem;                                  /*      13px */

  /* --- Tracking ---------------------------------------------------------
     Positivo en mayúsculas: es la firma del sistema (ver design-system §3.3) */
  --track-h1: 0.02em;
  --track-h2: 0.06em;
  --track-h3: 0.04em;
  --track-wide: 0.18em;  /* eyebrows y botones */

  /* --- Interlineado ----------------------------------------------------- */
  --leading-h1: 1.08;
  --leading-h2: 1.2;
  --leading-h3: 1.3;
  --leading-lead: 1.55;
  --leading-body: 1.65;

  /* --- Espaciado (base 8) ----------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* --- Ritmo vertical de sección ---------------------------------------- */
  --section-y: var(--space-12);        /* 48px en mobile                    */
  --section-heading-gap: var(--space-8);
  --stack-gap: var(--space-6);

  /* --- Contenedores ----------------------------------------------------- */
  --container: 78.75rem;      /* 1260px */
  --container-wide: 85rem;    /* 1360px */
  --container-text: 61.25rem; /*  980px */
  --measure: 42.5rem;         /*  680px — medida de lectura */
  --gutter: 1.25rem;          /*   20px */

  /* --- Geometría --------------------------------------------------------
     Radio cero en todo el sistema y cero sombras (decisión D-07).          */
  --radius: 0;
  --hairline: 1px solid var(--color-border);

  /* --- Movimiento -------------------------------------------------------- */
  --ease-signature: cubic-bezier(0.785, 0.135, 0.15, 0.86); /* easeInOutCirc */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-micro: ease-in-out;

  --dur-micro: 200ms;
  --dur-sticky: 250ms;
  --dur-gesture: 450ms;
  --dur-reveal: 600ms;
  --stagger: 80ms;

  /* --- Alturas ----------------------------------------------------------- */
  --header-h: 4rem;        /* 64px — única altura: el header no cambia de
                              tamaño al compactarse, cambia de material     */
  --touch-target: 2.75rem; /* 44px — mínimo táctil */
}

@media (min-width: 48rem) {  /* ≥768px */
  :root {
    --gutter: 2rem;
    --section-y: var(--space-16);          /* 64px — módulo base            */
    --section-heading-gap: var(--space-12); /* 48px                          */
    --stack-gap: var(--space-12);
    --header-h: 4.5rem;
  }
}