:root {
  --color-primary: var(--color-text);
  --color-secondary: #64748b;
  --color-background: #ffffff;
  --color-text: #0f172a;
  --color-secondary-50: #f0f1f3;
  --color-secondary-100: #d8dce2;
  --color-secondary-200: #c1c7d1;
  --color-secondary-300: #aab3bf;
  --color-secondary-400: #939eae;
  --color-secondary-500: #7b899c;
  --color-secondary-600: #556376;
  --color-secondary-700: #465161;
  --color-secondary-800: #37404c;
  --color-secondary-900: #282e38;
  --font-family: Inter, sans-serif;
  --font-size-base: 16px;
  --space-0: 0px;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 24px;
  --space-8: 32px;

}
body {
  margin: 0;
  font-family: var(--font-family);
  background-color: var(--color-background, #ffffff);
  color: var(--color-text, #0f172a);
}
* {
  box-sizing: border-box;
}