/* ═══════════════════════════════════════════════════════════
   verifactu.co · TOKENS
   Dirección: editorial premium, fondo cálido, tipografía
   protagonista. Un solo acento, usado con avaricia.
   ═══════════════════════════════════════════════════════════ */

/* ── Fuentes auto-alojadas (sin request a terceros) ────────── */

@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'InterVar';
  src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrainsVar';
  src: url('/assets/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 800; font-style: normal; font-display: swap;
}

:root {
  /* ── Color ──────────────────────────────────────────────
     El acento tiene DOS tonos porque cambia el fondo:
     sobre crema hace falta bajarlo para pasar AA (5.4:1);
     sobre tinta el vibrante ya cumple (5.57:1).            */
  --paper:        #F4F2EC;   /* fondo base, off-white cálido */
  --paper-2:      #EAE7DD;   /* superficie alterna           */
  --paper-3:      #DFDBCF;   /* bordes suaves de superficie  */
  --ink:          #121212;
  --ink-2:        #1C1C1A;   /* superficie sobre tinta       */
  --muted:        #6B6B6B;   /* 4.76:1 sobre crema — AA      */
  --muted-dark:   #9A9A94;   /* 6.62:1 sobre tinta  — AA     */
  --line:         rgba(18, 18, 18, .14);
  --line-dark:    rgba(244, 242, 236, .16);

  --accent:       #B82560;   /* sobre crema — 5.4:1  */
  --accent-bright:#FF3B8A;   /* sobre tinta — 5.57:1 */

  /* ── Tipografía ───────────────────────────────────────── */
  --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-body:    'InterVar', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrainsVar', ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-hero:  clamp(3.2rem, 8.5vw, 10rem);
  --t-h1:    clamp(2.8rem, 7vw,   8rem);
  --t-h2:    clamp(2.2rem, 5vw,   5.5rem);
  --t-h3:    clamp(1.35rem, 2.4vw, 2.6rem);
  --t-body:  clamp(1rem, .55vw + .9rem, 1.3125rem);   /* 16 → 21px */
  --t-meta:  clamp(.6875rem, .2vw + .64rem, .875rem); /* 11 → 14px */

  /* ── Espaciado ────────────────────────────────────────── */
  --space-1: .5rem;   --space-2: 1rem;   --space-3: 1.5rem;
  --space-4: 2rem;    --space-5: 3rem;   --space-6: 4rem;
  --space-7: 6rem;    --space-8: 8rem;   --space-9: 12rem;
  --space-10: 16rem;

  --section-y: clamp(var(--space-6), 11vw, var(--space-9));

  /* ── Retícula ─────────────────────────────────────────── */
  --gutter:  clamp(12px, 1.3vw, 28px);
  --pad-x:   clamp(20px, 4vw, 72px);
  --max:     1920px;
  --measure: 62ch;

  /* ── Movimiento ───────────────────────────────────────── */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-micro:   .22s;
  --dur-el:      .8s;

  /* ── Capas ────────────────────────────────────────────── */
  --z-base: 0;   --z-content: 10;  --z-header: 100;
  --z-menu: 200; --z-cursor: 400;  --z-loader: 1000;
}