@font-face {
  font-family: "Clash Display";
  src: url("../assets/fonts/Clash/ClashDisplay-Variable.ttf") format("truetype");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/Manrope/Manrope-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-background: #000000;
  --color-text: #ffffff;
  --color-text-soft: #eceef6;
  --color-text-muted: #a5a5a5;
  --color-surface: #121212;
  --color-surface-strong: #202020;
  --color-border: rgba(255, 255, 255, 0.22);
  --color-border-strong: rgba(255, 255, 255, 0.42);

  --font-display: "Clash Display", Arial, sans-serif;
  --font-body: "Manrope", Arial, sans-serif;

  --container-width: 1440px;
  --page-padding-desktop: 64px;
  --page-padding-tablet: 32px;
  --page-padding-mobile: 20px;

  --radius-small: 12px;
  --radius-medium: 24px;
  --radius-large: 40px;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 120px;
  --space-2xl: 180px;

  --header-height: 84px;
}