/* Design tokens reverse-engineered from Figma 843:6 (no Figma variables existed). */
:root {
  /* palette */
  --navy:        #253b5b;  /* page background */
  --navy-deep:   #1e3150;
  --red:         #d51616;  /* BOOK button / accents */
  --white:       #ffffff;
  --cream:       #f5ede0;
  --color-error: #c0392b;   /* form validation / error text + border */

  /* type families */
  --font-display: "Playfair Display", Georgia, serif;       /* substitute for Domaine Display Narrow */
  --font-sans:    "Be Vietnam Pro", system-ui, sans-serif;  /* nav + body */
  --font-ui:      "Inter", system-ui, sans-serif;           /* buttons */

  /* Pixel-perfect scaling. The Figma FRAME is 2000px wide, but the actual
     CONTENT column is only 1400px — centred in the frame with 300px of empty
     page-margin each side (see the design legend: "Large screen 1400px /
     Viewport 300–1700px", and "Desktop minimum 1024px / 488–1512px"). So we
     scale off the 1400px content width: --px is the CSS length of ONE design
     pixel, == 1px once the viewport reaches 1400 and shrinking proportionally
     below (so a 1024px viewport lands the content at ~1024px, matching the
     design's second breakpoint). Express every Figma value as
     calc(<figma_px> * var(--px)).
     Coordinates stay in the original 2000px frame space; absolute-positioned
     sections live in a 2000-wide frame (var(--frame)) centred so the 300px
     side margins overflow off-screen (body already clips overflow-x). */
  --content-w: 1400;                          /* design content column width */
  --frame-w:   2000;                          /* full Figma frame width */
  --max-w:     1140px;                         /* HARD cap: whole site is contained
                                                  in this centred column, no bigger */
  --px: calc(min(100vw, var(--max-w)) / 1400);
  --frame: calc(var(--frame-w) * var(--px));  /* full frame width on screen */
  /* px scale for FULL-BLEED sections (hero) whose background/image spans the
     whole viewport edge-to-edge. These scale with the viewport (NOT capped at
     --max-w), against the 2000 frame, capped at the design size on >2000 screens.
     1 design px == min(100vw,2000) / 2000. */
  --fpx: calc(min(100vw, 2000px) / var(--frame-w));
  --gutter: 0;                                /* content band is exact 1400, no inset */
}

/* ---- mobile scaling unit ---- */
@media (max-width: 600px) {
  :root { --gutter: 24px; --mpx: calc(min(100vw, 421px) / 421); }
}