/* ============================================================
   TOKENS — valeriamoretto.com
   El sistema de diseño en un solo archivo. Todo lo demás lo lee de aquí.
   Si un color, un tamaño o una duración aparece hardcodeado en otro CSS,
   está mal: se agrega aquí y se referencia con var().
   ============================================================ */

/* ---------- Tipografía ----------
   Instrument Sans variable, eje de peso 400–700.
   Servida desde este sitio, no desde Google: más rápida en el primer
   render y no manda la IP de nadie a un tercero.
   font-display:swap = el texto se ve de inmediato con la de sistema
   y cambia cuando carga la real. Nunca hay un momento en blanco. */

@font-face{
  font-family:'Instrument Sans';
  src:url('../assets/fonts/InstrumentSans-latin.woff2') format('woff2');
  font-weight:400 700;
  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+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,
                U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';
  src:url('../assets/fonts/InstrumentSans-latin-ext.woff2') format('woff2');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,
                U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{

  /* ---------- Color: base ---------- */
  --ink:      #0E1018;   /* texto sobre fondos claros */
  --paper:    #F7F7FA;   /* fondo por defecto del sitio */

  /* ---------- Color: bloques de sección ----------
     Cada uno viene con el color de texto que SÍ pasa contraste encima.
     No improvises combinaciones: usa el par completo. */
  --cobalt:      #4B5BF0;  --on-cobalt: var(--paper);   /* 4.84:1 */
  --mint:        #8DE8C6;  --on-mint:   var(--ink);     /* 13.10:1 */
  --lilac:       #C2BDF7;  --on-lilac:  var(--ink);     /* 10.77:1 */
  --slate:       #191C2C;  --on-slate:  var(--paper);   /* 15.79:1 */

  /* ---------- Color: acento coral ----------
     Son TRES tokens distintos porque un solo coral no funciona
     en los tres fondos. Elegir el equivocado rompe accesibilidad. */
  --coral:        #FF6C5A;  /* relleno: botones y bloques. Texto encima: --ink (6.82:1) */
  --go:           #1E9E5A;  /* verde de "disponible". Sobre papel: 4.02:1 como texto,
                               pero el punto es decorativo, no texto — ver .badge */
  --coral-text:   #C43A22;  /* texto y links SOBRE papel (4.94:1). Nunca uses --coral para esto */
  --coral-bright: #FF8A7A;  /* coral SOBRE pizarra oscura (7.37:1) */
  --coral-lilac:  #7B291E;  /* links sobre lila (5.47:1) */
  --coral-mint:   #7B291E;  /* links sobre menta (6.65:1) */
  /* Un solo coral de texto tampoco alcanza para todas las bandas: el de
     papel cae a 3.0:1 sobre lila. Se aplican con --link, igual que --dim. */

  /* ⚠️ REGLA: el coral nunca va encima del cobalto ni al revés — 1.86:1,
     ilegible. Si una sección es cobalto, su acento es --paper o --mint. */

  /* ---------- Color: superficies y bordes ----------
     Los bordes SÍ pueden ser translúcidos: se adaptan al fondo y no
     tienen que pasar contraste de texto. */
  --hairline:     color-mix(in srgb, var(--ink) 14%, transparent);
  --hairline-alt: color-mix(in srgb, var(--paper) 26%, transparent); /* sobre fondo oscuro */

  /* Los grises de TEXTO son opacos a propósito.
     Un gris translúcido cambia de contraste según dónde caiga y las
     herramientas de auditoría no lo saben calcular — daba falsos
     reprobados. Estos son mezclas ya resueltas, con su ratio fijo.

     Hay uno POR BANDA. Un solo gris no sirve: el que se ve bien sobre
     papel se cae a 3.15:1 sobre lila. Se aplican con --dim, que cada
     .band define en base.css. */
  --muted:      #67686E;  /* texto secundario sobre papel · 5.19:1 */
  --muted-alt:  #B9BAC0;  /* texto secundario sobre pizarra · 8.72:1 */
  --dim-lilac:  #44445B;  /* texto secundario sobre lila · 5.36:1 */
  --dim-mint:   #34514C;  /* texto secundario sobre menta · 5.97:1 */
  /* Cobalto NO tiene gris secundario a propósito: el texto lleno ya está
     a 4.84:1, justo encima del mínimo. Cualquier atenuación lo reprueba,
     así que ahí el texto secundario va a color completo. */

  /* ---------- Escala tipográfica ----------
     clamp(mínimo, preferido, máximo). El tamaño crece con el ancho de
     pantalla sin media queries y sin llegar nunca a romperse.
     step-5 y step-6 son los títulos gigantes de los bloques de color. */
  --step--2: clamp(.72rem, .70rem + .10vw, .80rem);
  --step--1: clamp(.84rem, .80rem + .20vw, .95rem);
  --step-0:  clamp(1rem,   .96rem + .22vw, 1.15rem);
  --step-1:  clamp(1.15rem,1.06rem + .45vw, 1.4rem);
  --step-2:  clamp(1.35rem,1.20rem + .70vw, 1.9rem);
  --step-3:  clamp(1.6rem, 1.30rem + 1.5vw, 2.6rem);
  --step-4:  clamp(1.9rem, 1.35rem + 2.6vw, 3.6rem);
  --step-5:  clamp(2.2rem, 1.30rem + 4.2vw, 5rem);
  --step-6:  clamp(2.6rem, 1.40rem + 5.2vw, 6.5rem);

  --lh-tight:  .95;   /* títulos grandes */
  --lh-snug:   1.2;   /* subtítulos */
  --lh-body:   1.6;   /* texto corrido */
  --track-tight: -.035em;  /* los títulos enormes necesitan tracking negativo */
  --track-body:   0em;
  --track-caps:  .14em;    /* para versalitas y etiquetas */

  /* Instrument Sans llega hasta 700. No pidas 800: el navegador lo
     falsifica engrosando los trazos y se ve sucio a tamaño grande. */
  --w-regular: 400;
  --w-medium:  500;
  --w-bold:    700;

  /* ---------- Espaciado ---------- */
  --space-2xs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  .75rem;
  --space-md:  1.25rem;
  --space-lg:  2rem;
  --space-xl:  3.25rem;
  --space-2xl: 5rem;
  --space-3xl: 8rem;

  /* Aire vertical de una sección y margen lateral de la página.
     Los dos crecen con la pantalla. */
  --section-y: clamp(3.5rem, 9vw, 8rem);
  --gutter:    clamp(1.25rem, 4vw, 4rem);
  --measure:   68ch;   /* ancho máximo de un párrafo legible */
  --max-w:     1440px;
  --nav-h:     3.6rem; /* alto de la barra fija: el contenido lo esquiva */

  /* ---------- Radios ---------- */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-pill: 999px;

  /* ---------- Movimiento ----------
     Una sola curva para casi todo. La "expressive" es para el cursor
     y las entradas de sección, donde se quiere un poco de rebote. */
  --ease:            cubic-bezier(.22,.61,.36,1);
  --ease-expressive: cubic-bezier(.34,1.30,.64,1);
  --dur-fast:   140ms;
  --dur-base:   280ms;
  --dur-slow:   560ms;
  --dur-reveal: 700ms;

  /* ---------- Capas ---------- */
  --z-base:   1;
  --z-nav:    100;
  --z-menu:   200;
  --z-cursor: 900;   /* el cursor siempre hasta arriba */
}

/* ---------- Accesibilidad: movimiento reducido ----------
   Si la persona pidió menos animación en su sistema, las duraciones
   se van casi a cero en vez de desactivar cosas una por una.
   Esto vale para TODO el sitio, incluidas las animaciones futuras. */
@media (prefers-reduced-motion:reduce){
  :root{
    --dur-fast:1ms; --dur-base:1ms; --dur-slow:1ms; --dur-reveal:1ms;
  }
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    scroll-behavior:auto !important;
  }
}