/* ============================================================
   variables.css — Design tokens (Institucional: navy + oro)
   Los colores de marca se pueden sobrescribir desde
   data/config.json / js/config.js sin tocar el HTML.
   ============================================================ */

:root {
  /* ----- Marca (editables desde config) ----- */
  --gold: #b08d57;          /* primaryColor  (acento oro) */
  --ink: #14213d;           /* secondaryColor (azul marino: títulos y bandas oscuras) */
  --bg: #ffffff;            /* backgroundColor */

  /* ----- Derivados ----- */
  --gold-deep: #977640;
  --gold-soft: #c9a86e;
  --gold-tint: rgba(176, 141, 87, 0.10);
  --ink-2: #1b2c4f;         /* navy un poco más claro */
  --ink-soft: #4a5570;
  --ink-mute: #8a93a8;
  --on-dark: #e7ebf3;       /* texto claro sobre navy */
  --on-dark-mute: #aeb6c8;
  --line: rgba(20, 33, 61, 0.10);
  --line-strong: rgba(20, 33, 61, 0.16);
  --line-dark: rgba(255, 255, 255, 0.14);

  /* ----- Superficies ----- */
  --surface: #ffffff;
  --band: #f7f5f0;          /* bandas alternas (crema) */

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

  --fs-hero: clamp(2.6rem, 1.5rem + 4.4vw, 4.4rem);
  --fs-h2: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  --fs-lead: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  --fs-eyebrow: 0.72rem;
  --fs-small: 0.85rem;

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

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

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

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