:root {
  --primary: #7289da;
  --secondary: #99aab5;
  --tertiary: #43b582;

  --heading: white;
  --font: #99aab5;
  --normal: #dcddde;
  --muted: #72767d;
  --link: hsl(197, calc(var(--saturation-factor, 1) * 100%), 47.8%);
  --channel: #8e9297;

  --saturation-factor: 1;
  --success: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);
  --danger: hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%);
  --warning: hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%);

  --bg-primary: #36393f;
  --bg-secondary: #2f3136;
  --bg-secondary-alt: #292b2f;
  --bg-tertiary: #202225;
  --bg-textarea: #40444b;
  --bg-modifier-accent: hsla(0, 0%, 100%, 0.06);
  --bg-modifier-selected: rgba(79, 84, 92, 0.32);
  --bg-floating: #18191c;

  --elevation: 0 1px 0 rgba(4, 4, 5, 0.2), 0 1.5px 0 rgba(6, 6, 7, 0.05),
    0 2px 0 rgba(4, 4, 5, 0.05);

  --font-primary: Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --light: #fdf0ed;
  --dark: #16161c;
}

* {
  font-family: var(--font-primary);
}

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

body {
  color: var(--font);
  background-color: var(--bg-tertiary);
}

textarea {
  background-color: var(--bg-textarea);
}

:not(nav a)[href] {
  color: var(--link);
}

nav a {
  color: var(--channel);
}

nav a.active {
  background-color: var(--bg-modifier-selected);
  color: var(--heading);
}