:root {
  /* ── Brand palette */
  --tempo-cream:      #F7F3EE;
  --tempo-cream-dark: #EDE7DE;
  --tempo-ink:        #1A1816; /* ← used for artwork interiors, NOT section backgrounds */
  --tempo-terracotta: #7c3b3b;
  --tempo-amber:      #DDAA62;
  --tempo-sage:       #6B7B5E;
  --tempo-sand:       #C8B89A;

  /* ── Semantic colour tokens */
  --color-bg:             var(--tempo-cream);
  --color-bg-alt:         #F0EBE3;
  --color-text-primary:   var(--tempo-ink);
  --color-text-secondary: rgba(26, 24, 22, 0.72);
  --color-text-muted:     rgba(26, 24, 22, 0.45);
  --color-text-inverse:   var(--tempo-cream);
  --color-accent:         var(--tempo-terracotta);
  --color-accent-hover:   #6a3232;
  --color-border:         rgba(26, 24, 22, 0.10);
  --color-border-strong:  rgba(26, 24, 22, 0.22);
  --color-border-accent:  rgba(123, 59, 59, 0.4);
  --color-nav-bg:         rgba(247, 243, 238, 0.92);
  /* Warm espresso — artwork canvas and frame interiors ONLY.
     Do NOT use as a section background; section contrast uses --color-bg-alt. */
  --color-section-dark:   #2D2924;
  /* Gallery-grade picture-frame border — used by .tempo-frame
     Warm sand: reads as natural wood against cream without the harshness of dark walnut */
  --tempo-frame-border:   var(--tempo-sand);

  /* ── Typography */
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-accent:  'Cormorant Garamond', serif;
  --font-body:    'Space Grotesk', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  --tracking-tight:   -0.025em;
  --tracking-normal:   0em;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.15em;

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* ── Spacing scale */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --space-section: clamp(4rem, 8vw, 8rem);
  --gutter:        clamp(1rem, 5vw, 3rem);

  /* ── Motion */
  --duration-fast:  180ms;
  --duration-base:  300ms;
  --duration-slow:  700ms;
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-expo:   cubic-bezier(0.4, 0, 1, 1);

  --content-width: 1280px;

  /* ── Form controls (BUG-142, 2026-09-07)
     ONE height for every input, select and textarea on the public site. The
     four public forms — enquiry, reservations, contact, RSVP — each had their
     own scale (144px / 48px / 48px / 43px), and two of them set a font under
     16px, which makes iOS Safari zoom the whole page the moment a field is
     focused.

     42px is the standard control height. Height comes from --control-h rather
     than from padding, so a control keeps the same height when its font,
     line-height or border changes — vertical padding stays deliberately small
     so nothing grows taller than the scale. A textarea overrides it, and says
     so where it does. */
  --control-h:       42px;
  --control-pad-y:   var(--space-2);
  --control-pad-x:   var(--space-4);
  --control-font:    var(--text-sm);
  --control-radius:  0;

  /* Vertical rhythm inside a form: label→control, and control→next field. */
  --field-gap:       var(--space-2);
  --form-gap:        var(--space-5);
}

/* Touch viewports: 44px is the minimum comfortable target, and a 16px font is
   the threshold below which iOS Safari zooms on focus. Overriding the tokens
   here means every form picks both up without its own media query. */
@media (max-width: 640px) {
  :root {
    --control-h:    44px;
    --control-font: 1rem;
  }
}