/* =========================================================
   El Bien Comer · Tokens de diseño
   ========================================================= */

/* Tipografías locales (licencia SIL OFL) */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/inter-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Dancing Script"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/dancing-script-latin-700-normal.woff2") format("woff2"); }

:root {
  /* Paleta base */
  --cafe: #42210b;
  --naranja: #f26522;
  --rosa: #ff7bac;
  --acento: #fbdeb8;
  --crema: #fbb03b;
  --naranja-claro: #f7931e;
  --naranja-oscuro: #f15a24;
  --blanco: #ffffff;

  /* +20% claros para hover */
  --cafe-20: #684d36;
  --naranja-20: #f5844e;
  --rosa-20: #ff95bd;
  --acento-20: #fce5c6;
  --crema-20: #fcc062;
  --naranja-claro-20: #f9a94b;
  --naranja-oscuro-20: #f47b4f;

  /* Superficies */
  --overlay-hero: rgba(66, 33, 11, .6);
  --panel-tarjeta: rgba(255, 255, 255, .2);
  --borde-punteado: 2px dashed rgba(255, 255, 255, .6);
  --borde-punteado-cafe: 2px dashed rgba(66, 33, 11, .22);
  --sombra-texto: none; /* alternativa si cuesta leer: 0 1px 2px rgba(66, 33, 11, .35) */
  --degradado-marca: linear-gradient(90deg, var(--naranja-oscuro) 0%, var(--crema) 50%, var(--rosa) 100%);

  /* Tipografía */
  --f-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-titulo: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --f-firma: "Dancing Script", cursive;

  --t-firma: clamp(1.6rem, 3.6vw, 4.4rem);
  --t-mega: clamp(3.4rem, 12.5vw, 15rem);
  --t-xl: clamp(2.6rem, 6.4vw, 7.6rem);
  --t-l: clamp(2.2rem, 5vw, 6rem);
  --t-m: clamp(1.8rem, 3.6vw, 4.2rem);
  --t-p: clamp(1rem, 1.05vw, 1.25rem);
  --t-p-tarjeta: clamp(1.0625rem, 1vw, 1.2rem);
  --t-chico: .875rem;

  /* Espacio y forma */
  --ancho: 1680px;
  --gutter: clamp(16px, 6vw, 120px);
  --sec-y: clamp(72px, 9vw, 160px);
  --radio-foto: clamp(20px, 2.4vw, 44px);
  --radio-tarjeta: clamp(20px, 2vw, 32px);
  --radio-bloque: clamp(28px, 3.4vw, 64px);
  --radio-boton: clamp(14px, 1.2vw, 22px);

  /* Movimiento */
  --t-hover: 200ms ease;
  --curva-salida: cubic-bezier(.22, 1, .36, 1);
}