@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Poppins:wght@600;700&display=swap');

:root {
  /* Brand Colors */
  --color-primary: #0e2e57;        /* Dark Blue */
  --color-secondary: #22b499;      /* Turquoise */
  --color-bg-light: #f4f7fa;       /* Light background */
  --color-text-dark: #1a202c;      /* Body text */
  --color-white: #ffffff;
  --color-cta-hover: #1a9e87;      /* Darker turquoise for hover states */
  --color-accent-light: #e8f8f5;   /* Very light turquoise for section backgrounds */

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

  /* Spacing & Layout */
  --container-width: 1200px;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;
  --spacing-xxl: 6rem;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

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