:root {
  --forest-green: #2C4A3C;
  --light-green: #E8F0EC;
  --medium-green: #A8C4B2;
  --dark-green: #1e3529;
  --cream: #FAF9F7;
  --text: #1C1B1A;
  
  /* Frame colors */
  --frame-white: #FFFFFF;
  --frame-black: #1C1B1A;
  --frame-light: #D4C4A8;
  --frame-medium: #A67C52;
  --frame-dark: #4A3728;
  
  /* Updated font settings - sans-serif only */
  --font-main: 'Outfit', sans-serif;  /* Main font for all headers and body */
  --dark-brown: #3B2A1F;  /* Much warmer, more obvious brown */
  
  /* Spacing Scale */
  --space-3xs: 0.25rem;  /* 4px */
  --space-2xs: 0.5rem;   /* 8px */
  --space-xs: 0.75rem;   /* 12px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 1.5rem;    /* 24px */
  --space-lg: 2rem;      /* 32px */
  --space-xl: 3rem;      /* 48px */
  --space-2xl: 4rem;     /* 64px */
  --space-3xl: 6rem;     /* 96px */
  --space-4xl: 8rem;     /* 128px */
  
  /* Section Spacing (Vertical) */
  --section-padding-y: var(--space-3xl);
  --section-padding-y-laptop: var(--space-sm);
  --section-padding-y-tablet: var(--space-sm);
  --section-padding-y-mobile: var(--space-sm);
  
  /* Container Spacing (Horizontal) */
  --container-padding-x: var(--space-lg);
  --container-padding-x-tablet: var(--space-md);
  --container-padding-x-mobile: var(--space-sm);
  
  /* Content Gaps */
  --gap-xs: var(--space-sm);
  --gap-sm: var(--space-md);
  --gap-md: var(--space-lg);
  --gap-lg: var(--space-xl);
  --gap-xl: var(--space-2xl);
  
  /* Hero Section Specific Spacing */
  --hero-video-margin-top: 10rem;
  --hero-video-margin-top-banner: 13rem;
  --hero-video-margin-top-laptop: 13rem;
  --hero-video-margin-top-laptop-banner: 13rem;
  --hero-video-margin-top-mobile: 6rem;
  --hero-video-margin-top-mobile-banner: 14rem;
  --hero-video-margin-top-small-banner: 13rem;
}