:root {
  /* Colors */
  /* Colors */
  --color-primary-dark: #1C74C4;
  /* Blue */
  --color-primary-light: #6CA43C;
  /* Green */
  --color-accent-green: #488CA4;
  /* Teal */
  --color-secondary-green: #708C58;
  /* Muted Green */
  --color-light-blue-bg: #9CB4E4;
  /* Light Blue */
  --color-pale-blue: #eef6fb;
  /* Very Pale Blue */
  --color-text-main: #333333;
  --color-text-light: #666666;
  --color-white: #ffffff;
  --color-light-grey: #f8f9fa;
  --color-dark-grey: #e9ecef;

  /* Typography */
  --font-family-heading: 'Montserrat', sans-serif;
  --font-family-body: 'Open Sans', sans-serif;

  /* Spacing */
  --spacing-xs: 0.5rem;
  /* 8px */
  --spacing-sm: 1rem;
  /* 16px */
  --spacing-md: 2rem;
  /* 32px */
  --spacing-lg: 4rem;
  /* 64px */
  --spacing-xl: 8rem;
  /* 128px */

  /* Layout */
  --container-width: 1200px;
  --header-height: 80px;

  /* Transitions */
  --transition-fast: 0.3s ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text-main: #f1f1f1;
    --color-text-light: #cccccc;
    --color-white: #121212;
    --color-light-grey: #1e1e1e;
    --color-pale-blue: #1a2733;
    /* Dark blue/grey for backgrounds */
    --color-light-blue-bg: #2c3e50;
    --color-dark-grey: #333333;

    /* Adjust primary colors for better contrast if needed */
    --color-primary-dark: #4fa3e0;
    /* Lighter blue */
  }
}