/* Colores, letras y espacios en un solo lugar.
   Estética del kit editorial 03 (docs/bocetos/kit-editorial-03): negro, rojo y crema.
   Provisorios hasta que Nico pase el logo y los colores: se cambian acá y listo. */
:root {
  --color-fondo: #111112;
  --color-superficie: #1b1b1b;
  --color-borde: #2e2e2e;
  --color-texto: #f2ecdd;
  --color-texto-suave: #a39e94;
  /* El rojo del kit es #ed1c2e; este es apenas más oscuro para que el texto blanco de los
     botones se lea bien (contraste 4,54; el mínimo para texto chico es 4,5). */
  --color-acento: #e81b2d;
  --color-sobre-acento: #ffffff;
  --color-velo: rgb(0 0 0 / 0.65);
  --color-velo-oscuro: rgb(0 0 0 / 0.85);
  /* Los degradés del hero: el color del fondo, casi tapando la foto o apenas encima. */
  --color-fondo-tapa: rgb(17 17 18 / 0.95);
  --color-fondo-transparente: rgb(17 17 18 / 0.2);
  --color-acento-tenue: rgb(232 27 45 / 0.2);
  --color-acento-brillo: rgb(232 27 45 / 0.5);
  /* Tarjetas de producto en crema (spec 5c): las fotos del mayorista tienen fondo blanco
     y sobre crema casi se funden. El texto oscuro sobre crema tiene contraste de sobra
     (suave: 6,0; el mínimo para texto chico es 4,5). */
  --color-tarjeta: #f2ecdd;
  --color-sobre-tarjeta: #111112;
  --color-sobre-tarjeta-suave: #5c574f;

  /* Anton y Barlow Condensed vienen de Google Fonts (el <link> está en cada página).
     Si no cargan, el navegador usa la siguiente de la lista. */
  --fuente-texto: "Barlow Condensed", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-titulos: Anton, Impact, "Arial Narrow", "Franklin Gothic Medium", sans-serif;
  --tamano-texto-nota: 0.85rem;

  --espacio: 16px;
  --radio: 6px;

  /* Alto del encabezado fijo en el celular y la tablet (marca, menú y buscador). Lo usan el
     encabezado y el hero de la portada: si el encabezado cambia, se cambia acá. */
  --alto-encabezado-celular: 155px;

  /* El hero de la portada (spec 5c). Son medidas tomadas en el navegador: si cambia el
     texto del hero, la fuente o la frase, hay que volver a medir. */
  /* Celular: lo que ocupa el texto debajo de las remeras (frase, bajada, botón, datos y
     márgenes). Las remeras se quedan con el resto de la pantalla. */
  --hero-texto-celular: 285px;
  /* Compu: el encabezado, el aire del hero y el pedacito de categorías que asoma abajo. */
  --hero-reserva-compu: 300px;
  /* En Anton, "EL ROCK TIENE SU LUGAR" mide unas 9,2 veces el tamaño de la letra. */
  --hero-frase-proporcion: 9.2;
}