@font-face {
  font-family: "PowerGrotesk";
  src:
    url("/assets/fonts/PowerGrotesk-Regular.woff2") format("woff2"),
    url("/assets/fonts/PowerGrotesk-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PowerGrotesk";
  src:
    url("/assets/fonts/PowerGrotesk-Bold.woff2") format("woff2"),
    url("/assets/fonts/PowerGrotesk-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "PowerGrotesk", sans-serif;
  --font-text: "Raleway", sans-serif;

  --brand-obsidian-black: hsl(0, 0%, 3%);
  --brand-creme-alabaster: hsl(45, 32%, 90%);
  --brand-warm-sand: hsl(34, 43%, 68%);

  --warm-sand-hover: hsl(34, 43%, 78%);

  --brand-status-error: hsl(354, 70%, 54%);
  --brand-status-success: hsl(145, 45%, 42%);
  --brand-status-warning: hsl(38, 90%, 40%);
  --brand-status-info: hsl(205, 65%, 52%);
}

@media (prefers-color-scheme: dark) {
  :root {
  }
}

html {
  color-scheme: light dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-text);
  font-size: 100%;
  color: var(--brand-creme-alabaster);
  background-color: var(--brand-obsidian-black);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  color: var(--brand-creme-alabaster);
}