/* ═══════════════════════════════════════════════════════════════
   VILLAGGIO · TOKENS
   Heredado del snapshot del cliente + canon DESIGN.md de la marca.
   No tocar sin actualizar también clients/mdp/brands/villaggio/02-studio/design/tokens.json
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* — Backgrounds — */
  --cal:        #F8F4ED;   /* fondo dominante 60% */
  --crema:      #F3EBDD;   /* fondo alternado + texto sobre oscuro */
  --crema-lum:  #F4D9B8;   /* highlights luminosos */

  /* — Neutros — */
  --arena:      #D4BFA0;   /* bordes 1px, divisores */
  --taupe:      #6B5B4F;   /* texto secundario */
  --texto:      #2A231F;   /* texto primario sobre cal/crema */
  --carbon:     #1C1816;   /* footer, fondos oscuros */
  --carbon-2:   #0F0D0B;   /* deep dark para loading */

  /* — Acento único — */
  --terracota:    #B8624A;   /* CTA, pin, números clave */
  --terracota-d:  #8C4731;   /* hover */
  --terracota-l:  #D9836C;   /* highlight */

  /* — Fonts (Helvetica everywhere · canon usuario 2026-05-25) — */
  --font-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans:  "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* — Spacing (compactado v3 · -30% · user feedback 2026-05-25) — */
  --pad-x:   clamp(20px, 5vw, 72px);
  --pad-xl:  clamp(36px, 7vw, 100px);
  --gap-y:   clamp(56px, 9vh, 110px);
  --gap-xl:  clamp(80px, 13vh, 150px);
  --max-w:   1440px;
  --max-narrow: 880px;

  /* — Type scale (fluid · refactored v5 · estilo The Agency / Serhant · refined) — */
  --t-2xs:   clamp(10px, 0.65vw, 11px);
  --t-xs:    clamp(11px, 0.78vw, 12px);
  --t-sm:    clamp(12px, 0.9vw, 14px);
  --t-base:  clamp(14px, 1vw, 16px);
  --t-lg:    clamp(15px, 1.15vw, 18px);
  --t-xl:    clamp(18px, 1.5vw, 22px);
  --t-2xl:   clamp(22px, 2.2vw, 32px);
  --t-3xl:   clamp(28px, 2.8vw, 42px);
  --t-4xl:   clamp(34px, 3.6vw, 56px);
  --t-5xl:   clamp(44px, 4.8vw, 72px);
  --t-6xl:   clamp(56px, 6vw, 96px);

  /* — Motion — */
  --ease-out:    cubic-bezier(0.22, 0.7, 0.2, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-snap:   cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast:      0.25s;
  --d-base:      0.5s;
  --d-slow:      1.1s;
  --d-cinema:    1.6s;

  /* — Layers — */
  --z-bg:       0;
  --z-content:  10;
  --z-nav:      50;
  --z-cursor:   90;
  --z-loading:  100;
  --z-modal:    200;

  /* — Borders — */
  --border-arena:   1px solid rgba(212, 191, 160, 0.6);
  --border-terra:   1px solid rgba(184, 98, 74, 0.4);
  --border-crema:   1px solid rgba(243, 235, 221, 0.18);

  /* — Glass — */
  --glass-cal:    rgba(248, 244, 237, 0.82);
  --glass-carbon: rgba(28, 24, 22, 0.65);
  --blur:         saturate(1.2) blur(18px);
}

/* dark sections override (e.g. contacto, hero scrim) */
[data-theme="dark"] {
  --bg-current:   var(--carbon);
  --text-current: var(--crema);
}

[data-theme="light"] {
  --bg-current:   var(--cal);
  --text-current: var(--texto);
}