@font-face {
  font-family: "Manrope Variable";
  src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk Variable";
  src: url("../fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  font-family: "Manrope Variable", sans-serif;
  color: #17211e;
  background: #f2f5f3;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --background: #f2f5f3;
  --surface: #e7ece9;
  --surface-raised: #f9fbfa;
  --text: #17211e;
  --muted: #52605b;
  --border: #cdd7d2;
  --accent: #59c9a5;
  --accent-strong: #1e6c55;
  --accent-ink: #10251e;
  --button-text: #f7fffc;
  --shadow: rgba(48, 74, 65, 0.14);
  --header: rgba(242, 245, 243, 0.84);
  --contact-bg: #17211e;
  --contact-text: #eef5f2;
  --container: 1440px;
  --gutter: 56px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #121816;
    --surface: #1a2421;
    --surface-raised: #202c28;
    --text: #e8efec;
    --muted: #a5b2ad;
    --border: #35433e;
    --accent: #67d0ae;
    --accent-strong: #73d8b7;
    --accent-ink: #10251e;
    --button-text: #10251e;
    --shadow: rgba(3, 12, 9, 0.34);
    --header: rgba(18, 24, 22, 0.86);
  }
}