/* ============================================================
   BUCHI AIRPORT SUITES — Design tokens
   Copiado del design system (claude.ai/design → "Buchi Airport Suites
   Design System"): tokens/fonts · colors · typography · spacing ·
   surface · motion.

   NO EDITAR A MANO. Si cambia el design system, se vuelve a copiar
   desde allí y la web entera se actualiza sola, porque todo lo demás
   consume estas variables.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Figtree:wght@300;400;500;600&display=swap");

:root{
  /* ---------- Tipografías ---------- */
  --font-display:"Cormorant Garamond","Cormorant","Times New Roman",Georgia,serif;
  --font-ui:"Figtree","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-numeric:"Cormorant Garamond",Georgia,serif;

  /* ---------- Verde: identidad (≈55% de la composición) ---------- */
  --green-900:#16261E;  /* Deep Forest */
  --green-800:#1B2E24;
  --green-700:#20372B;  /* Buchi Green — PRIMARIO */
  --green-600:#2A4534;
  --green-500:#33513F;  /* Botanical — hover sobre primario */
  --green-400:#4C6B57;
  --green-300:#6B7355;  /* Olive */
  --green-200:#9FB0A0;  /* Sage */
  --green-100:#C7D2C4;
  --green-050:#E7EDE5;  /* Mist */

  /* ---------- Oro: acento premium (≤8%, nunca fondo grande) ---------- */
  --gold-700:#8F7742;   /* Deep Brass — texto sobre marfil */
  --gold-600:#A5884F;
  --gold-500:#B79A63;   /* Brushed Gold — ACENTO PRINCIPAL */
  --gold-400:#C6B183;   /* Champagne — acentos sobre verde */
  --gold-300:#DCCBA4;
  --gold-100:#F0E6D2;

  /* ---------- Neutros cálidos: luz y equilibrio (≈37%) ---------- */
  --ivory:#FBF8F2;      /* fondo de página — sustituye al blanco puro */
  --warm-white:#F5F1E8;
  --cream:#EFE8DA;
  --sand:#E0D5C2;
  --stone-400:#C4B8A5;
  --stone-500:#9C9284;
  --stone-600:#6E675D;
  --charcoal:#2B2A26;   /* sustituye al negro puro */

  /* ---------- Alias semánticos ---------- */
  --brand-primary:var(--green-700);
  --brand-accent:var(--gold-500);

  --surface-page:var(--ivory);
  --surface-raised:#FFFDF8;
  --surface-sunken:var(--warm-white);
  --surface-card:var(--surface-raised);
  --surface-muted:var(--cream);
  --surface-dark:var(--green-700);
  --surface-dark-deep:var(--green-900);
  --surface-tint:var(--green-050);

  --text-primary:var(--green-900);
  --text-body:var(--charcoal);
  --text-muted:var(--stone-600);
  --text-faint:var(--stone-500);
  --text-accent:var(--gold-700);
  --text-on-dark:var(--ivory);
  --text-on-dark-muted:rgba(251,248,242,.68);
  --text-on-dark-accent:var(--gold-400);

  --line-hairline:rgba(43,42,38,.12);
  --line-soft:var(--sand);
  --line-gold:var(--gold-500);
  --line-gold-faint:rgba(183,154,99,.38);
  --line-on-dark:rgba(251,248,242,.16);

  --focus-ring:var(--gold-500);

  --status-success:#4C6B57;
  --status-warning:#B08A3E;
  --status-error:#9A4A3C;
  --status-info:#4A6472;

  /* ---------- Escala tipográfica ---------- */
  --fs-display-xl:5.75rem;
  --fs-display:4.5rem;
  --fs-h1:3.5rem;
  --fs-h2:2.5rem;
  --fs-h3:1.75rem;
  --fs-h4:1.3125rem;
  --fs-body-lg:1.1875rem;
  --fs-body:1rem;
  --fs-body-sm:.90625rem;
  --fs-caption:.78125rem;
  --fs-eyebrow:.75rem;
  --fs-button:.8125rem;

  --lh-display:1.02;
  --lh-heading:1.1;
  --lh-snug:1.28;
  --lh-body:1.7;
  --lh-tight-body:1.55;

  --ls-display:-.015em;
  --ls-heading:-.005em;
  --ls-body:0;
  --ls-caption:.02em;
  --ls-eyebrow:.24em;   /* mayúsculas espaciadas — la firma de la marca */
  --ls-button:.12em;
  --ls-wordmark:.34em;  /* B U C H I */

  --fw-light:300;
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;

  /* ---------- Espaciado y ritmo editorial ---------- */
  --sp-1:2px;   --sp-2:4px;   --sp-3:8px;   --sp-4:12px;
  --sp-5:16px;  --sp-6:24px;  --sp-7:32px;  --sp-8:48px;
  --sp-9:64px;  --sp-10:96px; --sp-11:128px; --sp-12:180px;

  --section-y:clamp(72px,9vw,140px);
  --gutter:24px;
  --page-margin:clamp(24px,6vw,96px);
  --measure:62ch;
  --measure-narrow:44ch;
  --container:1320px;
  --container-narrow:880px;

  --ratio-hero:16 / 9;
  --ratio-editorial:4 / 5;
  --ratio-square:1 / 1;
  --ratio-panorama:21 / 9;

  /* ---------- Superficies ---------- */
  --radius-none:0;
  --radius-xs:2px;
  --radius-sm:3px;
  --radius-md:4px;
  --radius-lg:6px;
  --radius-pill:999px;

  --border-hairline:1px solid var(--line-hairline);
  --border-soft:1px solid var(--line-soft);
  --border-gold:1px solid var(--line-gold);
  --border-gold-faint:1px solid var(--line-gold-faint);
  --border-on-dark:1px solid var(--line-on-dark);

  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(22,38,30,.05);
  --shadow-sm:0 2px 8px -4px rgba(22,38,30,.14);
  --shadow-md:0 10px 28px -18px rgba(22,38,30,.28);
  --shadow-lift:0 28px 60px -34px rgba(22,38,30,.36);

  --overlay-scrim:linear-gradient(to top,rgba(22,38,30,.72) 0%,rgba(22,38,30,.28) 42%,rgba(22,38,30,0) 78%);
  --overlay-veil:rgba(22,38,30,.42);
  --blur-panel:saturate(120%) blur(14px);

  /* ---------- Movimiento ---------- */
  --dur-fast:160ms;
  --dur-base:240ms;
  --dur-slow:420ms;
  --dur-reveal:700ms;

  --ease-brand:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.45,0,.15,1);
  --ease-exit:cubic-bezier(.4,0,1,1);

  --rise-distance:14px;
}

@media (prefers-reduced-motion:reduce){
  :root{
    --dur-fast:0ms;
    --dur-base:0ms;
    --dur-slow:0ms;
    --dur-reveal:0ms;
    --rise-distance:0px;
  }
}