:root {
  /* Theme Colors - Can be overridden by theme.js */
  --primary-color: var(--theme-primary-color, #722f37);
  --secondary-color: var(--theme-secondary-color, #1d1d1f);
  --accent-color: var(--theme-accent-color, #b58a58);
  --background-color: var(--theme-background-color, #f6f1eb);
  --text-color: var(--theme-text-color, #1f1c1d);
  --text-light: var(--theme-text-light, #625953);
  --border-color: var(--theme-border-color, rgba(29, 29, 31, 0.12));
  --success-color: var(--theme-success-color, #28a745);
  --error-color: var(--theme-error-color, #dc3545);
  --warning-color: var(--theme-warning-color, #ffc107);
  
  /* Legacy colors (for backward compatibility) */
  --text-dark: var(--text-color);
  --bg-light: #fcfaf7;
  --bg-cream: #f1e8df;
  --accent-gold: var(--accent-color);
  --accent-wine: #5d2330;
  --accent-grape: #8a6070;
  --accent-plum: #241f24;
  --accent-purple: #9a7a5e;
  --surface-0: rgba(255, 255, 255, 0.44);
  --surface-1: rgba(255, 255, 255, 0.7);
  --surface-2: rgba(255, 251, 247, 0.9);
  --surface-3: #f7f0e8;
  --surface-dark: #151315;
  --border-strong: rgba(29, 29, 31, 0.18);
  --shadow-color: rgba(18, 15, 18, 0.16);
  --shadow-soft: 0 18px 40px rgba(18, 15, 18, 0.08);
  --shadow-medium: 0 28px 64px rgba(18, 15, 18, 0.12);
  --shadow-large: 0 40px 96px rgba(18, 15, 18, 0.16);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --glass-blur: 22px;
  
  /* Typography - Can be overridden by theme.js */
  --font-family: var(--theme-font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif);
  --font-size-base: var(--theme-font-size-base, 16px);
  --line-height: var(--theme-line-height, 1.6);
  --font-size-h1: var(--theme-font-size-h1, clamp(4rem, 8vw, 7rem));
  --font-size-h2: var(--theme-font-size-h2, clamp(2.6rem, 4.5vw, 4.25rem));
  --font-size-h3: var(--theme-font-size-h3, 1.75rem);
  
  /* Legacy fonts */
  --font-display: 'Playfair Display', serif;
  --font-serif: 'Cormorant Garamond', serif;
  --font-sans: var(--font-family);
  
  /* Layout - Can be overridden by theme.js */
  --container-width: var(--theme-container-width, 1280px);
  --border-radius: var(--theme-border-radius, 24px);
  --radius-pill: 999px;
  --radius-lg: 36px;
  --radius-md: 24px;
  --radius-sm: 16px;
  --box-shadow: var(--theme-box-shadow, 0 28px 64px rgba(18, 15, 18, 0.12));
  --transition-speed: var(--theme-transition-speed, 0.28s);
  --section-spacing: clamp(104px, 12vw, 168px);
  --container-padding: clamp(22px, 4vw, 48px);
  
  /* Legacy transitions and shadows */
  --transition: all var(--transition-speed) ease;
  --shadow-sm: 0 12px 28px rgba(18, 15, 18, 0.08);
  --shadow-lg: var(--shadow-medium);
  --shadow-xl: var(--shadow-large);
  --glow-wine: 0 22px 48px rgba(114, 47, 55, 0.14);
}