/* Design System Variables */
:root {
  /* Colors */
  --color-primary: #063773;
  --color-hover: #f5f3de;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-dark: #626262;
  --color-gray-medium: #bdbdbd;
  --color-gray-light: #ebebeb;
  --color-background-light: #f5f5f5;
  --color-background-purple: #f0e6f5;
  --color-background-header: #eaeaea;
  
  /* Typography */
  --font-family: 'Geist', sans-serif;
  --font-family-mono: 'Geist Mono', monospace;
  --font-size-small: 0.75rem;   /* 12px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-medium: 1.125rem; /* 18px */
  --font-size-large: 2rem;     /* 32px */
  --font-size-headline: 4rem;  /* 64px */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  
  --line-height-normal: 1.5;
  --line-height-tight: 1.2;
  --line-height-single: 1;
  
  /* Spacing */
  --spacing-xs: 2px;
  --spacing-sm: 4px;
  --spacing-md: 8px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 40px;
  --spacing-4xl: 128px;
  --spacing-5xl: 160px;
  --spacing-6xl: 200px;
  --spacing-7xl: 256px;
  
  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 25px;
  
  /* Layout */
  --max-width: 1920px;
  /* --container-padding: 24px;
  --container-padding-large: 56px; */
  --container-padding-mobile: 16px;
  --container-padding-small: 16px;
  --container-padding-medium: 32px;
  --container-padding: 64px;
  --container-padding-large: 80px;
  
  /* Breakpoints (defined in media queries) */
  /* Mobile: 320px - 767px */
  /* Tablet: 768px - 1023px */
  /* Desktop: 1024px - 1439px */
  /* Large Desktop: 1440px+ */
}