/* ==========================================================================
   Design tokens — valores tomados del archivo original de Illustrator
   Artboard de referencia: 1920 x 11677,44 px
   ========================================================================== */

:root {
  /* --- Paleta (valores literales del .ai) --------------------------------- */
  --slate:        #636f83;   /* azul pizarra: títulos, fondos, botones       */
  --slate-soft:   #636f84;   /* variante de la tarjeta media del hero        */
  --slate-light:  #778193;   /* trazos decorativos del diseño                */
  --slate-dark:   #4e5867;   /* hover del botón sólido: mantiene el contraste */
  --cream:        #e1dbc9;   /* crema: fondos, texto sobre pizarra           */
  --brown:        #645b54;   /* tarjeta del fondo en el hero                 */
  --ink:          #373737;   /* texto oscuro principal                       */
  --ink-soft:     #2b2b2b;   /* texto de párrafo del hero                    */
  --gray-100:     #f0f1f3;   /* fondo sección "Sobre mí" y pill de navegación*/
  --gray-200:     #ebebeb;   /* fondo Partnerships / Contacto / tarjetas     */
  --white:        #ffffff;

  /* --- Escala ------------------------------------------------------------
     --u equivale a 1 px del diseño de 1920. scale.js lo recalcula con el
     ancho real del documento (sin barra de scroll); este valor es el
     respaldo para el primer pintado, con el mismo tope de 1.2 que aplica
     el JS para que no haya salto al montar en pantallas muy anchas.       */
  --u: min(calc(100vw / 1920), 1.2px);

  /* Alto del header fijo. Lo usan .site-header y scroll-padding-top, que
     tienen que ir siempre en el mismo valor. */
  --header-h: calc(171 * var(--u));

  /* --- Tipografía -------------------------------------------------------- */
  --font: "Neue Haas Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --lh: 1.2;                 /* interlineado del diseño en casi todo el texto */

  /* --- Radios (medidos sobre los trazados del .ai) ------------------------ */
  --r-pill:       9999px;
  --r-input:      calc(16.2 * var(--u));
  --r-method:     calc(20 * var(--u));
  --r-bar:        calc(25 * var(--u));
  --r-card:       calc(32.6 * var(--u));
  --r-partner:    calc(36.2 * var(--u));
  --r-step:       calc(36.2 * var(--u));
  --r-project:    calc(44.1 * var(--u));
  --r-panel:      calc(46.9 * var(--u));
  --r-cream:      calc(47.3 * var(--u));
  --r-hero-front: calc(83 * var(--u));
  --r-hero-back:  calc(80 * var(--u));

  /* --- Geometría del hero (rotaciones medidas en el .ai) ------------------ */
  --hero-rot-front: -8.598deg;
  --hero-rot-mid:   -4.52deg;

  /* --- Movimiento -------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.45s;
}