/* ----------------------------------------
   CSS Variables
---------------------------------------- */
:root {
  /* Colors */
  --color-text: #25282a;
  --color-bg: #ffffff;
  --color-accent: #bc945c;
  
  /* Fonts */
  --font-body: 'canada-type-gibson', sans-serif;
  --font-heading: 'neue-haas-grotesk-display', sans-serif;
  
  /* Breakpoints */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
  
  /* Spacing */
  --space-xxs: 0.35rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
}