$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: #8C977D;
$warning: $red;
$alert: $orange;
$success: $green;
$neutral: $black;

$shadow: 6px 6px 2px #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;

// 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};
}