$bg-transparent: rgba(var(--bg-dim), 0.8)
$bg-dim: var(--bg-dim)
$bg-bright: var(--bg-bright)
$bg-100: var(--bg-100)
$bg-200: var(--bg-200)
$bg-300: var(--bg-300)
$bg-400: var(--bg-400)
$bg-500: var(--bg-500)
$bg-600: var(--bg-600)

$fg-dim: var(--fg-dim)
$fg-white: var(--fg-white)
$fg-black: var(--fg-black)

$black: var(--black)
$white: var(--white)
$red: var(--red)
$orange: var(--orange)
$yellow: var(--yellow)
$green: var(--green)
$blue: var(--blue)
$purple: var(--purple)

$primary: var(--primary)
$warning: var(--warning)
$critical: var(--critical)
$success: var(--success)
$info: var(--info)

$rad: var(--rad)
$rad-inner: var(--rad-inner)

$animation-smooth: var(--animation-smooth)
$animation-bounce: var(--animation-bounce)

$font: 'Manrope', sans-serif
$breakpoint: 800px


\:root
    --bg-dim: 16, 16, 16
    --bg-bright: 232, 227, 227
    --bg-100: 21, 21, 21
    --bg-200: #{red(adjust-color(rgb(21, 21, 21), $lightness: 2%)), green(adjust-color(rgb(21, 21, 21), $lightness: 2%)), blue(adjust-color(rgb(21, 21, 21), $lightness: 2%))}
    --bg-300: #{red(adjust-color(rgb(21, 21, 21), $lightness: 4%)), green(adjust-color(rgb(21, 21, 21), $lightness: 4%)), blue(adjust-color(rgb(21, 21, 21), $lightness: 4%))}
    --bg-400: #{red(adjust-color(rgb(21, 21, 21), $lightness: 6%)), green(adjust-color(rgb(21, 21, 21), $lightness: 6%)), blue(adjust-color(rgb(21, 21, 21), $lightness: 6%))}
    --bg-500: #{red(adjust-color(rgb(21, 21, 21), $lightness: 8%)), green(adjust-color(rgb(21, 21, 21), $lightness: 8%)), blue(adjust-color(rgb(21, 21, 21), $lightness: 8%))}
    --bg-600: #{red(adjust-color(rgb(21, 21, 21), $lightness: 10%)), green(adjust-color(rgb(21, 21, 21), $lightness: 10%)), blue(adjust-color(rgb(21, 21, 21), $lightness: 10%))}

    --fg-dim: 102, 102, 102
    --fg-white: 232, 227, 227
    --fg-black: 16, 16, 16

    --black: 21, 21, 21
    --white: 232, 227, 227
    --red: 182, 100, 103
    --orange: 217, 140, 95
    --yellow: 217, 188, 140
    --green: 140, 151, 125
    --blue: 141, 163, 185
    --purple: 169, 136, 176

    --primary: var(--green)  // 183, 169, 151
    --warning: var(--orange)
    --critical: var(--red)
    --success: var(--green)
    --info: var(--blue)

    --rad: 6px
    --rad-inner: calc(var(--rad) / 2)

    --animation-smooth: cubic-bezier(0.76, 0, 0.17, 1)
    --animation-bounce: cubic-bezier(.68,-0.55,.27,1.55)

    --breakpoint: 800px

// I have no clue if its webassets or libsass thats doing this shit
// But one of them is trying to "correct" the path, and 404-ing the
// font, so enjoy this path fuckery
@font-face
    font-family: 'Manrope'
    src: url('../../../../static/fonts/Manrope[wght].woff2') format('woff2')
    font-style: normal
    font-display: swap
