:root {
  /* Two main colours: espresso (monogram, appointment card) and bronze */
  --color-primary: #2E211B;
  --color-primary-soft: #4A3a31;
  --color-accent: #8C5F3C;
  --color-accent-light: #C9A27E;

  /* Base is pure white; beige and sand from the bronze hue for alternating sections */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F4EDE4;
  --color-bg-warm: #E8DBCB;
  --color-surface: #FFFFFF;

  --color-text: #2E211B;
  --color-text-soft: #66564B;
  --color-on-dark: #F6EFE6;
  --color-on-dark-soft: #CDBFB0;
  --color-line: rgba(46, 33, 27, 0.14);
  --color-line-dark: rgba(246, 239, 230, 0.2);

  /* Typography */
  --font-heading: "Urbanist", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Pinyon Script", cursive;

  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-h3: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-h2: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --fs-h1: clamp(2.6rem, 1.8rem + 4vw, 5.25rem);

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --space-2xl: 112px;
  --gutter: 28px;
  --container: 1240px;
  --container-narrow: 820px;

  /* Shape: one radius everywhere, pill only for buttons and tabs */
  --radius: 6px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(46, 33, 27, 0.06);
  --shadow-md: 0 18px 40px -22px rgba(46, 33, 27, 0.45);
  --transition: 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  --header-h: 72px;
}

@media (min-width: 768px) {
  :root { --gutter: 40px; --header-h: 84px; }
}