/* ==========================================================================
   tokens.css — design tokens (colours, type, spacing). Shared by every page.
   Change a value here and the whole site follows.

   Colour story: sampled from header_image.jpg (Orewa at sunrise) —
   deep water navy, morning-sky blue, horizon amber and a warm cream glow.
   Text/background pairings were checked for WCAG AA contrast (4.5:1 or better).
   ========================================================================== */

:root {
  /* --- Brand colours (from the header photo) --- */
  --color-ink:        #1b2638;   /* deep water navy — main text, dark sections   */
  --color-navy:       #26344d;   /* slightly lighter navy                        */
  --color-blue:       #3f6a94;   /* morning-sky blue — links, accents            */
  --color-blue-deep:  #2f5478;   /* hover / pressed blue                         */
  --color-sky:        #6a8dad;   /* soft sky — decorative only, not for text     */
  --color-sky-tint:   #e4edf5;   /* very light sky — alternate section bg        */
  --color-amber:      #f2b95a;   /* horizon glow — buttons, highlights           */
  --color-amber-deep: #8a5310;   /* amber safe for text on light backgrounds     */
  --color-cream:      #fbf5e6;   /* warm page background                         */
  --color-sand:       #c2b08f;   /* wet-sand neutral for borders                 */
  --color-white:      #ffffff;

  /* --- Semantic roles (use these in components, not the raw colours) --- */
  --bg-page:          var(--color-cream);
  --bg-alt:           var(--color-sky-tint);
  --bg-dark:          var(--color-ink);
  --bg-card:          var(--color-white);
  --text:             var(--color-ink);
  --text-muted:       #4a566b;   /* 6.9:1 on cream */
  --text-on-dark:     var(--color-cream);
  --link:             var(--color-blue-deep);
  --link-hover:       var(--color-ink);
  --accent:           var(--color-amber);
  --accent-text:      var(--color-amber-deep);
  --border:           #e3d8bd;
  --focus-ring:       #1b6fd1;

  /* --- Typography --- Georgia is Roger's preferred face (headings & quotes);
         body copy uses the reader's own system sans for easy reading. */
  --font-heading: Georgia, "Times New Roman", serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --text-sm:   0.9375rem;                          /* 15px */
  --text-base: 1.0625rem;                          /* 17px */
  --text-lg:   1.25rem;
  --text-xl:   clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --text-2xl:  clamp(1.85rem, 1.4rem + 2.2vw, 2.75rem);
  --text-hero: clamp(2.4rem, 1.5rem + 4.5vw, 4.25rem);

  --leading-tight: 1.15;
  --leading-body:  1.65;

  /* --- Spacing scale --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;

  /* --- Shape & depth --- */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(27, 38, 56, 0.10);
  --shadow:    0 8px 24px rgba(27, 38, 56, 0.12);

  /* --- Layout --- */
  --container:   1120px;
  --container-narrow: 760px;
  --gutter:      clamp(1rem, 4vw, 2rem);
  --header-h:    68px;
}