/* css/variables.css */
:root {
  /* Colors */
  --color-bg: #F7F3EE;
  --color-secondary: #E8DED3;
  --color-dark: #24211F;
  --color-text: #292522;
  --color-muted: #77706A;
  --color-accent: #B08A68;
  --color-accent-hover: #9E7957;
  --color-accent-light: #EBE0D5;
  --color-white: #FFFFFF;
  --color-overlay: rgba(36, 33, 31, 0.6);
  --color-overlay-dark: rgba(36, 33, 31, 0.85);
  
  /* Validation Colors */
  --color-error: #C94A47;
  --color-error-bg: #FDF3F3;
  --color-success: #4A8C6F;
  --color-success-bg: #F4F9F6;

  /* Typography */
  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'Manrope', sans-serif;

  /* Font Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Spacing */
  --spacing-xs: 0.5rem;   /* 8px */
  --spacing-sm: 1rem;     /* 16px */
  --spacing-md: 1.5rem;   /* 24px */
  --spacing-lg: 3rem;     /* 48px */
  --spacing-xl: 5rem;     /* 80px */
  --spacing-xxl: 8rem;    /* 128px */

  /* Structural Dimensions */
  --max-width-content: 1200px;
  --max-width-wide: 1400px;
  --header-height: 80px;
  --header-height-sticky: 70px;

  /* Borders & Shadows */
  --border-light: 1px solid rgba(176, 138, 104, 0.25);
  --border-medium: 1px solid rgba(176, 138, 104, 0.4);
  --border-dark: 1px solid var(--color-dark);
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --shadow-subtle: 0 4px 20px rgba(41, 37, 34, 0.05);
  --shadow-medium: 0 10px 30px rgba(41, 37, 34, 0.08);
  --shadow-lightbox: 0 20px 50px rgba(0, 0, 0, 0.3);

  /* Transitions */
  --transition-fast: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-slow: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}