:root {
  /* === Colors === */
  --color-bg: #F6F3EE;
  --color-bg-alt: #EEE7DD;
  --color-text: #2B2A28;
  --color-text-secondary: #6F685F;
  --color-border: #D8D0C5;
  --color-accent: #5E6B57;
  --color-accent-terracotta: #8A5A44;
  --color-accent-bronze: #7A6652;
  --color-btn-bg: #2B2A28;
  --color-btn-text: #F6F3EE;
  --color-btn-hover: #5E6B57;
  --color-white: #F6F3EE;
  --color-dark: #2B2A28;

  /* === Typography === */
  --font-heading: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;

  /* Desktop sizes */
  --h1-size: clamp(2.125rem, 4vw, 4.5rem);
  --h2-size: clamp(1.625rem, 3vw, 3rem);
  --h3-size: clamp(1.25rem, 2vw, 1.875rem);
  --text-size: clamp(1rem, 1.1vw, 1.25rem);
  --text-sm: clamp(0.875rem, 0.9vw, 1rem);

  /* Line heights */
  --lh-heading: 1.1;
  --lh-text: 1.6;

  /* === Spacing === */
  --section-gap: clamp(3.5rem, 8vw, 10rem);
  --container-width: 1320px;
  --container-padding: clamp(1.25rem, 4vw, 3rem);
  --content-width: 900px;

  /* === UI === */
  --radius: 8px;
  --radius-lg: 12px;
  --header-height: 92px;
  --header-height-sticky: 72px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slower: 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}