/* =========================================================
   VARIABLES — Abanico Insurgente
   Dirección artística: editorial europea, cultural, lujo sobrio.
   ========================================================= */

:root {
  /* --- Paleta de marca --- */
  --color-ivory:    #F5F0E7;   /* marfil cálido: fondo principal */
  --color-stone:    #FBF8F2;   /* blanco piedra: fondos alternos */
  --color-charcoal: #191816;   /* carbón: texto y fondos oscuros */
  --color-wine:     #681C3D;   /* burdeos: acento principal */
  --color-green:    #1D493B;   /* verde profundo: acento secundario */
  --color-gold:     #B4935E;   /* dorado envejecido: detalles */
  --color-gray:     #817B72;   /* gris cálido: texto secundario */
  --color-white:    #FFFEFB;

  /* --- Roles semánticos (tema claro por defecto) --- */
  --bg: var(--color-ivory);
  --fg: #1E1C19;
  --fg-soft: #45403A;
  --fg-muted: var(--color-gray);
  --accent: var(--color-wine);
  --accent-soft: var(--color-gold);
  --accent-green: var(--color-green);
  --line: rgba(25, 24, 22, 0.13);
  --line-strong: rgba(25, 24, 22, 0.30);

  /* Roles sobre fondo oscuro (secciones .invert) */
  --dark-bg: var(--color-charcoal);
  --dark-fg: #EFEAE0;
  --dark-muted: #A89F92;
  --dark-line: rgba(245, 240, 231, 0.16);

  /* --- Tipografía --- */
  --font-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Escala fluida (clamp) */
  --fs-eyebrow: 0.75rem;
  --fs-h1:      clamp(2.1rem, 1.2rem + 3.6vw, 4.1rem);
  --fs-h2:      clamp(1.8rem, 1.3rem + 2.4vw, 3.2rem);
  --fs-h3:      clamp(1.25rem, 1.08rem + 0.9vw, 1.7rem);
  --fs-h4:      clamp(1.02rem, 0.96rem + 0.4vw, 1.2rem);
  --fs-lead:    clamp(1.06rem, 0.98rem + 0.45vw, 1.32rem);
  --fs-body:    clamp(1rem, 0.97rem + 0.15vw, 1.06rem);
  --fs-small:   0.9rem;
  --fs-tiny:    0.75rem;

  --lh-tight: 1.06;
  --lh-snug: 1.18;
  --lh-body: 1.7;

  --tracking-eyebrow: 0.22em;
  --tracking-label: 0.14em;

  /* --- Layout --- */
  --container: 1280px;
  --container-wide: 1560px;
  --container-narrow: 780px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(4.2rem, 8vw, 8.5rem);

  /* --- Formas y movimiento --- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-pill: 100px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.5s;
  --dur-fast: 0.28s;

  --header-h: 84px;
  --shadow-soft: 0 22px 60px -30px rgba(25, 24, 22, 0.35);
}

@media (max-width: 640px) {
  :root { --header-h: 64px; }
}