// White, black and gray
$white: hsl(0, 0%, 100%);
$black: hsl(0, 0%, 0%);
$semi-white: darken($white, 2%);
$gray95: darken($white, 5%);
$gray80: darken($white, 20%);
$gray70: darken($white, 30%);
$gray50: lighten($black, 50%);
$gray20: lighten($black, 20%);

// Color variables
$brand-color: hsl(60, 70%, 50%);
$action-color: hsl(210, 100%, 50%);
$error-color: hsl(0, 85%, 55%);
$success-color: hsl(150, 100%, 35%);
$warning-color: hsl(40, 100%, 50%);

// Pastel shades
$badge-main-color: hsl(35, 100%, 97%);
$badge-error-color: transparentize($error-color, 0.8);
$badge-info-color: transparentize($action-color, 0.8);
$badge-success-color: lighten($success-color, 58%);

//Base sizes
$line-height: 32px;
$spacing: 4px;

// Base: fonts
$font-small: 12px;
$font-normal: 14px; // TODO: rename to $font-base
$font-normal-big: 16px;
$font-big: 18px;
$font-bigger: 20px;
$font-biggest: 26px;

// App: forms
$input-height-big: 40px;

// App: layout sizes
$layout-header-height: 56px;
$layout-authenticated-footer-height: 80px;
$layout-authenticated-sidebar-width: 200px;
$layout-authenticated-loader-size: 100px;
$layout-anonymous-footer-height: 120px;
$layout-mobile: 481px;
$layout-tablet: 769px;
$layout-desktop: 1025px;
$layout-desktop-m: 1280px;
$layout-desktop-l: 1400px;
$item: 8px; // Why? Read -> https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632

// App: utils
$border-radius: 3px;

//Shadows
$base-shadow: 0 1px 3px 0 rgba(0, 0, 0, .25), 0 4px 12px 0 rgba(0, 0, 0, .1);

// App: z-index
$layers: (
  devNotice: 5000,
  messageCenter: 4000,
  modal: 3000,
  dropdown: 2500,
  layout: 2000,
  contentOverlay: 1000,
  header: 2001,
  below: -1
);

@function layer($name, $order: 0) {
  @return map-get($layers, $name) + $order;
}