/**
 *  variables
 *
 *
 *
 *  @author Björn Hase, Tentakelfabrik
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://github.com/tentakelfabrik/plain-ui-css
 *
 */


/**
 *  breakpoints
 *
 */

$breakpoint__xs : 576px !default;
$breakpoint__sm : 768px !default;
$breakpoint__md : 992px !default;
$breakpoint__lg : 1200px !default;
$breakpoint__xlg: 1600px !default;


/**
 *  fonts
 *
 */

$direction: ltr !default;

$font-family: 'IBM Plex Mono', sans-serif !default;
$font-weight: normal !default;

$font-size: 0.9rem !default;
$font-size-breakpoints: (
    $breakpoint__md: 1rem
) !default;

$font-sizes: (
    'default': $font-size,
    'small'  : $font-size * 0.75,
    'medium' : $font-size * 1.5,
    'large'  : $font-size * 2,
    'big'    : $font-size * 3
) !default;

$line-height: 1.618;
$line-height__breakpoints: (
    $breakpoint__md: 1.8
) !default;


/**
 *  colors
 *
 *
 */

$color__white: #ffffff !default;
$color__black: #212121 !default;

$color__primary: #3e3e3e !default;
$color__primary-contrast: $color__primary !default;

$color__active: lighten($color__primary, 20%) !default;
$color__active-contrast: #ffffff !default;

$color__background: $color__primary !default;
$color__background-contrast: #ffffff !default;
$color__background-alpha: rgba(0,0,0,.7) !default;

$color__body: #f9f9f9 !default;
$color__text: #363636 !default;
$color__text-contrast: #ffffff !default;

$color__border: $color__primary !default;
$color__border-contrast: #ffffff !default;

$color__success: #64ac64 !default;
$color__success-contrast: lighten($color__success, 20%) !default;
$color__warning: #f0ad4e !default;
$color__warning-contrast: lighten($color__warning, 20%) !default;
$color__danger: #d95959 !default;
$color__danger-contrast: lighten($color__danger, 20%) !default;
$color__info: #0090d4 !default;
$color__info-contrast: lighten($color__info, 20%) !default;

$color__link: $color__text !default;
$color__link-hover: $color__danger !default;

$colors: (
    '--body': $color__body,
    '--text': $color__text,
    '--text-contrast': $color__text-contrast,
    '--primary': $color__primary,
    '--primary-contrast': $color__primary-contrast,
    '--active': #{$color__active},
    '--active-contrast': $color__active-contrast,
    '--link': $color__link,
    '--link-hover': $color__link-hover,
    '--danger': $color__danger,
    '--danger-contrast': $color__danger-contrast,
    '--info': $color__info,
    '--info-constrast': $color__info-contrast,
    '--success': $color__success,
    '--success-contrast': $color__success-contrast,
    '--warning': $color__warning,
    '--warning-contrast': $color__warning-contrast,
    '--background': $color__background,
    '--background-contrast': $color__background-contrast,
    '--background-alpha': $color__background-alpha,
    '--border': $color__border,
    '--border-contrast': $color__border-contrast
) !default;


/**
 *  margin
 *
 */

$margin: 0 0 1rem !default;
$margin-breakpoints: (
    $breakpoint__md: 0 0 1.2rem
) !default;


/**
 *  padding
 *
 */

$padding: 0.6rem 0.8rem !default;
$padding-breakpoints: (
    $breakpoint__md: 0.7rem 1rem 0.9rem
) !default;


/**
 *  border
 *
 */

$border-radius: 2px !default;
$border: 1px solid var(--border) !default;