/* ============================================================================
   Design tokens — 3-Point Fluid Model (SCALING.md v3.3)

   Baseline frame for this project is 1440px: every token below renders its
   exact design value at 1440px, interpolates linearly up to 2560px (2K), and
   locks to the 1440px value below that.

     min  = design_px / 16          rem   (value at 1440px, the design floor)
     vw   = design_px / 14.4        vw    (linear term through the origin)
     max  = design_px * 1.7778 / 16 rem  = design_px / 9 rem (value at 2560px)

   The trailing comment on each token records the design_px it was derived from.
   Unscaled by rule: 1px hairlines, box-shadow, 999px pill radii, unitless
   line-heights, and em-based letter-spacing.
   ========================================================================= */

:root {
  --font-serif: "Lora", Georgia, serif;
  --font-sans: "Switzer", ui-sans-serif, system-ui, sans-serif;
  --font-ui: "Inter", ui-sans-serif, system-ui, sans-serif;
  --color-bg: #f8f6f2;
  --color-surface: #f5f2ea;
  --color-ink: #2d2d2a;
  --color-muted: #5c5852;
  --color-soft: #6f6863; /* 4.9:1 on --color-surface, 5.0:1 on --color-bg */
  --color-accent: #4b5e50;
  --color-accent-dark: #3d4d41;
  --color-brand: #245b62; /* logo teal; footer surface */
  --color-gold: #c5a059;
  --color-gold-dark: #b38f48;
  --color-line: #e7e3d4;
  --color-error: #e11d48;
  --color-success: #2f7a4f;
  --color-whatsapp: #25d366;

  /* ---- Spacing ---- */
  --space-1: clamp(0.1875rem, 0.2083vw, 0.3333rem);   /* 3px */
  --space-2: clamp(0.375rem, 0.4167vw, 0.6667rem);    /* 6px */
  --space-3: clamp(0.5625rem, 0.625vw, 1rem);         /* 9px */
  --space-4: clamp(0.75rem, 0.8333vw, 1.3333rem);     /* 12px */
  --space-5: clamp(0.9375rem, 1.0417vw, 1.6667rem);   /* 15px */
  --space-6: clamp(1.125rem, 1.25vw, 2rem);           /* 18px */
  --space-8: clamp(1.5rem, 1.6667vw, 2.6667rem);      /* 24px */
  --space-10: clamp(1.875rem, 2.0833vw, 3.3333rem);   /* 30px */
  --space-12: clamp(2.25rem, 2.5vw, 4rem);            /* 36px */
  --space-16: clamp(3rem, 3.3333vw, 5.3333rem);       /* 48px */
  --space-20: clamp(3.75rem, 4.1667vw, 6.6667rem);    /* 60px */
  --space-24: clamp(5.625rem, 6.25vw, 10rem);         /* 90px */

  /* ---- Radii (pill/circle stay symbolic, see base rules) ---- */
  --radius-sm: clamp(0.46875rem, 0.5208vw, 0.8333rem); /* 7.5px */
  --radius-md: clamp(0.75rem, 0.8333vw, 1.3333rem);    /* 12px */
  --radius-lg: clamp(1.125rem, 1.25vw, 2rem);          /* 18px */

  /* ---- Layout ---- */
  --layout-max: 160rem;                                       /* 2560px ultrawide cap */
  --layout-content-max: clamp(75rem, 83.3333vw, 133.3333rem); /* 1200px */
  /* Content shell must widen with the frame, otherwise 2K displays get a
     1200px column stranded in ~680px of dead space on either side. */
  --content-width: clamp(75rem, 83.3333vw, 133.3333rem);      /* 1200px */
  /* Single horizontal gutter token so every full-width section aligns.
     Overridden per breakpoint below. */
  --gutter: var(--space-8);

  /* ---- Motion ----
     Shared curves so every transition on the site retargets the same way.
     UI durations (hover colour, menus, buttons) stay inline per rule; the
     page-level motion every page shares is set once here (design.md 3.8). */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-reveal: 900ms;   /* scroll reveal: fade + 24px rise */
  --stagger: 80ms;       /* between items revealed in the same batch */
  --dur-zoom: 500ms;     /* photo hover zoom, in and out */
  --zoom-scale: 1.04;
  --dur-page: 300ms;     /* cross-page fade (view transition) */
  --parallax-shift: 8%;  /* scroll drift of editorial photos, each way */

  /* ---- Type scale ----
     Design px at 1440 -> same 3-point formula. Sub-1440 sizes are restored by
     the <=1439px block below so phones/tablets keep their tuned scale. */
  --text-caption: clamp(0.75rem, 0.8333vw, 1.3333rem);     /* 12px */
  --text-label: clamp(0.8125rem, 0.9028vw, 1.4444rem);     /* 13px */
  --text-body-sm: clamp(0.9375rem, 1.0417vw, 1.6667rem);   /* 15px */
  --text-body: clamp(1rem, 1.1111vw, 1.7778rem);           /* 16px */
  --text-body-lg: clamp(1.1875rem, 1.3194vw, 2.1111rem);   /* 19px */
  --text-h4: clamp(1.5rem, 1.6667vw, 2.6667rem);           /* 24px */
  --text-h3: clamp(2.25rem, 2.5vw, 4rem);                  /* 36px */
  --text-h2: clamp(3.25rem, 3.6111vw, 5.7778rem);          /* 52px */
  --text-h1: clamp(5.5rem, 6.1111vw, 9.7778rem);           /* 88px */

  --line-tight: 1.15;
  --line-snug: 1.4;
  --line-body: 1.6;
  --line-loose: 1.8;

  --tracking-caps: 0.06em;

  /* ---- Icons ---- */
  --icon-sm: clamp(0.875rem, 0.9722vw, 1.5556rem);  /* 14px */
  --icon-md: clamp(1.125rem, 1.25vw, 2rem);         /* 18px */
  --icon-lg: clamp(1.25rem, 1.3889vw, 2.2222rem);   /* 20px */

  /* ---- Controls ----
     Floors stay at the 44px / 40px hit-target minimum and grow from there. */
  --control-min: clamp(2.75rem, 3.0556vw, 4.8889rem);   /* 44px */
  --control-min-sm: clamp(2.5rem, 2.7778vw, 4.4444rem); /* 40px */
  --rule-thick: clamp(0.125rem, 0.1389vw, 0.2222rem);   /* 2px */
  --dot-sm: clamp(0.375rem, 0.4167vw, 0.6667rem);       /* 6px */
  --emblem-size: clamp(3rem, 3.3333vw, 5.3333rem);      /* 48px */

  /* ---- Measures (prose and panel caps) ---- */
  --measure-sm: clamp(36rem, 40vw, 64rem);              /* 576px */
  --measure-md: clamp(40rem, 44.4444vw, 71.1111rem);    /* 640px */
  --measure-lg: clamp(64rem, 71.1111vw, 113.7778rem);   /* 1024px */

  /* ---- Media block heights ---- */
  --media-h-sm: clamp(13.125rem, 14.5833vw, 23.3333rem); /* 210px  amenity card */
  --media-h-md: clamp(21.875rem, 24.3056vw, 38.8889rem); /* 350px  chapter, phone */
  --media-h-lg: clamp(31.25rem, 34.7222vw, 55.5556rem);  /* 500px  chapter, map */
  --frame-h-room: clamp(25rem, 27.7778vw, 44.4444rem);   /* 400px  room gallery */

  /* ---- Map POI markers ---- */
  --poi-size: clamp(1.875rem, 2.0833vw, 3.3333rem);      /* 30px */
  --poi-size-lg: clamp(2.25rem, 2.5vw, 4rem);            /* 36px */
  --poi-icon: clamp(1rem, 1.1111vw, 1.7778rem);          /* 16px */
  --poi-label-max: clamp(8.25rem, 9.1667vw, 14.6667rem); /* 132px */
  --poi-label-max-lg: clamp(8.125rem, 9.0278vw, 14.4444rem); /* 130px */
  --poi-label-gap: clamp(0.375rem, 0.4167vw, 0.6667rem); /* 6px */

  --color-card: #fff;
  --color-inverse: #fff;
  --color-focus: var(--color-ink);

  /* Gold dark enough for text on light surfaces (>= 4.5:1 on --color-bg and #fff).
     Bright --color-gold stays for rules, icons, and text on dark. */
  --color-gold-text: #8a6a1f;
}

/* Below the 1440px baseline the clamps above lock to their design floor, which
   is correct for spacing but too heavy for display type on narrow viewports.
   Restore the tuned sub-baseline type ramp (SCALING.md section 8). */
@media (max-width: 1439px) {
  :root {
    --text-body-lg: clamp(1rem, 0.9rem + 0.5vw, 1.1875rem);
    --text-h4: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
    --text-h3: clamp(1.375rem, 1.15rem + 1.1vw, 2.25rem);
    --text-h2: clamp(1.875rem, 1.5rem + 1.9vw, 3.25rem);
    --text-h1: clamp(2.5rem, 1.6rem + 4.5vw, 5.5rem);
  }
}

@media (max-width: 1024px) {
  :root {
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
  }
}

/* Phone: tighter gutter and shorter section rhythm so sections do not
   read as mostly empty space on a 375-430px viewport. */
@media (max-width: 767px) {
  :root {
    --gutter: 1.5rem;
    --space-16: 3rem;
    --space-20: 3.5rem;
    --space-24: 4.5rem;
    /* Media blocks drop to their phone heights; the desktop tokens above are
       floors, not phone values. */
    --media-h-sm: 11.25rem;  /* 180px */
    --media-h-md: 21.875rem; /* 350px */
    --media-h-lg: 23.75rem;  /* 380px */
  }
}

@media (max-width: 479px) {
  :root {
    --gutter: 1.25rem;
    --space-24: 4rem;
  }
}