/* ==========================================================================
   tokens.css — GABRIELAYEJO.COM
   Todos los valores están MEDIDOS del PNG de Canva (muestreo de píxel) o
   derivados de él. Nada viene de memoria, de otro prompt ni de una paleta
   "bonita". Fuente de cada bloque: docs/measurements/*.json
   Referencia de diseño: 1366 px de ancho.
   ========================================================================== */

@font-face {
  font-family: "Display CJ";
  src: url("../assets/fonts/display.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  size-adjust: 100%;
}

@font-face {
  font-family: "Display Heavy";
  src: url("../assets/fonts/display-heavy.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Body CJ";
  src: url("../assets/fonts/librefranklin400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Display Heavy";
  src: url("../assets/fonts/display-heavy.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Body CJ";
  src: url("../assets/fonts/librefranklin500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Text CJ";
  src: url("../assets/fonts/spacegrotesk400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Text CJ";
  src: url("../assets/fonts/spacegrotesk500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mono CJ";
  src: url("../assets/fonts/jbmono500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Color: HEX exactos del PNG (conteo de píxeles idénticos) ---------- */
  --ink: #000000;            /* 57,32 % de la portada */
  --paper: #ffffff;          /* 85,74 % de «Uso de la IA», 80,76 % del artículo */
  --lime: #c1ff72;           /* 161.189 px en la portada · acento principal */
  --violet: #5e17eb;         /* 58.876 px · fondo de la píldora del hero */
  --blue: #529bfe;           /* 43.181 px · «Modernizada» y líneas */
  --magenta: #ff00ff;        /* el del diseño: se conserva en bordes y acentos */
  --magenta-ink: #c800c8;    /* texto sobre blanco: 4,77:1 (AA). #ff00ff daba 3,06 */        /* 3.429 px en portada · fórmulas del artículo */
  --cyan: #00ffff;           /* 3.336 px */
  --gray-900: #141414;       /* superficie elevada sobre negro */
  --gray-700: #444444;       /* texto secundario sobre blanco (2,11 % «Uso IA») */
  --gray-500: #828282;       /* enlaces del navbar (0,33 % del menú) */
  --gray-300: #ebebeb;       /* filetes sobre blanco (0,67 % del artículo) */
  --gray-100: #fcfcfc;

  /* ---- Tipografía: 3 roles, ni uno más (§4.2) --------------------------- */
  --font-display: "Display CJ", "Arial Narrow", Impact, sans-serif;
  --font-body: "Text CJ", "Body CJ", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Mono CJ", ui-monospace, "Courier New", monospace;

  /* ---- Unidad de diseño: 1 px de la maqueta de 1366 --------------------- */
  --u: calc(100vw / 1366);

  /* ---- Cuerpos medidos (px de diseño @1366) ----------------------------- */
  --fs-hero: 325;            /* clava 280 px de alto de caja y 742 px de ancho (medido) */
  --fs-cintillo: 62.64;         /* banda de 57 px de alto, 1308 px de ancho */
  --fs-h2: 90;               /* «Geometría antigua»: 70 px de alto de caja */
  --fs-h2-alt: 62;           /* «Armonía geométrica»: 62 px de alto */
  --fs-h3: 59;               /* «MODELOS GEOMÉTRICOS ORIGINALES»: 51 px */
  --fs-pill: 58;             /* texto de la píldora: 57 px de caja */
  --fs-lead: 27;             /* párrafo del hero: líneas de 27 px de paso */
  --fs-body: 21;
  --fs-small: 17;
  --fs-micro: 14;
  --fs-mono: 20;
  --lh-display: 0.86;
  --lh-body: 1.55;
  --track-body: 0.035em;   /* medido: cierra el 6,7 % de avance que falta */

  /* ---- Márgenes medidos ------------------------------------------------- */
  --margin-left: 88;         /* rango medido 88–112 px */
  --margin-right: 88;
  --read-width: 1180;        /* 86,4 % de 1366 */
  --gutter: 24;

  /* ---- Bandas medidas de la portada (alto total 4878 px) ---------------- */
  --band-nav: 57;
  --band-hero: 768;        /* el navbar del PNG va MONTADO sobre el retrato: la banda mide 768 */
  --band-cintillo: 127;      /* 768 → 895 */
  --band-geometria: 1105;    /* 895 → 2000 */
  --band-vision: 950;        /* 2000 → 2950 */
  --band-comprension: 830;   /* 2950 → 3780 */
  --band-armonia: 1098;      /* 3780 → 4878 */

  /* ---- Componentes ------------------------------------------------------ */
  --radius-pill: 999px;
  --radius-box: 0;           /* el diseño no tiene radios de caja: 90° */
  --border-w: 1px;
  --focus: 3px;

  /* ---- Movimiento ------------------------------------------------------- */
  --t-fast: 160ms;
  --t-base: 260ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* En pantallas menores de 1024 la maqueta deja de ser una réplica 1:1 y pasa
   a flujo: los cuerpos se fijan en rem para que sigan siendo legibles. */
@media (max-width: 1023px) {
  :root {
    --u: calc(100vw / 1366);
    --fs-hero: clamp(64px, 20vw, 150px);
    --fs-cintillo: clamp(18px, 3.6vw, 34px);
    --fs-h2: clamp(34px, 6.4vw, 64px);
    --fs-h2-alt: clamp(30px, 5.4vw, 54px);
    --fs-h3: clamp(22px, 4.4vw, 42px);
    --fs-pill: clamp(14px, 2.6vw, 28px);
    --fs-lead: clamp(17px, 2.4vw, 22px);
    --fs-body: clamp(16px, 2.2vw, 20px);
    --fs-small: 15px;
    --fs-micro: 13px;
    --fs-mono: 16px;
    --margin-left: 24;
    --margin-right: 24;
  }
}

/* Respeta a quien pide menos movimiento (WCAG 2.2 · §9) */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}