/* ============================================================
   variables.css — Design tokens
   Los colores de marca (--gold, --ink, --cream) se pueden
   sobrescribir automáticamente desde data/config.json / config.js
   sin tocar el HTML. Ver js/app.js -> applyTheme().
   ============================================================ */

:root {
  /* ----- Marca (editables desde config) ----- */
  --gold: #b4915a;          /* primaryColor   */
  --ink: #211c16;           /* secondaryColor */
  --cream: #faf7f1;         /* backgroundColor */

  /* ----- Derivados de la marca ----- */
  --gold-deep: #9c7a42;
  --gold-soft: #cbb48f;
  --gold-tint: rgba(180, 145, 90, 0.10);
  --ink-soft: #4a443b;
  --ink-mute: #8a8377;
  --line: rgba(33, 28, 22, 0.10);
  --line-strong: rgba(33, 28, 22, 0.16);

  /* ----- Superficies ----- */
  --surface: #ffffff;
  --surface-2: #f3eee4;     /* bandas alternas */
  --surface-3: #efe8db;

  /* ----- Tipografía ----- */
  --font-display: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* Escala tipográfica fluida */
  --fs-hero: clamp(2.9rem, 1.6rem + 5.4vw, 5.6rem);
  --fs-h2: clamp(2rem, 1.2rem + 2.6vw, 3.2rem);
  --fs-h3: clamp(1.25rem, 1rem + 0.9vw, 1.6rem);
  --fs-lead: clamp(1rem, 0.95rem + 0.3vw, 1.12rem);
  --fs-body: 1rem;
  --fs-eyebrow: 0.72rem;
  --fs-small: 0.82rem;

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

  /* ----- Layout ----- */
  --maxw: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --nav-h: 84px;
  --radius: 4px;
  --radius-lg: 10px;

  /* ----- Sombras ----- */
  --shadow-sm: 0 6px 20px rgba(33, 28, 22, 0.06);
  --shadow-md: 0 18px 45px rgba(33, 28, 22, 0.12);
  --shadow-lg: 0 30px 70px rgba(33, 28, 22, 0.18);

  /* ----- Movimiento ----- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.5s;
}