/**
 * Design System Bridge - Compatibility Layer
 * 
 * Version: 1.0.0
 * Purpose: Smooth transition from old CSS variables to new design system
 * 
 * This file maps legacy CSS variables to new design system tokens.
 * Import AFTER design-tokens.css but BEFORE components.css
 * 
 * Once migration is complete, this file can be removed.
 */

:root {
  /* Legacy Color Variables → Design System Tokens */
  --color-teal: var(--color-secondary-teal);  /* #2D9B87 → #2AA198 */
  --color-teal-light: var(--color-secondary-teal);
  --color-teal-pale: rgba(42, 161, 152, 0.1);
  --color-navy: var(--color-primary-navy);  /* #1A365D → #1B2A4A */
  --color-navy-light: var(--color-text-secondary);
  --color-beige: var(--color-surface-grey);  /* #EBE1D5 → #F8FAFC */
  
  --color-success: var(--color-success);  /* Same */
  --color-warning: var(--color-warning);  /* Similar */
  --color-error: var(--color-error);  /* Similar */
  
  --color-white: var(--color-bg-white);
  --color-gray-100: var(--color-surface-grey);
  --color-gray-300: var(--color-border-grey);
  --color-gray-600: var(--color-text-secondary);
  --color-black: var(--color-text-primary);
  
  /* Legacy Spacing Variables → Design System Tokens */
  --space-1: var(--space-sm);   /* 8px */
  --space-2: var(--space-md);   /* 16px */
  --space-3: var(--space-lg);   /* 24px */
  --space-4: var(--space-xl);   /* 32px */
  --space-6: var(--space-2xl);  /* 48px */
  --space-8: var(--space-3xl);  /* 64px */
  --space-12: 96px;  /* No direct equivalent, keep as-is */
  --space-16: 128px; /* No direct equivalent, keep as-is */
  
  /* Legacy Component Spacing */
  --section-padding-y: var(--space-3xl);  /* 64px */
  --section-padding-x: var(--space-lg);   /* 24px */
  --card-padding: var(--card-padding-desktop);  /* 24px */
  --card-gap: var(--space-lg);  /* 24px */
  
  /* Legacy Border Radius → Design System Tokens */
  --radius-small: var(--radius-md);    /* 8px */
  --radius-medium: var(--radius-lg);   /* 12px */
  --radius-large: 16px;  /* No direct equivalent */
  --radius-full: var(--radius-full);   /* 999px */
  
  /* Legacy Shadows → Design System Tokens */
  --shadow-card: var(--shadow-subtle);
  --shadow-card-hover: var(--shadow-elevated);
  --shadow-sticky: var(--shadow-default);
  --shadow-button: var(--shadow-subtle);
  
  /* Legacy Transitions → Design System Tokens */
  --transition-fast: var(--transition-base);  /* 0.2s */
  --transition-base: var(--transition-slow);  /* 0.3s */
  
  /* Legacy Layout */
  --container-max-width: var(--page-max-width);  /* 1200px */
  --content-max-width: var(--content-max-width);  /* 680px → 840px (kept legacy) */
  --nav-height: 88px;  /* Custom value, no design system equivalent */
  
  /* Legacy Typography - Use Design System Values */
  --font-family: var(--font-primary);
  --font-weight-regular: var(--font-weight-regular);
  --font-weight-medium: var(--font-weight-semibold);  /* Map medium → semibold */
  --font-weight-bold: var(--font-weight-bold);
  --line-height-tight: var(--line-height-heading);
  --line-height-snug: var(--line-height-h2);
  --line-height-normal: var(--line-height-h3);
  --line-height-relaxed: var(--line-height-body);
  
  /* Legacy Font Sizes - DESKTOP (will be overridden for mobile) */
  --font-size-h1: var(--font-size-h1);  /* 36px desktop, 28px mobile */
  --font-size-h2: var(--font-size-h2);  /* 28px desktop, 22px mobile */
  --font-size-h3: var(--font-size-h3);  /* 22px desktop, 18px mobile */
  --font-size-h4: var(--font-size-h4);  /* 18px desktop, 16px mobile */
  --font-size-body-large: 20px;  /* Custom, no design system equivalent */
  --font-size-body: var(--font-size-body);  /* 16px desktop, 15px mobile */
  --font-size-small: var(--font-size-body-small);  /* 14px desktop, 13px mobile */
  --font-size-tiny: var(--font-size-caption);  /* 12px */
}

/* Mobile overrides for legacy variables */
@media (max-width: 809px) {
  :root {
    --section-padding-y: var(--space-2xl);  /* 48px mobile */
    --section-padding-x: var(--space-md);   /* 16px mobile */
    --card-padding: var(--card-padding-mobile);  /* 16px mobile */
    --card-gap: var(--space-md);  /* 16px mobile */
    --nav-height: 72px;  /* Custom mobile value */
  }
}

/**
 * MIGRATION NOTES:
 * 
 * Color Changes (Slight Adjustments):
 * - Teal: #2D9B87 → #2AA198 (slightly lighter, more vibrant)
 * - Navy: #1A365D → #1B2A4A (slightly lighter for better contrast)
 * - Beige: #EBE1D5 → #F8FAFC (much lighter, cleaner surface)
 * 
 * These changes improve accessibility (contrast ratios) and modernize the palette.
 * 
 * Typography Changes:
 * - Design system uses mobile-first responsive font sizes
 * - Font sizes now scale smoothly across breakpoints
 * - Line heights are standardized
 * 
 * Spacing Changes:
 * - All spacing now adheres to strict 8px grid
 * - Consistent spacing tokens across all pages
 * 
 * REMOVAL PLAN:
 * Once all pages are upgraded and tested, remove this bridge file and:
 * 1. Update all CSS files to use design system tokens directly
 * 2. Remove css/variables.css
 * 3. Update HTML to use design system component classes
 */