@font-face {
  font-family: Outfit;
  src: url("assets/fonts/Outfit-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Feather;
  src: url("assets/fonts/Feather.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: Outfit;
  src: url("assets/fonts/Outfit-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: Outfit;
  src: url("assets/fonts/Outfit-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: Outfit;
  src: url("assets/fonts/Outfit-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

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

@font-face {
  font-family: Space Grotesk;
  src: url("assets/fonts/SpaceGrotesk-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Space Grotesk;
  src: url("assets/fonts/SpaceGrotesk-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light;
  --color-primary: #22a360;
  --color-primary-dark: #1a7a4a;
  --color-primary-dark-2: #0d4a2b;
  --color-primary-surface: #d6f0e4;
  --color-primary-surface-subtle: #edf7f1;
  --color-background: #141e1a;
  --color-surface: #1e2d27;
  --color-elevated: #2c3f38;
  --color-background-light: #f0f5f2;
  --color-canvas: #f7faf8;
  --color-surface-light: #ffffff;
  --color-surface-muted: #f0f5f2;
  --color-accent: #f47b20;
  --color-gold: #f9c300;
  --color-text: #ffffff;
  --color-text-primary: #14251d;
  --color-text-muted: #627a6e;
  --color-text-subtle: #91a49a;
  --color-separator: #e2ece6;
  --font-body: Outfit, sans-serif;
  --font-number: "Space Grotesk", sans-serif;
  --type-display: 800 38px/42px var(--font-body);
  --type-screen-title: 700 28px/34px var(--font-body);
  --type-section-title: 600 22px/28px var(--font-body);
  --type-card-title: 600 17px/22px var(--font-body);
  --type-body: 400 15px/22px var(--font-body);
  --type-body-small: 400 13px/18px var(--font-body);
  --type-label: 500 14px/18px var(--font-body);
  --type-caption: 400 12px/16px var(--font-body);
  --type-overline: 700 11px/15px var(--font-body);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-full: 999px;
  --page-width: 1200px;
}