variable.scss

// @import "./fonts.scss";

/**
  * @tokens Font Families
  * @presenter FontFamily
  */
// TODO: resolve font loading in scss
// $font-family-helvetica: helvetica-now-display, arial, sans-serif !default;

/**
  * @tokens Font Sizes
  * @presenter FontSize
  */

$font-xsmall: 11px;
$font-small: 16px;
$font-normal: 18px;
$font-xnormal: 19px;
$font-large: 21px;
$font-xlarge: 35px;
$font-xxlarge: 44px;

/**
  * @tokens Font Weights
  * @presenter FontWeight
  */

$font-light: 300;
$font-medium: 500;
$font-bold: 700;

/**
  * @tokens Colors
  * @presenter Color
  */

$white: #fff;
$silver: #f8f9fa;
$light-grey: lightgrey;
$dark-grey: #7b7b7b;
$grey: #979797;
$light-orange: #f39232;
$orange: #ee741f;
$light-blue: #25aff4;
$blue: #0484c4;
$green: #159957;
$light-black: #192537;
$black: #000;
$mask-black: rgba(0, 0, 0, 0.2);

/**
  * @tokens Spacing
  * @presenter Color
  */

$tablet: 630px;

$breakpoints: (
    xxs: 480px,
    sm: 768px,
    md: 992px,
    lg: 1024px,
    xl: 1280px,
    xxl: 1600px,
    fullhd: 1920px,
);

$z-lvl-0: -1;
$z-lvl-1: 100;
$z-lvl-2: 200;
$z-lvl-3: 300;
$z-lvl-4: 400;
$z-lvl-5: 500;
$z-lvl-6: 600;
$z-lvl-7: 700;
$z-lvl-8: 800;