$bg: #151515;
$bg-alt: #151515bb;

$fg: #e8e3e3;
$fg-alt: #151515;

$red: #b66467;
$orange: #d8a657;
$yellow: #d9bc8c;
$green: #8c977d;
$blue: #8da3b9;
$purple: #a988b0;

$black: #121212;
$white: #e8e3e3;

$page-accent: $green;
$warning: $red;
$alert: $orange;
$success: $green;
$neutral: $black;

$shadow: 6px 6px 10px #15151566;
$rad: 0.4rem;
$border-thickness: 0.2rem;

$border: $page-accent $border-thickness solid;

$weight-bold: 621;
$weight-normal: 400;

$font-header: "Lexend Deca", sans-serif;
$font-body: "Secular One", sans-serif;
$font-code: "JetBrains Mono", monospace;

// Fallback for items that do not yet support the new sass stylesheet system
:root {
  --bg: #{$bg-alt};
  --bg-1: #242621;
  --bg-2: #1d1e1c;
  --bg-3: #{$bg};

  --fg: #{$fg};
  --fg-dark: #{$fg-alt};

  --red: #{$red};
  --orange: #{$orange};
  --yellow: #{$yellow};
  --green: #{$green};
  --blue: #{$blue};
  --purple: #{$purple};

  --black: #{$black};
  --white: #{$white};

  --accent: #{$page-accent};
  --warning: #{$warning};
  --alert: #{$alert};
  --success: #{$success};
  --neutral: #{$neutral};

  --shadow: #{$shadow};
  --rad: #{$rad};
  --border: #{$border};
}