:root{
  /* ===================================
  COLORS --- semantic first
  ====================================*/
  --color-bg: #ffffff;
  --color-surface: #f9fafb;
  --color-text: #111827;
  --color-text-muted: #6b7280;

  --color-primary: #007bff;
  --color-primary-hover: #002bff;

  --color-secondary: #ff0add;
  --color-secondary-hover: #ca0789;  

  /*-----------------Fonts------------------*/
  --font-base-size: 14px;
  --font-base-lg: 16px;
  --font-primary: 'inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

}