/* ===========================================================================
   TOKENS DEL PORTAL
   ===========================================================================
   Viven aqui y no dentro de css/tienda.css porque los usan DOS sitios: el
   portal de compras y, desde ahora, el centro de recursos. Tenerlos duplicados
   en las dos hojas garantizaba que tarde o temprano se separaran -se cambia un
   color en una y la otra se queda vieja-, asi que hay una sola copia.

   Salen del tema de Shopify: colores y tipografias de su settings_data.json,
   el ancho de container_size:medium y las medidas de sus botones.
   =========================================================================== */
:root{
  --t-fondo:#ffffff;
  --t-fondo-2:#f5f5f5;
  --t-fondo-3:#faf9f7;
  --t-tinta:#1f1e20;
  --t-titulo:#4a494b;
  /* #6b6b6c y no el #757576 del tema. Aquel da 4,22:1 sobre --t-fondo-2 y
     4,4:1 sobre --t-fondo-3, los dos por debajo del 4,5 de AA, y es el color
     de TODOS los metadatos: 56 textos del centro de recursos y el lema del
     menu del portal caian ahi. Con este da 4,88 sobre --t-fondo-2, 5,06 sobre
     --t-fondo-3 y 5,32 sobre blanco: pasa en las tres superficies. */
  --t-suave:#6b6b6c;
  --t-acento:#746355;
  --t-acento-claro:#8d7a69;
  --t-borde:#e5e5e5;
  --t-borde-fuerte:#d6d6d6;
  --t-negro:#040404;
  --t-credito:#f8f4ec;

  --t-ui:'Outfit', system-ui, -apple-system, sans-serif;
  --t-display:'Baskervville', Georgia, serif;
  /* La serif del SITIO, no la del tema: es la que usa el logotipo del pie
     -.footer__name, var(--serif) en css/styles.css- y la marca de la barra
     del portal tiene que ser la misma letra que la del pie. */
  --t-serif:Georgia, "Times New Roman", serif;
  /* el tema usa Roboto Mono SOLO en los botones; es un rasgo suyo muy visible */
  --t-mono:'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-curva:cubic-bezier(.22,1,.36,1);
  --t-rapida:.18s;
  --t-media:.32s;

  /* 1340px: es lo que vale container_size:medium en el tema */
  --t-ancho:1340px;
  --t-gutter:clamp(20px, 4vw, 48px);
  /* 98px: es lo que mide el menu del sitio informativo -medido en /vinos-, y
     el portal lo iguala para que al cruzar de un lado a otro la barra no
     cambie de alto. Todo lo que depende de ella -el panel de movil, el tope
     del scroll, el margen del cajon- sale de este token. */
  --t-cab:98px;

  /* EL CANALON DE LOS BORDES, el que usan las piezas de ancho completo: la
     barra y el banner. Medido sobre la captura del tema, el logotipo arranca
     en el 4,75% del ancho y el titulo del banner en el 4,95%: o sea que los
     dos cuelgan del MISMO margen y por eso se leen alineados en vertical.
     Aqui se toma el 4,95% y se le ponen topes para que no se encoja a nada en
     un telefono ni se vaya a 150px en un monitor ancho.
     OJO: no reemplaza a --t-gutter. Ese sigue mandando dentro de los 1340px
     del cuerpo de la pagina; este es solo para lo que va de borde a borde. */
  --t-borde-pagina:clamp(20px, 4.95vw, 96px);
}

/* LA BARRA, MAS BAJA EN EL TELEFONO. Los 98px salieron de igualar el menu del
   sitio informativo, para que al cruzar de un lado al otro la barra no
   cambiara de alto. En el telefono ese argumento pesa menos que el espacio:
   98 de barra mas 34 de la cinta se comen 132 de una pantalla de 844, y la
   barra solo lleva tres cosas -hamburguesa, isotipo y carrito-, que entran de
   sobra en 78.
   Va en el TOKEN y no en .t-barra para que todo lo que cuelga de el acompañe
   solo: el alto del banner, el tope del panel de movil y el margen del cajon
   del carrito salen de aqui. */
@media (max-width:699px){
  :root{ --t-cab:78px; }
}