/* ============================================================================
   Brooklyn by Janice — Tokens de diseño
   ----------------------------------------------------------------------------
   Fuente única de verdad para color, tipografía y layout.

   En el theme de Shopify estos mismos tokens estaban redefinidos 14 veces,
   una por sección, dentro de un <style> inline. Esa duplicación era la causa
   directa de que la tipografía estuviera rota sin que nadie lo notara: el CSS
   pedía 'Work Sans' y 'Fira Code', fuentes que el theme nunca cargaba.

   Aquí se declaran una sola vez, en :root, y se cargan de verdad (fonts.css).
   ========================================================================= */

:root {
  /* ---------- Color ---------- */
  --ink:         #2B2B2B;  /* texto principal */
  --wine:        #6E2C34;  /* color de marca, CTAs */
  --wine-dark:   #561F26;  /* hover de CTAs */
  --cacao:       #795757;
  --terracotta:  #C98977;
  --blush:       #E5B9CC;
  --sage:        #93A37E;
  --sage-dark:   #76845f;
  --sand:        #EFE2B7;
  --paper:       #F0F0F0;  /* fondo de secciones alternas */
  --white:       #FFFFFF;

  /* Papel cálido del rediseño (Dirección A · La Carta).
     El blanco puro es el fondo de una tienda; este es el de una publicación,
     y además empuja la paleta entera hacia la zona cálida-apetitosa. */
  --papel:       #FBF7F2;
  --tinta-2:     #4a4442;  /* cuerpo secundario sobre papel — 8,9:1 */

  /* Crudo — pedido de Ignacio (31-08) para las cajas del sello, que sobre el
     blanco puro de esa sección se distinguían solo por su sombra.
     ⚠️ Está a UN punto de `--papel` (#FBF7F2 vs #FCF7F2): a ojo son el mismo
     color. Existe como token propio porque el valor lo pidió Ignacio literal;
     si en algún momento se decide unificar, es reemplazar este token por
     `--papel` y borrar esta declaración, no buscar hexadecimales sueltos. */
  --crudo:       #FCF7F2;

  /* ---------- Tipografía ----------
     Sallim NO entra aquí: es de uso exclusivo del logo. */
  --display: 'Poppins', system-ui, sans-serif;      /* títulos */
  --body:    'Work Sans', system-ui, sans-serif;    /* cuerpo */
  --mono:    'Fira Code', ui-monospace, monospace;  /* eyebrows, precios, stats */
  --script:  'Arapey', Georgia, serif;              /* acentos editoriales */

  /*
   * Display del rediseño. Todavía NO reemplaza a --display globalmente: las
   * páginas que aún no se rediseñan tienen sus tamaños ajustados a Poppins, y
   * cambiar la fuente por debajo las descuadraría. Cada página adopta --serif
   * al portarse; cuando quede la última, --display pasa a Young Serif y
   * Poppins sale del tema.
   */
  --serif:   'Young Serif', Georgia, serif;

  /* ---------- Texturas: APAGADAS (pedido de Janice, 30-08) ----------
     `--harina` era la textura de puntos espolvoreados del fondo y `--mantel`
     la trama diagonal de la franja de garantía. Janice pidió fondo liso en
     toda la web: cuerpo, footer, menú y todas las cajas.

     ⚠️ Se apagan AQUÍ, en el token, y no borrando los 46 `background-image`
     que los usan. Dos razones: (a) los colores de fondo se conservan intactos,
     que es exactamente lo pedido —«mantén el color, elimina las líneas»—; y
     (b) para volver a encenderlas se descomenta un bloque, en vez de reponer
     46 declaraciones repartidas por 11 hojas.

     Los valores originales quedan abajo, tal cual, para que la vuelta atrás
     sea copiar y pegar. */
  --harina:      none;
  --harina-size: auto;
  --mantel:      none;

  /* Valores originales, por si se quieren recuperar:
     --harina:
       radial-gradient(circle at 22% 34%, rgba(201, 137, 119, .10) 0 1.1px, transparent 1.6px),
       radial-gradient(circle at 68% 72%, rgba(110, 44, 52, .07) 0 1.1px, transparent 1.6px);
     --harina-size: 13px 13px, 21px 21px;
     --mantel: repeating-linear-gradient(-45deg, rgba(255,255,255,.5) 0 1px, transparent 1px 9px); */

  /* ---------- Ritmo vertical ----------
     Una sola fuente para el espacio entre secciones en TODO el sitio
     (pedido de Ignacio, 23-08).

     La regla: cada sección lleva `--sec` arriba y `--sec` abajo, así que dos
     secciones vecinas suman `--sec-borde` entre ellas. La primera y la última
     de cada página no tienen vecina de ese lado, así que ahí se aplica
     `--sec-borde` directo — el espacio contra el header y contra el footer
     mide lo mismo que el espacio entre dos secciones cualesquiera.

     Antes esto vivía disperso en 60 reglas por página, con valores entre 8 y
     48px que nadie había elegido en conjunto: las páginas tenían ritmos
     distintos y dentro de una misma página el salto entre secciones cambiaba
     de tamaño sin motivo. Para cambiar el ritmo del sitio entero ahora se
     toca UN número. */
  --sec:        20px;
  --sec-borde:  40px;
  --sec-hero:   30px;

  /* ⚠️ `--sec-borde` subió de 20 a 40 el 30-08 (pedido de Janice).
     El criterio nuevo es «40px SIEMPRE entre secciones», y el reparto 20+20
     solo funciona cuando hay dos secciones que aportan la mitad cada una.
     Contra el header y contra el footer no hay vecina que aporte: el header
     es una barra de 53px sin padding de sección, así que los 40px los tiene
     que poner entero el primer bloque de la página. Mismo caso al cerrar
     contra el footer. Con 20 quedaba la mitad del aire que entre dos
     secciones cualesquiera, que es justo lo que se veía apretado. */

  /* ⚠️ `--sec-hero` es el aire CONTRA EL HEADER, y solo ese (pedido de Ignacio,
     31-08: «la separación entre header y hero, 30px en todas las páginas»).

     Antes el borde superior y el inferior compartían `--sec-borde`, y eso está
     bien como criterio general pero no acá: contra el footer los 40px separan
     dos cosas del mismo peso, mientras que contra el header separan la página
     de una barra fija de 53px que ya tiene su propio filete. Con 40 el primer
     bloque nacía flotando.

     El home lo tenía en 30 desde el 30-08 como excepción escrita a mano en
     `home-brooklyn.css`; esa excepción se BORRÓ al crear este token, porque
     pasó a ser la regla del sitio y dejarla habría sido el mismo valor escrito
     dos veces.

     Quien lo aplica es el RITMO VERTICAL ÚNICO (components.css) sobre el primer
     hijo de cada raíz de plantilla. Las tres pantallas que no entran en esa
     lista lo declaran a mano y apuntan acá: las migas (`base.css`), el aviso
     del 404 —que lo necesita en `margin` porque es una caja con borde— y la
     cabecera de «crear cuenta». */

  /* ---------- Interlineado ----------
     Mismo criterio: el cuerpo de texto de todo el sitio se lee con el mismo
     interlineado. Estaba repartido entre 1,45 · 1,5 · 1,55 · 1,6 · 1,65 según
     la hoja que lo escribiera. 1,55 está dentro del rango 1,5–1,6 que §3.m
     fija para móvil, que es el 95,64% del tráfico. */
  --lh-texto: 1.36;

  /* ---------- Layout ---------- */
  --container: 1180px;
  --reading:   740px;   /* ancho de lectura de páginas de texto */
  --edge:      24px;    /* padding lateral — el valor de móvil es el base */
  --sticky-h:  53px;    /* alto real del header pegado: 44px de botón + 4px de padding arriba y abajo + 1px de borde */

  /* ---------- Formato de la fotografía de producto ----------
     TODAS las fotos de producto están tomadas en 4:5 —1080x1350 y sus
     equivalentes: 1120x1400, 896x1400, 768x1200, 832x1300—, así que ese es el
     formato en el que se muestran, sin recorte. Antes cada superficie elegía
     el suyo (la tarjeta en cuadrado, la galería de la ficha en 1.75 apaisado)
     y el recorte se comía parte de la foto. Para cambiar el formato de la
     fotografía del sitio entero se toca este número. */
  --foto-producto: 4 / 5;

  /* ---------- Radios y sombras ----------
     ⚠️ Desde el 30-08 el sitio NO tiene esquinas rectas (pedido de Janice).
     Toda caja, campo de formulario, chip y botón lleva radio. Si escribes un
     componente nuevo, sale de acá — no de un número suelto.

     `--r-caja` es el radio de las cajas de contenido (la cuenta, el bloque del
     Bundle, el sello, el desglose, las cajas legales). Se separa de `--r-md`
     porque ese ya lo usaban piezas de interfaz —el diálogo, las burbujas de
     Brook, la tarjeta de producto— y no queríamos moverlas al cambiar el
     radio de las cajas.

     `--borde-caja` reemplaza al borde: Janice pidió las cajas SIN borde, así
     que lo que las separa del fondo es la sombra, no una línea. */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-caja:  16px;
  --r-campo: 12px;
  --borde-caja: 0 1px 2px rgba(43, 43, 43, .04), 0 6px 18px rgba(43, 43, 43, .07);
  --shadow-sm: 0 2px 8px rgba(43, 43, 43, .06);
  --shadow-md: 0 8px 24px rgba(43, 43, 43, .10);

  /* ---------- Transiciones ---------- */
  --t-fast: 140ms ease;
  --t-base: 220ms ease;
}

/*
 * Mobile-first también en los tokens.
 *
 * Antes el padding lateral base eran los 24px de escritorio y se reducía a 20
 * con un `max-width`. Es al revés de como se piensa este sitio: el 95,64% del
 * tráfico es móvil, así que el valor base es el de móvil y el escritorio es la
 * excepción que lo amplía.
 */
@media (min-width: 561px) {
  :root {
    --edge: 32px;
  }
}