:root {
  /* Curated Harmonious Color Palette (HSL Tailored) */
  --color-bg-raw: 40, 14%, 97%;          /* #f8f8f6 - Soft desert sand canvas */
  --color-fg-raw: 0, 0%, 17%;            /* #2b2b2b - Sophisticated soft charcoal */
  --color-primary-raw: 35, 24%, 70%;     /* #c5b6a0 - Warm desert clay / pale gold */
  --color-secondary-raw: 27, 32%, 32%;   /* #6c4f37 - Deep rich chocolate brown */
  --color-muted-raw: 36, 20%, 90%;       /* #ebe7e0 - Muted warm stone */
  --color-accent-raw: 36, 29%, 76%;      /* #d4c5b0 - Warm accent sand */
  --color-white-raw: 0, 0%, 100%;        /* Pure white */
  --color-overlay-raw: 0, 0%, 0%;        /* Black overlays */

  /* Ready-to-use CSS HSL color tokens */
  --bg: hsl(var(--color-bg-raw));
  --fg: hsl(var(--color-fg-raw));
  --primary: hsl(var(--color-primary-raw));
  --primary-light: hsla(var(--color-primary-raw), 0.15);
  --secondary: hsl(var(--color-secondary-raw));
  --muted: hsl(var(--color-muted-raw));
  --muted-light: hsla(var(--color-muted-raw), 0.5);
  --accent: hsl(var(--color-accent-raw));
  --white: hsl(var(--color-white-raw));
  --card-bg: hsl(var(--color-white-raw));
  --border: hsla(var(--color-muted-raw), 0.6);

  /* Fonts Stack */
  --font-headings: 'Playfair Display', serif;
  --font-body: 'Montserrat', sans-serif;

  /* Spacing system (8px/4px base grid) */
  --spacing-xxs: 0.25rem; /* 4px */
  --spacing-xs: 0.5rem;   /* 8px */
  --spacing-sm: 1rem;     /* 16px */
  --spacing-md: 1.5rem;   /* 24px */
  --spacing-lg: 2rem;     /* 32px */
  --spacing-xl: 3rem;     /* 48px */
  --spacing-xxl: 4rem;    /* 64px */

  /* Shadows (Luxury Smooth Depth) */
  --shadow-sm: 0 2px 8px rgba(108, 79, 55, 0.05);
  --shadow-md: 0 8px 24px rgba(108, 79, 55, 0.08);
  --shadow-lg: 0 16px 48px rgba(108, 79, 55, 0.12);
  --shadow-glass: 0 8px 32px 0 rgba(108, 79, 55, 0.04);

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Layout Widths */
  --max-width: 1280px;
  --header-height: 80px;
}