/* ═══════════════════════════════════════════════════════════════════════════
   Nomadic Creations · tokens
   ───────────────────────────────────────────────────────────────────────────
   Todo el tamaño y todo el color de la web viven aquí. Ningún componente lleva
   los suyos: si hace falta un valor nuevo, se añade un token, no un número.

   Los colores y la escala están MEDIDOS sobre nomadiccreations.com con
   `node scripts/paleta.mjs`, no transcritos de una captura.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin.woff2') format('woff2-variations');
  font-weight: 100 900;          /* variable: los cuatro pesos en 35 KB */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── Color ──────────────────────────────────────────────────────────────
     Medido: fondos rgb(34,34,34) · rgb(0,0,0) · rgb(17,17,17).
     El acento venía en CUATRO magentas distintos (#9A037E, #FD5CDF, #FF00FF,
     #FF00CC). Aquí hay tres, y cada uno tiene un trabajo.                  */

  --c-fondo:        #111111;   /* el lienzo */
  --c-fondo-hondo:  #000000;   /* secciones que se hunden */
  --c-fondo-alto:   #222222;   /* paneles y tarjetas que suben */

  --c-texto:        #FFFFFF;             /* 18,88:1 sobre el fondo */
  --c-texto-tenue:  #B9B9B9;             /*  9,62:1 — sigue siendo legible */
  --c-texto-oscuro: #111111;             /* para cuando el fondo es claro */

  /* El magenta de marca. Solo TEXTO, bordes y filetes sobre fondo oscuro:
     6,16:1 sobre negro · 5,54 sobre #111 · 4,67 sobre #222.                */
  --c-acento:       #FF00D0;
  /* Relleno de botón con texto blanco. El de producción (#FF00D0 con blanco)
     da 3,41:1 y NO pasa 4,5. Este da 4,81 conservando tono y saturación.   */
  --c-acento-relleno: #D300AC;
  --c-acento-hover:   #B30092;           /* 6,30:1 con blanco */
  /* Magenta claro para texto sobre los paneles #222, donde el de marca se
     queda en 4,67 y va justo. Este da 5,89.                                */
  --c-acento-claro:   #FD5CDF;

  --c-borde:        #333333;
  --c-borde-vivo:   #FF00D0;
  --c-sobre-acento: #FFFFFF;
  --c-velo:         rgb(0 0 0 / 0.62);   /* medido: rgba(0,0,0,0.61) */
  --c-foco:         #FFFFFF;

  /* ── Tipografía ─────────────────────────────────────────────────────────
     Una familia: Montserrat, variable. Es lo que usa la web real y es OFL.
     La escala interpola linealmente entre 390 y 1440 px:
       pendiente = (max − min) / (1440px − 390px)
       base_rem  = (min − pendiente × 390px) / 16
     Los valores mínimo y máximo están MEDIDOS a esos dos anchos.           */

  --f-titulo: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-cuerpo: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-cifra:  clamp(2.75rem,   1.543rem  + 4.95vw,   6rem);       /* 200+ · 1 Billion+ */
  --t-h1:     clamp(2.25rem,   1.507rem  + 3.05vw,   4.25rem);    /* medido 36 → 68 */
  --t-h2:     clamp(1.875rem,  1.318rem  + 2.29vw,   3.375rem);   /* medido 30 → 54 */
  --t-h3:     clamp(1.625rem,  1.416rem  + 0.857vw,  2.188rem);   /* medido 26 → 35 */
  --t-h4:     clamp(1.25rem,   1.157rem  + 0.381vw,  1.5rem);
  --t-lead:   clamp(1.062rem,  0.9929rem + 0.286vw,  1.25rem);
  --t-cuerpo: clamp(1rem,      0.9768rem + 0.0952vw, 1.062rem);   /* nunca < 16px: iOS
                                                 hace zoom al enfocar un input menor */
  --t-micro:  clamp(0.8125rem, 0.7893rem + 0.0952vw, 0.875rem);

  --p-normal: 400;
  --p-medio:  500;
  --p-semi:   600;   /* el de los botones, medido */
  --p-fuerte: 700;   /* el de los titulares, medido */

  --lh-titulo: 1.1;
  --lh-cuerpo: 1.65;
  --ls-titulo: -0.01em;
  --ls-micro:  0.08em;

  /* ── Espaciado ──────────────────────────────────────────────────────────
     Cuatro pasos fluidos para el ritmo vertical, y una escala fija para lo
     pequeño, donde fluido no aporta nada y complica.                       */

  --e-seccion: clamp(3.5rem, 2.2rem    + 5.33vw, 7rem);    /* entre secciones */
  --e-bloque:  clamp(2rem,   1.443rem  + 2.29vw, 3.5rem);  /* dentro de una */
  --e-canal:   clamp(1.25rem, 0.9714rem + 1.14vw, 2rem);   /* entre columnas */
  --e-gutter:  clamp(1.25rem, 0.7857rem + 1.9vw, 2.5rem);  /* margen lateral */

  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;

  /* ── Medidas ────────────────────────────────────────────────────────── */

  --ancho-max:  75rem;    /* 1200px: el contenedor de la web real */
  --ancho-texto: 68ch;    /* una columna de texto no se lee más ancha */
  --tap: 44px;            /* objetivo táctil mínimo. Hoy hay 142 por debajo de 40 */

  --radio:     10px;      /* medido: el radio que más se repite */
  --radio-gr:  16px;
  --radio-pastilla: 100px;  /* medido: el de los botones */

  --sombra:    0 2px 12px rgb(0 0 0 / 0.4);
  --sombra-gr: 0 12px 40px rgb(0 0 0 / 0.55);

  --dur:      180ms;
  --dur-larga: 320ms;
  --curva:    cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* El movimiento es una preferencia del sistema, no nuestra. Una sola regla,
   arriba, para que ningún componente tenga que acordarse. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; --dur-larga: 0ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}