/* Design System Variables */
:root {
  /* Colors */
  --color-primary: #FFFFFF; /* White */
  --color-secondary: #F4F4F5; /* Light Gray */
  --color-accent: #0d8f85; /* Teal Green from Logo */
  --color-accent-hover: #11a499; /* Lighter Teal Green */
  --color-accent-blue: #083461; /* Navy Blue from Logo */
  --color-text-primary: #1A1A1A; /* Dark Charcoal */
  --color-text-secondary: #666666; /* Medium Gray */
  --color-white: #FFFFFF;
  --color-border: rgba(255, 255, 255, 0.1);

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

  /* Spacing (8px baseline) */
  --spacing-1: 8px;
  --spacing-2: 16px;
  --spacing-3: 24px;
  --spacing-4: 32px;
  --spacing-5: 48px;
  --spacing-6: 64px;
  --spacing-7: 96px;
  --spacing-8: 128px;

  /* Transitions */
  --transition-smooth: all 0.3s ease-in-out;
}