:root {
  /* Supplied brand board: black, charcoal, champagne gold, warm beige. */
  --ufco-black: #000000;
  --ufco-ink: #1f1f1f;
  --ufco-gold: #d4af37;
  --ufco-beige: #f6e9d7;
  --ufco-paper: #fffaf2;
  --ufco-muted: #625b51;
  --ufco-on-dark: #f6e9d7;
  --ufco-border: #d6c6ad;
  --ufco-error: #942522;
  --ufco-font-display: 'UFCO Display', 'Playfair Display', Georgia, serif;
  --ufco-font-body: 'UFCO Sans', Montserrat, system-ui, sans-serif;
  --ufco-font-script: Allura, cursive;
  --ufco-text-xs: 0.8125rem;
  --ufco-text-sm: 0.9375rem;
  --ufco-text-base: 1rem;
  --ufco-text-lg: 1.25rem;
  --ufco-h1: clamp(3.25rem, 7vw, 5.5rem);
  --ufco-h2: clamp(2rem, 4vw, 3.25rem);
  --ufco-space-1: 0.25rem;
  --ufco-space-2: 0.5rem;
  --ufco-space-3: 0.75rem;
  --ufco-space-4: 1rem;
  --ufco-space-5: 1.5rem;
  --ufco-space-6: 2rem;
  --ufco-space-7: 3rem;
  --ufco-space-8: 4rem;
  --ufco-space-9: 6rem;
  --ufco-radius: 4px;
  --ufco-container: 1200px;
  --ufco-gutter: 20px;
  --ufco-tap: 44px;
  --ufco-header-top: 0px;
  --ufco-sticky-height: 112px;
  --ufco-shadow: 0 12px 36px rgb(0 0 0 / 8%);
}
/* 390px is the explicit mobile target. Base rules also work below 390px. */
@media (min-width: 390px) { :root { --ufco-gutter: 20px; } }
@media (min-width: 768px) { :root { --ufco-gutter: 32px; } }
@media (min-width: 1280px) { :root { --ufco-gutter: 40px; } }