:root {
  --neutral-1000: #000000;
  --neutral-800: #16161e;
  --neutral-500: #252530;
  --neutral-400: #2c2c3a;
  --neutral-300: #414152;
  --neutral-100: #d5d5d7;
  --neutral-000: #f1f1f4;
  --fill: #cb5a5a;

  --border-radius-sm: 10px;
  --border-radius-md: 20px;
  --border-radius-lg: 30px;

  --spacing-sm: 10px;
  --spacing-md: 20px;
}

body {
  --background-dark: var(--neutral-000);
  --background: var(--neutral-000);
  --background-light: var(--neutral-400);
  --outline: var(--neutral-300);
  --text: var(--neutral-800);
  --text-light: black;

  color: var(--text);
  font-family: "Nunito Sans", sans-serif;
  background-color: var(--neutral-000);
}

.dark body {
  background-color: var(--neutral-800);
  --background-dark: var(--neutral-800);
  --background: var(--neutral-500);
  --background-light: var(--neutral-400);
  --background-gradient: linear-gradient(-30deg,
      var(--neutral-500) 0%,
      var(--neutral-400) 100%);
  --outline: var(--neutral-300);
  --text: var(--neutral-100);
  --text-light: white;
}

header {
  background-color: var(--background-dark);
}