:root {
    --baseFontFamily: 'Source Sans Pro', sans-serif, emoji;
    --monospaceFontFamily: 'Ubuntu Mono', monospace, emoji;
    --iconFontFamily: 'remixicon';

    --txtPrimaryColor:  #16161a;
    --txtHintColor:     #666f75;
    --txtDisabledColor: #a0a6ac;

    --primaryColor: #16161a;

    --bodyColor: #f8f9fa;

    --baseColor:     #ffffff;
    --baseAlt1Color: #e4e9ec;
    --baseAlt2Color: #d7dde4;
    --baseAlt3Color: #c6cdd7;
    --baseAlt4Color: #a5b0c0;

    --infoColor:       #5499e8;
    --infoAltColor:    #cee2f8;
    --successColor:    #32ad84;
    --successAltColor: #c4eedc;
    --dangerColor:     #e34562;
    --dangerAltColor:  #f7cad2;
    --warningColor:    #ff944d;
    --warningAltColor: #ffd4b8;

    --overlayColor:   rgba(53, 71, 104, 0.28);
    --tooltipColor:   rgba(0, 0, 0, 0.85);
    --shadowColor:    rgba(0, 0, 0, 0.06);

    --baseFontSize: 14.5px;
    --xsFontSize:   12px;
    --smFontSize:   13px;
    --lgFontSize:   15px;
    --xlFontSize:   16px;

    --baseLineHeight: 22px;
    --smLineHeight:   16px;
    --lgLineHeight:   24px;

    --inputHeight: 34px;

    --btnHeight:   40px;
    --xsBtnHeight: 22px;
    --smBtnHeight: 30px;
    --lgBtnHeight: 54px;

    --baseSpacing: 30px;
    --xsSpacing:   15px;
    --smSpacing:   20px;
    --lgSpacing:   50px;
    --xlSpacing:   60px;

    --wrapperWidth:   850px;
    --smWrapperWidth: 420px;
    --lgWrapperWidth: 1200px;

    --appSidebarWidth: 75px;
    --pageSidebarWidth: 13%;

    --baseAnimationSpeed: 150ms;
    --activeAnimationSpeed: 70ms;
    --entranceAnimationSpeed: 250ms;

    --baseRadius: 4px;
    --lgRadius:   12px;
    --btnRadius:  4px;

    // https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color
    accent-color: var(--primaryColor);
}

// Maps
// ----
$colorsMap: (
    "primary":     var(--primaryColor),
    "info":        var(--infoColor),
    "info-alt":    var(--infoAltColor),
    "success":     var(--successColor),
    "success-alt": var(--successAltColor),
    "danger":      var(--dangerColor),
    "danger-alt":  var(--dangerAltColor),
    "warning":     var(--warningColor),
    "warning-alt": var(--warningAltColor),
);

$sidesMap: (
    "t": "top",
    "r": "right",
    "b": "bottom",
    "l": "left",
);

$sizesMap: (
  "base": var(--baseSpacing),
  "xs":   var(--xsSpacing),
  "sm":   var(--smSpacing),
  "lg":   var(--lgSpacing),
  "xl":   var(--xlSpacing),
);