/**
 * Colors
 * dk - darker
 * lt - lighter
 */
$brand-primary: #399bff;
$brand-success: #4AD1A3;
$brand-warning: #FFD500;
$brand-danger : #F24A53;
$brand-blocked: #3d464d;
$brand-grey: #999;

$brand-base: #000;
$brand-base-sub: $brand-blocked;
// Percentage for use when darkening / lightening colors
// e.g., darken(brand-base, brand--dk)
// e.g., darken(brand-primary, brand--dk)
$brand__lt: 15%;
$brand__dk: 15%;
$brand-primary--lt: lighten($brand-primary, $brand__lt);
$brand-success--lt: lighten($brand-success, $brand__lt);
$brand-warning--lt: lighten($brand-warning, $brand__lt);
$brand-danger--lt : lighten($brand-danger, $brand__lt);
$brand-blocked--lt: lighten($brand-blocked, $brand__lt);
$brand-grey--lt: #f2f2f2;

// $body-bg
$text-color: #000;
$link-color: $brand-primary;
$link-decoration: underline;

/**
 * Typography
 */
$open-sans-weight-light: 300;
$open-sans-weight-normal: 400;
$open-sans-weight-semi: 600;
$open-sans-weight-bold: 700;
$open-sans-weight-extra: 800;
$font-family-base: "Open Sans", sans-serif;
$font-weight-base: $open-sans-weight-normal;

$montserrat-weight-normal: 400;
$montserrat-weight-bold: 700;
$headings-font-family: "Montserrat", sans-serif;
$headings-font-weight: $montserrat-weight-normal;
$headings-line-height: 1.1; // IDK y
$headings-color: $text-color;
$headings-small-color: $brand-grey; // IDK y

$font-size-base: 14px;
$font-size-large: ceil($font-size-base * 1.25); // ~18px
$font-size-small: ceil($font-size-base * 0.85); // ~12px
$font-size-h1: ceil($font-size-base * 2.6); // 36px
$font-size-h2: ceil($font-size-base * 2.15); // ~30px
$font-size-h3: ceil($font-size-base * 1.7); // ~24px
// $font-sizeh4: ceil($font-size-base * 1.25); // ~18px
$font-size-h4: $font-size-large;
$font-size-h5: $font-size-base;
$font-size-h6: $font-size-small;
// $font-size-h6: ceil($font-size-base * 0.85); // ~12px

$letter-spacing-base: 0.4;
$letter-spacing-large: 1;
$line-height-base: 1.428571429; // <: 20/14
$line-height-computed: floor($font-size-base * $line-height-base); // ~20
$border-radius-base: 3px;
$border-radius-rounded: 25px;
$border-radius-circle: 50%;

$height-base: 50px;
$height-base-lg: ($height-base * 2);
$height-base-sm: $height-base / 2;

$padding-base-vt: ($height-base - $line-height-computed) / 2;
$padding-base-hr: $padding-base-vt;

/**
 * Table
 */
$table-bg: transparent;
$table-border-color: #ddd;
$table-cell-padding: 8px;
//** Background color used for `.table-striped`.
$table-bg-accent: #f9f9f9;
//** Background color used for `.table-hover`
$table-bg-hover: #f5f5f5;

/**
 * Input
 */
$input-color: #444;
$input-padding: 6px;

/**
 * Transition settings
 */
$transition-base: 0.2s;
$transition-base-short: $transition-base / 1.5;
$transition-base-long: $transition-base * 2;

/**
 * Btn variables
 */
$btn-font-family: $headings-font-family;
$btn-padding-hr: $padding-base-hr;
$btn-padding-vt: $padding-base-vt / 2;

/**
 * Sidebar stuff
 */
$sidebar-width: 250px;
// sidebar-bg:: brand-base-sub
// sidebar-color:: brand-base-sub-overlay
// This is done this way so there are little
// complications for further changes ;)
$sidebar-color: rgba(255, 255, 255, 0.6);
$sidebar-bg: $brand-blocked;
$sidebar-icon-width: 20px;
$topbar-height: $height-base;
$topbar-bg: $brand-primary;