// White, black and gray
$white: hsl(0, 0%, 100%);
$black: hsl(0, 0%, 0%);
$semi-white: darken($white, 2%);
$composite-gray: hsl(224, 33%, 14%);
$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%);

// Gradients
$platinum-gradient: linear-gradient(258deg, hsl(0, 0%, 75%), hsl(246, 15%, 25%));
$gray-blue-gradient: linear-gradient(to left, hsl(207, 100%, 18%), $composite-gray);

// Pastel shades
$badge-main-color: hsl(35, 100%, 97%);
$badge-error-color: lighten($error-color, 40%);
$badge-info-color: lighten($action-color, 45%);
$badge-success-color: lighten($success-color, 55%);

//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: 28px;

// 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: 1366px;
$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;
}

:export {
  white: $white;
  black: $black;
  semiWhite: $semi-white;
  gray95: $gray95;
  gray80: $gray80;
  gray70: $gray70;
  gray50: $gray50;
  gray20: $gray20;
  compositeGray: $composite-gray;
  brandColor: $brand-color;
  actionColor: $action-color;
  errorColor: $error-color;
  successColor: $success-color;
  warningColor: $warning-color;
  badgeMainColor: $badge-main-color;
  badgeErrorColor: $badge-error-color;
  badgeInfoColor: $badge-info-color;
  badgeSuccessColor: $badge-success-color;
}