: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;
  /* A card or panel on the page (the portal, proposals, supplier links). It was read by those pages but never
     defined here, so after hours their cards fell back to white under the night theme's light text (2026-10-10). */
  --color-surface:        #FFFFFF;
  --color-surface-muted:  #F6F4EF;
  --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;
  }
}