:root {
  /* sizes */
  --navbar-height: 64px;
  --navbar-margin-bottom: 44px;
  --footer-height: 56px;
  --footer-margin-top: 96px;
  --tabs-height: 65px;
  --tabs-margin-bottom: 24px;

  /* z-indexes */
  --z-index-navbar: 1000;

  /* fonts */
  --font-family: system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-monospace: 'Inconsolata', 'Consolas', 'Droid Sans Mono', 'Monaco',
    'Courier New', monospace;

  /* colors */
  --neon-blue: #00d3ff;
  --summer-red: #ff2d55;
  --void: #16141a;
  --luisxvi-violet: #a524b3;
  --idontfeelthatwell: #f3f2f5;
  --shadows: #242129;
  --night-time: #691fa9;
  --bluish-steel: #676370;
  --innocence: #ffffff;
  --candy-purple: #c640cd;
  --sunish: #ffbc5b;
  --millenial-orange: #fc9965;
  --oj-not-simpson: #ff7439;
  --dark: #18141a;

  /* raw colors */
  --neon-blue-raw: 0, 211, 255;
  --summer-red-raw: 255, 45, 85;
  --void-raw: 22, 20, 26;
  --luisxvi-violet-raw: 165, 36, 179;
  --idontfeelthatwell-raw: 243, 242, 245;
  --shadows-raw: 36, 33, 41;
  --night-time-raw: 105, 31, 169;
  --bluish-steel-raw: 103, 99, 112;
  --innocence-raw: 255, 255, 255;
  --candy-purple-raw: 198, 64, 205;
  --sunish-raw: 255, 188, 91;
  --millenial-orange-raw: 252, 153, 101;
  --oj-not-simpson-raw: 255, 116, 57;
  --dark-raw: 24, 20, 26;
}

body {
  font-family: var(--font-family);
  background: var(--background);
  color: var(--text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family);
  color: var(--text);
}

p {
  color: var(--text);
}

a {
  color: var(--primary);
  font-weight: 500;
}
a:hover {
  color: var(--primary);
}

.text {
  color: var(--text);
}

.secondary-text {
  color: var(--secondary-text);
}

.danger-text {
  color: var(--danger);
}

.error-text {
  color: var(--error);
}

@media (max-width: 768px) {
  :root {
    --navbar-height: 56px;
    --footer-margin-top: 48px;
  }
}