$xs: 0px;
$sm: 600px;
$md: 960px;
$lg: 1280px;

$paletteCommonBlack: #000;
$paletteCommonWhite: #fff;
$paletteCommonType: light;

$palettePrimaryLight: #4dabf5;
$palettePrimaryMain: #2196f3;
$palettePrimaryDark: #1769aa;
$palettePrimaryContrastText: #fff;

$paletteSecondaryLight: #ff4081;
$paletteSecondaryMain: #f50057;
$paletteSecondaryDark: #c51162;
$paletteSecondaryContrastText: #fff;

$paletteErrorLight: #e57373;
$paletteErrorMain: #f44336;
$paletteErrorDark: #d32f2f;
$paletteErrorContrastText: #fff;

$paletteProgressLight: #ffac33;
$paletteProgressMain: #ff9800;
$paletteProgressDark: #b26a00;
$paletteProgressContrastText: #fff;

$paletteWarningLight: #ff784e;
$paletteWarningMain: #ff5722;
$paletteWarningDark: #b23c17;
$paletteWarningContrastText: #fff;

$paletteSuccessLight: #6fbf73;
$paletteSuccessMain: #4caf50;
$paletteSuccessDark: #357a38;
$paletteSuccessContrastText: #fff;

$paletteGrey50: #fafafa;
$paletteGrey100: #f5f5f5;
$paletteGrey200: #eeeeee;
$paletteGrey300: #e0e0e0;
$paletteGrey400: #bdbdbd;
$paletteGrey500: #9e9e9e;
$paletteGrey600: #757575;
$paletteGrey700: #616161;
$paletteGrey800: #424242;
$paletteGrey900: #212121;
$paletteGreyA100: #d5d5d5;
$paletteGreyA200: #aaaaaa;
$paletteGreyA400: #303030;
$paletteGreyA700: #616161;
$paletteGreyContrastThreshold: 3;
$paletteGreyTonalOffset: 0.2;

$paletteTextPrimary: rgba(0, 0, 0, 0.87);
$paletteTextSecondary: rgba(0, 0, 0, 0.54);
$paletteTextDisabled: rgba(0, 0, 0, 0.38);
$paletteTextHint: rgba(0, 0, 0, 0.38);
$paletteTextDivider: rgba(0, 0, 0, 0.12);

$paletteTextPrimary2: rgba(255, 255, 255, 0.87);
$paletteTextSecondary2: rgba(255, 255, 255, 0.54);
$paletteTextDisabled2: rgba(255, 255, 255, 0.38);
$paletteTextHint2: rgba(255, 255, 255, 0.38);
$paletteTextDivider2: rgba(255, 255, 255, 0.12);

$paletteBackgroundPaper: #fff;
$paletteBackgroundDefault: #fafafa;

$paletteActionActive: rgba(0, 0, 0, 0.54);
$paletteActionHover: rgba(0, 0, 0, 0.08);
$paletteActionHoverOpacity: 0.08;
$paletteActionSelected: rgba(0, 0, 0, 0.14);
$paletteActionDisabled: rgba(0, 0, 0, 0.26);
$paletteActionDisabledBackground: rgba(0, 0, 0, 0.12);

$shadows0: none;
$shadows1: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
  0px 2px 1px -1px rgba(0, 0, 0, 0.12);
$shadows2: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
  0px 3px 1px -2px rgba(0, 0, 0, 0.12);
$shadows3: 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14),
  0px 3px 3px -2px rgba(0, 0, 0, 0.12);
$shadows4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14),
  0px 1px 10px 0px rgba(0, 0, 0, 0.12);
$shadows5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14),
  0px 1px 14px 0px rgba(0, 0, 0, 0.12);
$shadows6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14),
  0px 1px 18px 0px rgba(0, 0, 0, 0.12);
$shadows7: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14),
  0px 2px 16px 1px rgba(0, 0, 0, 0.12);
$shadows8: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
  0px 3px 14px 2px rgba(0, 0, 0, 0.12);
$shadows9: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14),
  0px 3px 16px 2px rgba(0, 0, 0, 0.12);
$shadows10: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14),
  0px 4px 18px 3px rgba(0, 0, 0, 0.12);
$shadows11: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14),
  0px 4px 20px 3px rgba(0, 0, 0, 0.12);
$shadows12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14),
  0px 5px 22px 4px rgba(0, 0, 0, 0.12);
$shadows13: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14),
  0px 5px 24px 4px rgba(0, 0, 0, 0.12);
$shadows14: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14),
  0px 5px 26px 4px rgba(0, 0, 0, 0.12);
$shadows15: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14),
  0px 6px 28px 5px rgba(0, 0, 0, 0.12);
$shadows16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14),
  0px 6px 30px 5px rgba(0, 0, 0, 0.12);
$shadows17: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14),
  0px 6px 32px 5px rgba(0, 0, 0, 0.12);
$shadows18: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14),
  0px 7px 34px 6px rgba(0, 0, 0, 0.12);
$shadows19: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14),
  0px 7px 36px 6px rgba(0, 0, 0, 0.12);
$shadows20: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14),
  0px 8px 38px 7px rgba(0, 0, 0, 0.12);
$shadows21: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14),
  0px 8px 40px 7px rgba(0, 0, 0, 0.12);
$shadows22: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14),
  0px 8px 42px 7px rgba(0, 0, 0, 0.12);
$shadows23: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14),
  0px 9px 44px 8px rgba(0, 0, 0, 0.12);
$shadows24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14),
  0px 9px 46px 8px rgba(0, 0, 0, 0.12);

$typographyFontWeightLight: 300;
$typographyFontWeightRegular: 400;
$typographyFontWeightMedium: 500;
// 1rem
$typographyFontSize: 32;
$typographyFontFamily: 'Roboto', 'NotoSansCJKsc', 'Helvetica', 'Arial', sans-serif;

$spacingUnit: 8;
$shapeBorderRadius: 4;

$transitionsEasingEaseInOut: cubic-bezier(0.4, 0, 0.2, 1);
$transitionsEasingEaseOut: cubic-bezier(0, 0, 0.2, 1);
$transitionsEasingEaseIn: cubic-bezier(0.4, 0, 1, 1);
$transitionsEasingSharp: cubic-bezier(0.4, 0, 0.6, 1);

$transitionsDurationShortest: 150;
$transitionsDurationShorter: 200;
$transitionsDurationShort: 250;
$transitionsDurationStandard: 300;
$transitionsDurationComplex: 375;
$transitionsDurationEnteringScreen: 225;
$transitionsDurationLeavingScreen: 195;

$zIndexWatermark: 0;
$zIndexDivider: 100;
$zIndexMobileStepper: 1000;
$zIndexBackTop: 1050;
$zIndexDropdown: 1060;
$zIndexToolBar: 1080;
$zIndexActionBar: 1080;
$zIndexAppBar: 1100;
$zIndexAffix: 1120;
$zIndexDrawer: 1200;
$zIndexModal: 1300;
$zIndexCurtain: 1350;
$zIndexSnackbar: 1400;
$zIndexTooltip: 1500;