:root {
  --clr-black: #000000;
  --clr-white: #ffffff;
  --clr-gray-50: #f5f5f5;
  --clr-gray-100: #efefef;
  --clr-gray-200: #e0e0e0;
  --clr-gray-300: #cccccc;
  --clr-gray-400: #b0b0b0;
  --clr-gray-500: #888888;
  --clr-gray-700: #4a4a4a;
  --clr-gray-800: #1a1a1a;

  --font-sans: 'Barlow', 'Helvetica Neue', Arial, sans-serif;

  --text-xs: 10px;
  --text-sm: 11px;
  --text-base: 13px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 30px;
  --text-3xl: 44px;
  --text-4xl: 64px;
  --text-5xl: 90px;

  --tracking-normal: 0.04em;
  --tracking-wide: 0.10em;
  --tracking-wider: 0.15em;
  --tracking-widest: 0.22em;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 128px;

  --max-width: 1200px;
  --nav-height: 52px;

  --ease: 150ms ease;
  --ease-slow: 280ms ease;
}