/* ============================================================
   MOLISB · Design tokens
   Esta es la "piel" de la marca. Para las webs de las amigas
   se duplica este archivo y solo se cambian estos valores.
   ============================================================ */

/* ---------- Tipografías ---------- */
@font-face {
  font-family: "Codan";
  src: url("../assets/fonts/Codan-Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Codan";
  src: url("../assets/fonts/Codan-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Codan";
  src: url("../assets/fonts/Codan-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Sulphur Point";
  src: url("../assets/fonts/SulphurPoint-Light.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Sulphur Point";
  src: url("../assets/fonts/SulphurPoint-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Sulphur Point";
  src: url("../assets/fonts/SulphurPoint-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ---------- Paleta (guía de marca MOLISB) ---------- */
  --c-borgona: #4E0A01;   /* pop de color, títulos fuertes */
  --c-rosado:  #B87770;   /* acento cálido / femenino */
  --c-hueso:   #F7F4EB;   /* fondo base, "papel" */
  --c-oscuro:  #362722;   /* café oscuro para texto (OJO: revisar con Monica, la guía pone #362772) */
  --c-oliva:   #B7AE7B;   /* verde/oliva, toque natural */

  /* Roles semánticos (usar estos en el resto del CSS) */
  --bg:        var(--c-hueso);
  --fg:        var(--c-oscuro);
  --accent:    var(--c-borgona);
  --accent-2:  var(--c-rosado);
  --muted:     #8c8479;
  --line:      #d9d3c6;   /* líneas finas tipo plano técnico */

  /* ---------- Tipografía ---------- */
  --font-title: "Codan", Georgia, serif;
  --font-body:  "Sulphur Point", system-ui, sans-serif;

  /* Escala tipográfica (fluida) */
  --step--1: clamp(0.83rem, 0.79rem + 0.2vw, 0.95rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  --step-1:  clamp(1.33rem, 1.2rem + 0.6vw, 1.7rem);
  --step-2:  clamp(1.77rem, 1.5rem + 1.2vw, 2.6rem);
  --step-3:  clamp(2.4rem, 1.9rem + 2.4vw, 4rem);
  --step-4:  clamp(3rem, 2.2rem + 4vw, 6rem);

  /* ---------- Espaciado / ritmo ("aire con sentido") ---------- */
  --space-xs: 0.5rem;
  --space-s:  1rem;
  --space-m:  2rem;
  --space-l:  4rem;
  --space-xl: 8rem;
  --container: 1200px;
  --gutter: clamp(1.2rem, 5vw, 5rem);

  /* ---------- Otros ---------- */
  --radius: 4px;         /* bordes casi rectos, lenguaje técnico */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}