/* Design System Variables - We Move Together */
/* Based on Phase 4 UX/UI Design Specification */

:root {
  /* Colors */
  --color-teal: #1F7063; /* Darkened from #2D9B87 for WCAG AA text contrast on all backgrounds */
  --color-teal-light: #3DBAA4;
  --color-teal-pale: #E8F5F2;
  --color-navy: #1A365D;
  --color-navy-light: #4A5568;
  --color-beige: #EBE1D5;
  
  --color-success: #48BB78;
  --color-warning: #F6AD55;
  --color-error: #E53E3E;
  
  --color-white: #FFFFFF;
  --color-gray-100: #F7FAFC;
  --color-gray-300: #E2E8F0;
  --color-gray-600: #596577; /* Darkened from #718096 for WCAG AA contrast (5.91:1 on white) */
  --color-black: #000000;
  
  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  --font-size-h1: 56px;
  --font-size-h2: 40px;
  --font-size-h3: 32px;
  --font-size-h4: 24px;
  --font-size-body-large: 20px;
  --font-size-body: 18px;
  --font-size-small: 16px;
  --font-size-tiny: 14px;
  
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.2;
  --line-height-snug: 1.3;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;
  
  /* Spacing (8px grid) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;
  --space-16: 128px;
  
  /* Component spacing */
  --section-padding-y: 96px;
  --section-padding-x: 24px;
  --card-padding: 24px;
  --card-gap: 24px;
  
  /* Border radius */
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 16px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-sticky: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-button: 0 2px 4px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --transition-fast: 200ms ease;
  --transition-base: 300ms ease;
  
  /* Layout */
  --container-max-width: 1200px;
  --content-max-width: 840px;
  --nav-height: 88px;
}

/* Mobile overrides */
@media (max-width: 809px) {
  :root {
    --font-size-h1: 40px;
    --font-size-h2: 32px;
    --font-size-h3: 24px;
    --font-size-h4: 20px;
    --font-size-body-large: 18px;
    --font-size-body: 16px;
    --font-size-small: 14px;
    --font-size-tiny: 12px;
    
    --section-padding-y: 64px;
    --section-padding-x: 16px;
    --card-gap: 16px;
    --nav-height: 72px;
  }
}