:root
{
  // accent colors
  --color-primary: #f7f8f9;
  --color-primary-fg: #222;
  --color-secondary: #292b2c;
  --color-negative: #d82853; 

  // foreground/text color
  --color-fg: #fff;
  --color-fg-mid: #c1c5c9;
  --color-fg-light: #919294;

  --color-fg-reverse: #fff;
  --color-fg-reverse-mid: #c1c5c9;

  // background color shades
  --color-bg: #1c1e1f;
  --color-bg-mid: #292b2c;
  --color-bg-light: #242526;

  // line colors
  --color-line: #2f3233;
  --color-line-mid: #d7d8d9;

  // misc colors
  --color-shadow: rgba(0,0,0,0.3);
  --color-highlight: rgba(255,255,255, 0.05);


  // sizes

  --padding: 32px;
  --padding-s: 24px;
  --height-top: 74px;
  --radius: 5px;

  --font-size: 14px;
  --font-size-s: 12px;
  --font-size-l: 16px;
  --font-size-xl: 18px;
}


// font sizes

$font-size: 14px;
$font-size-s: 12px;