/* ================================================================
   DESIGN SYSTEM - VARIABLE MAPPING
   ================================================================
   
   Dit bestand mapt de design-system variabelen naar de bestaande
   CSS variabelen in styles.css. Importeer dit bestand NA 
   design-system.css maar VOOR styles.css.
   
   ================================================================ */

:root {
  /* ============================================================
     MAPPING: Design System → Bestaande Variabelen
     ============================================================ */
  
  /* Primary Colors */
  --brand-primary: var(--ds-brand-primary);
  --brand-primary-hover: var(--ds-brand-primary-hover);
  --brand-primary-dark: var(--ds-brand-primary-dark);
  --brand-primary-light: var(--ds-brand-primary-light);
  --brand-primary-lighter: var(--ds-brand-primary-lighter);
  --brand-gradient: var(--ds-brand-gradient);
  --brand-gradient-hover: var(--ds-brand-gradient-hover);
  
  /* Backgrounds */
  --bg-main: var(--ds-bg-main);
  --bg-card: var(--ds-bg-card);
  --bg-card-hover: var(--ds-bg-card-hover);
  --bg-surface: var(--ds-bg-surface);
  --bg-overlay: var(--ds-bg-overlay);
  --bg-hover: var(--ds-bg-hover);
  --bg-active: var(--ds-bg-active);
  --bg-elevated: var(--ds-bg-elevated);
  
  /* Text Colors */
  --text-primary: var(--ds-text-primary);
  --text-secondary: var(--ds-text-secondary);
  --text-tertiary: var(--ds-text-tertiary);
  --text-on-primary: var(--ds-text-on-primary);
  --text-dark: var(--ds-text-primary);
  
  /* Semantic Colors */
  --color-success: var(--ds-success);
  --color-success-light: var(--ds-success-light);
  --color-error: var(--ds-error);
  --color-error-light: var(--ds-error-light);
  --color-warning: var(--ds-warning);
  --color-warning-light: var(--ds-warning-light);
  --color-info: var(--ds-info);
  --color-info-light: var(--ds-info-light);
  --color-danger: var(--ds-error);
  
  /* Status Colors */
  --status-new: var(--ds-brand-primary);
  --status-contact: var(--ds-warning);
  --status-active: var(--ds-purple);
  --status-won: var(--ds-success);
  --status-lost: var(--ds-error);
  
  /* Borders */
  --border-color: var(--ds-border);
  --border-color-dark: var(--ds-border-dark);
  --border-light: var(--ds-border-light);
  
  /* Spacing */
  --space-xs: var(--ds-space-1);
  --space-sm: var(--ds-space-2);
  --space-md: var(--ds-space-4);
  --space-lg: var(--ds-space-6);
  --space-xl: var(--ds-space-8);
  --space-2xl: var(--ds-space-12);
  
  /* Border Radius */
  --radius-sm: var(--ds-radius-md);
  --radius-md: var(--ds-radius-lg);
  --radius-lg: var(--ds-radius-xl);
  --radius-xl: var(--ds-radius-2xl);
  --radius-2xl: var(--ds-radius-3xl);
  --radius-full: var(--ds-radius-full);
  
  /* Shadows */
  --shadow-xs: var(--ds-shadow-xs);
  --shadow-sm: var(--ds-shadow-sm);
  --shadow-md: var(--ds-shadow-md);
  --shadow-lg: var(--ds-shadow-lg);
  --shadow-xl: var(--ds-shadow-xl);
  --shadow-2xl: var(--ds-shadow-2xl);
  --shadow-blue: var(--ds-shadow-primary);
  --shadow-blue-sm: var(--ds-shadow-primary-sm);
  --shadow-inner: var(--ds-shadow-inner);
  
  /* Typography */
  --font-family: var(--ds-font-family);
  --font-family-mono: var(--ds-font-family-mono);
  --font-size-xs: var(--ds-font-size-xs);
  --font-size-sm: var(--ds-font-size-sm);
  --font-size-base: var(--ds-font-size-base);
  --font-size-lg: var(--ds-font-size-lg);
  --font-size-xl: var(--ds-font-size-xl);
  --font-size-2xl: var(--ds-font-size-2xl);
  --font-size-3xl: var(--ds-font-size-3xl);
  --font-size-4xl: var(--ds-font-size-5xl);
  
  /* Transitions */
  --transition-fast: var(--ds-transition-fast);
  --transition-base: var(--ds-transition-base);
  --transition-slow: var(--ds-transition-slow);
  --transition-bounce: var(--ds-transition-bounce);
  
  /* Z-index */
  --z-base: var(--ds-z-base);
  --z-dropdown: var(--ds-z-dropdown);
  --z-sticky: var(--ds-z-sticky);
  --z-fixed: var(--ds-z-fixed);
  --z-modal-backdrop: var(--ds-z-modal-backdrop);
  --z-modal: var(--ds-z-modal);
  --z-toast: var(--ds-z-toast);
  --z-tooltip: var(--ds-z-tooltip);
}