/**
 * Caché Match — capa de tokens.
 *
 * app.css consume SOLO variables de este archivo, nunca valores literales.
 * Cambiar la direccion de arte = cambiar este archivo.
 *
 * La escala sale del lienzo de Figma (1920x950). Alli hay seis cuerpos de
 * letra (18, 22, 24, 29, 48, 72) y los espacios son multiplos de 4. Antes el
 * test y el resultado tenian escalas distintas —y hasta tipografias
 * distintas, Plus Jakarta en el test y Raleway mas Inter en el resultado—,
 * asi que se veian como dos productos pegados. Ahora los dos usan esta.
 *
 * En pantallas pequeñas la escala baja, porque 72px de titular en un
 * telefono no es un diseño espacioso: es un titular cortado.
 */

:root {
  /*  La paleta de verdad: crema y vino. El rojo bombero (#c92d2d) y el gris
   *  neutro que traia el export de Figma eran de prueba. */

  /* --- tinta ------------------------------------------------------------ */
  --ink:        #1c1a18;   /* negro calido, no neutro */
  --ink-soft:   #6f6a63;
  --ink-faint:  #9a958c;

  /*  El acento de la marca: el nombre del perfume, el boton, las estrellas
   *  y el corazon. Negro, no vino. Es el mismo negro calido de la tinta, a
   *  proposito: asi la pantalla tiene un color y no dos que compiten. */
  --accent:      #1c1a18;

  /* --- superficies ------------------------------------------------------ */
  --surface:      #fffdf9;   /* pildoras y tarjeta */
  --surface-warm: #f5f1ea;   /* banner y hueco de la foto */
  --surface-sunk: #e9e2d5;   /* circulos de acorde: piden mas contraste que
                                en el mockup, porque ahi llevan imagen */
  --hairline:     rgba(28, 26, 24, .12);
  --hairline-mid: rgba(28, 26, 24, .20);

  /* --- fondo ------------------------------------------------------------ */
  /* Color plano por debajo de la textura: es lo que se ve mientras carga. */
  --bg-base:  #f2ede4;
  --bg-img:   url('../fondo.jpg');

  /* --- tipografia ------------------------------------------------------- */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Los seis cuerpos, en su version de telefono. */
  --fs-eyebrow: .8125rem;   /* 13 */
  --fs-body:    1rem;       /* 16 */
  --fs-pill:    1.0625rem;  /* 17 */
  --fs-lead:    1.125rem;   /* 18 */
  --fs-title:   1.75rem;    /* 28 */
  --fs-display: 2.25rem;    /* 36 */
  --fs-micro:   .8125rem;   /* 13, fijo: chips y notas al pie */

  --lh-tight:   .99;        /* el titular del export */
  --lh-title:   1.2;        /* el resto de titulos del export */
  --lh-body:    1.45;
  --tr-tight:   -.02em;     /* el del export, para los 48 */
  /*  El export traia .4em para los antetitulos. En "TU MATCH" funciona, pero
   *  el mismo valor cae sobre "CUANTO SE NOTA" o "ABERCROMBIE & FITCH" y ahi
   *  la palabra se deshace: a 18px son 7,2px entre letras, mas de lo que mide
   *  el espacio entre palabras, asi que se leen como letras sueltas. A .16em
   *  sigue siendo una versalita espaciada y la palabra se mantiene entera. */
  --tr-wide:     .16em;     /* rotulos en mayuscula */
  --tr-key:      .08em;     /* claves dentro de filas de datos, mas densas */

  /* --- espacio ---------------------------------------------------------- */
  /*  La barra cambiaba de alto segun tuviera boton de volver o no (64 en la
   *  portada, 88 en las preguntas), y la vista de debajo se descolgaba 24px
   *  al pasar de una a otra. Se fija al estado alto: el boton mide 2.5rem
   *  y el relleno es el mismo arriba y abajo. */
  --topbar-h: 5rem;         /* 40 del boton + 2x20 */
  /*  Multiplos de 4, los mismos que usa el resultado: 8 12 16 20 24 32 40. */
  --gutter:  1.5rem;
  --s-1:  .5rem;    /*  8 */
  --s-2:  .75rem;   /* 12 */
  --s-3:  1rem;     /* 16 */
  --s-4:  1.25rem;  /* 20 */
  --s-5:  1.5rem;   /* 24 */
  --s-6:  2rem;     /* 32 */
  --s-7:  2.5rem;   /* 40 */

  /* --- forma ------------------------------------------------------------ */
  /*  Tres radios y no mas: pildora, tarjeta (16 en el export) y chip (8). */
  --r-pill:  999px;
  --r-card:  1rem;
  --r-chip:  .5rem;

  /* Sombra de la tarjeta del perfume: muy abierta y muy suave, para que se
     despegue del fondo sin que se vea el borde de la sombra. */
  --lift-card:  0 2px 6px rgba(28,26,24,.03), 0 16px 44px rgba(28,26,24,.10);
  --lift:       0 1px 2px rgba(28,26,24,.04), 0 6px 16px rgba(28,26,24,.05);
  --lift-hover: 0 2px 4px rgba(28,26,24,.06), 0 12px 28px rgba(28,26,24,.09);

  /* --- motion ----------------------------------------------------------- */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-in:   cubic-bezier(.45, 0, .9, .6);
  --ease-spring: cubic-bezier(.34, 1.42, .64, 1);
  --t-fast:    .18s;
  --t-mid:     .38s;
  --t-slow:    1.1s;

  /* Ritmo de la cascada de opciones. */
  --stagger:   52ms;
}

/* Tableta: la escala sube pero todavia no llega a la del lienzo. */
@media (min-width: 768px) {
  :root {
    --topbar-h:   5.5rem;   /* 40 del boton + 2x24 */
    --gutter:     4rem;
    --fs-eyebrow: 1.125rem;   /* 18 */
    --fs-body:    1.25rem;    /* 20 */
    --fs-pill:    1.25rem;    /* 20 */
    --fs-lead:    1.5rem;     /* 24 */
    --fs-title:   2.25rem;    /* 36 */
    --fs-display: 3rem;       /* 48 */
  }
}

/* Escritorio: exactamente los cuerpos del export. El test y el resultado
   miden igual, que es lo que hacia falta para que parezcan lo mismo. */
@media (min-width: 1200px) {
  :root {
    --gutter:     6rem;
    --fs-body:    1.5rem;     /* 24 */
    --fs-lead:    1.8125rem;  /* 29 */
    --fs-title:   3rem;       /* 48 */
    --fs-display: 4.5rem;     /* 72 */
  }
}