:root {
  /* Brand Palette */
  --clr-brown: #8B5A3C;
  --clr-brown-dark: #6B3F28;
  --clr-brown-light: #A87B5A;
  --clr-cream: #F0EBE3;
  --clr-cream-dark: #E5DED4;
  --clr-white: #FAF7F2;
  --clr-coffee: #6F4E37;

  /* Typography scale (fluid) */
  --fs-hero: clamp(3.5rem, 8vw + 1rem, 8rem);
  --fs-h1: clamp(2.5rem, 5vw + 1rem, 5rem);
  --fs-h2: clamp(1.8rem, 3vw + 0.5rem, 3rem);
  --fs-h3: clamp(1.2rem, 1.5vw + 0.5rem, 1.6rem);
  --fs-body: clamp(0.95rem, 0.5vw + 0.85rem, 1.1rem);
  --fs-small: 0.85rem;
  --fs-label: 0.75rem;

  /* Font families */
  --ff-heading: 'Balsamiq Sans', 'Varela Round', sans-serif;
  --ff-display: 'Varela Round', sans-serif;
  --ff-body: 'Varela Round', sans-serif;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 2rem;
  --space-l: 4rem;
  --space-xl: 8rem;
  --space-section: clamp(5rem, 12vh, 10rem);

  /* Easing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Shadows */
  --shadow-card: 0 2px 16px rgba(139, 90, 60, 0.06);
  --radius-card: 20px;
  --radius-tile: 16px;

  /* Layout */
  --max-width: 1100px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
}