:root {
  /* Warm-luxury outdoor-living palette — logo is monochrome black/white,
     so color is built from natural material tones rather than extracted from the mark. */
  --color-bg: #F7F4EF;            /* Warm Limestone — page canvas */
  --color-surface: #EFEAE1;       /* Soft Sand — cards, alternating bands */
  --color-surface-alt: #FFFFFF;
  --color-primary: #3E2C23;       /* Charred Walnut — headers, buttons, footer */
  --color-primary-dark: #2A1D17;
  --color-secondary: #8B5E3C;     /* Deep Cedar — hover states, underlines, icon fills */
  --color-tertiary: #2F3E36;      /* Forest Slate — trust badges, category tags */
  --color-accent: #B08D57;        /* Brushed Brass — ratings, dividers, premium strokes */
  --color-text: #1C1512;          /* Near-Black Espresso — headings */
  --color-text-muted: #5C534B;    /* darkened from #6E645C to clear 4.5:1 on --color-bg */
  --color-border: rgba(28, 21, 18, 0.12);
  --color-white: #FFFFFF;
  --color-overlay: rgba(28, 21, 18, 0.55);

  /* Glass surfaces */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-dark: rgba(46, 33, 26, 0.55);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-blur: 16px;

  /* Shadows — layered ambient + contact */
  --shadow-sm: 0 1px 2px rgba(28, 21, 18, 0.06), 0 1px 1px rgba(28, 21, 18, 0.04);
  --shadow-md: 0 8px 24px rgba(28, 21, 18, 0.10), 0 2px 6px rgba(28, 21, 18, 0.08);
  --shadow-lg: 0 24px 48px rgba(28, 21, 18, 0.16), 0 6px 16px rgba(28, 21, 18, 0.10);
  --shadow-xl: 0 40px 80px rgba(28, 21, 18, 0.22), 0 12px 24px rgba(28, 21, 18, 0.12);

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-med: 400ms;
  --dur-slow: 700ms;

  /* Z-index scale */
  --z-sticky: 10;
  --z-header: 50;
  --z-dropdown: 300;
  --z-mobile-bar: 400;
  --z-modal: 999;
  --z-toast: 9999;

  /* Layout */
  --container-max: 1280px;
  --header-h: 88px;
  --topbar-h: 40px;
}