/* ==========================================================================
   tokens.css — the brand's colours, fonts and shared measurements.
   Change a value here and it changes on every page.
   Load order on every page: tokens → base → components → sections → (page file)
   ========================================================================== */
:root{
  /* Brand colours */
  --cream:#EEE7DE;        /* Cream — dominant base */
  --cream-deep:#E6DDD0;   /* slightly deeper cream, for quiet tinted sections */
  --atlantic:#2E4A56;     /* Deep Atlantic — primary accent, large blocks */
  --ochre:#B3864B;        /* Warm Ochre — selective warmth */
  --sienna:#A04E3B;       /* Burnt Sienna — selective warm accent */
  --olive:#5A6B56;        /* Olive Green — minimal use */
  --espresso:#3A2E26;     /* Espresso — text and dark neutral */

  /* Typography */
  --serif:"EB Garamond",Garamond,"Cormorant Garamond",Georgia,serif;   /* headlines */
  --sans:"Helvetica Neue",Helvetica,"Neue Haas Grotesk Text Pro",Arial,sans-serif;   /* body and interface */
  --lh-body:1.7;

  /* Layout */
  --gutter:20px;          /* side padding of the page */
  --max:1180px;           /* maximum content width */
  --section-y:76px;       /* vertical padding of a section (phone) */
  --section-y-lg:130px;   /* vertical padding of a section (900px and up) */
  --header-offset:90px;   /* keeps anchored sections clear of the sticky header */

  /* Shape */
  --radius-btn:1px;       /* buttons are deliberately almost square */
}

/* Breakpoints used across the CSS (media queries cannot read variables, so they
   are written out where needed):
     700px  — hero buttons sit side by side
     900px  — tablet/desktop layout: two-column sections, large logo
    1040px  — the horizontal menu replaces the "Menu" button */