/* css/variables.css */
:root {
  /* Color System */
  --color-bg: #F5F1E8;
  --color-dark: #1E211C;
  --color-dark-2: #292D26;
  --color-accent: #B8894D;
  --color-accent-hover: #a1763f;
  --color-muted: #746F65;
  --color-white: #FFFFFF;
  --color-border-light: rgba(116, 111, 101, 0.15);
  --color-border-dark: rgba(245, 241, 232, 0.15);
  --color-overlay: rgba(30, 33, 28, 0.6);
  --color-error: #c0392b;
  --color-error-bg: rgba(192, 57, 43, 0.05);

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

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

  /* Spacing Scale */
  --spacing-xxs: 0.25rem;  /* 4px */
  --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 Details */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-light: 1px solid var(--color-border-light);
  --border-dark: 1px solid var(--color-border-dark);
  --shadow-sm: 0 2px 4px rgba(30, 33, 28, 0.04);
  --shadow-md: 0 10px 30px rgba(30, 33, 28, 0.06);
  --shadow-lg: 0 20px 50px rgba(30, 33, 28, 0.1);
  --shadow-lightbox: 0 25px 60px rgba(0, 0, 0, 0.5);

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

  /* Container Max Width */
  --container-max-width: 1300px;
}