$font-main:         'Open Sans', sans-serif;
$font-secondary:    'Teko', sans-serif;
$font-special:      'Josefin Sans', sans-serif;
$font-mono:         'Share Tech Mono', monospace;

$color-primary:     aliceblue;
$color-secondary:   skyblue;
$color-tertiary:    #2cdd88;
$color-bg:          #222;
$color-fg:          ivory;
$color-dark:        gray;
$color-link:        deeppink;
$color-theme:       #ffc100;

$content-width:     600px;

:root {
  --specialFont:    #{$font-special};
  --mainFont:       #{$font-main};
  --secondaryFont:  #{$font-secondary};
  --monoFont:       #{$font-mono};

  --bgColor:        #{$color-bg};
  --fgColor:        #{$color-fg};
  --primaryColor:   #{$color-primary};
  --secondaryColor: #{$color-secondary};
  --tertiaryColor:  #{$color-tertiary};
  --linkColor:      #{$color-link};
  --darkColor:      #{$color-dark};
  --themeColor:     #{$color-theme};

  --contentWidth:   #{$content-width};
}

@import
  "custom-variables",
  "default";