/* ========================================================
   MILINDIO — DESIGN TOKENS
   Fuente única de verdad para color, tipografía y espaciado.
   Reutilizado en todas las páginas (home + fichas de producto).
   Al migrar a Shopify, este archivo se carga tal cual como
   'assets/tokens.css' en theme.liquid.
   ======================================================== */
:root {
  /* Color */
  --cream:#f7f3ed;
  --warm-white:#fdfaf6;
  --sand:#e5dbd0;
  --linen:#cfc4b5;
  --beige:#b8a992;
  --terra:#c4714a;
  --sage:#7a9e8a;
  --slate:#4a6b8a;
  /* Oscuro de marca — derivado del mismo matiz que crema/beige/terra
     (H:28°), no un negro genérico. Sustituye a todo lo que antes
     usaba --text-dark como fondo oscuro (botones, footer, bandas). */
  --espresso:#302318;
  --espresso-hover:#433223;

  --text-dark:#302318;
  --text-mid:#564e47;
  --text-light:#9c9189;
  --text-white:#fdfaf6;

  /* Acento — único color interactivo de marca */
  --terra-hover:#b15c35;

  /* Semántico — derivados de la misma paleta, no colores genéricos */
  --success-text:#325d45;
  --success-bg:#ebf4ef;
  --warning-text:#b58430;
  --warning-bg:#f7f0e3;
  --error-text:#9b3f31;
  --error-bg:#f8eae7;

  /* Bordes */
  --border-default:var(--linen);
  --border-subtle:var(--sand);

  /* Tipografía */
  --font-serif:'Cormorant Garamond',Georgia,serif;
  --font-sans:'Inter',sans-serif;

  /* Layout */
  --nav-h:72px;
  --max-w:1320px;
  --pad-x:48px;

  /* Motion */
  --ease-out:cubic-bezier(0.16,1,0.3,1);

  /* Espaciado editorial — ritmo consistente entre bloques.
     SHOPIFY: mapea 1:1 a los "padding" de cada sección en el
     schema de settings de cada .liquid section. */
  --space-3xs:4px;
  --space-2xs:8px;
  --space-xs:16px;
  --space-sm:24px;
  --space-md:40px;
  --space-lg:64px;
  --space-xl:96px;
  --space-2xl:150px;

  /* Ancho de lectura cómodo para bloques de texto largo */
  --measure:58ch;
}