$breakpoints: (
  smallMobile: 480px,
  mobile: 768px,
  tablet: 1024px,
  pc: 1159px,
  lgPc: 1440px,
);

$medias: (
  smbDown: '(max-width: #{map-get($breakpoints, "smallMobile") - 1px})',
  smbUp: '(min-width: #{map-get($breakpoints, "smallMobile")})',

  mbDown: '(max-width: #{map-get($breakpoints, "mobile") - 1px})',
  mbOnly:
    '(min-width: #{map-get($breakpoints, "smallMobile")}) and (max-width: #{map-get($breakpoints, "mobile") - 1px})',
  mbUp: '(min-width: #{map-get($breakpoints, "mobile")})',

  tdDown: '(max-width: #{map-get($breakpoints, "tablet") - 1px})',
  tdOnly:
    '(min-width: #{map-get($breakpoints, "mobile")}) and (max-width: #{map-get($breakpoints, "tablet") - 1px})',
  tdUp: '(min-width: #{map-get($breakpoints, "tablet")})',

  pcUp: '(min-width: #{map-get($breakpoints, "pc")})',
  pcOnly:
    '(min-width: #{map-get($breakpoints, "tablet")}) and (max-width: #{map-get($breakpoints, "pc") - 1px})',
  pcDown: '(max-width: #{map-get($breakpoints, "pc") - 1px})',

  lgPcUp: '(min-width: #{map-get($breakpoints, "lgPc")})',
  lgPcOnly:
    '(min-width: #{map-get($breakpoints, "pc")}) and (max-width: #{map-get($breakpoints, "lgPc") - 1px})',
  lgPcDown: '(max-width: #{map-get($breakpoints, "lgPc") - 1px})',

  mbToPC:
    '(min-width: #{map-get($breakpoints, "mobile")}) and (max-width: #{map-get($breakpoints, "pc") - 1px})',
);
//  Some colors were renamed due to map-get not recognizing if name is the same as a css color shorthand
$colors: (
  defaultColor: #262626,
  primaryBase: #2d87f3,
  primaryHover: #2c74df,
  primaryActive: #2b62cd,
  primaryVisited: #5e38ba,

  secondaryBase: #284a75,
  secondaryDark: #1b3250,

  accentLight: #b1ebf8,
  accentMain: #00aecd,

  success: #00b16a,
  error: #f71210,

  gray50: #fafafa,
  gray100: #f2f2f2,
  gray200: #d9d9d9,
  gray300: #bfbfbf,
  gray400: #8c8c8c,
  gray500: #737373,
  gray600: #595959,
  gray700: #404040,
  gray800: #262626,

  blue50: #e3f2ff,
  blue100: #bcdeff,
  blue200: #91caff,
  blue300: #65b5ff,
  blue400: #45a4ff,
  blue500: #2b94ff,
  blue600: #2d87f3,
  blue700: #2c74df,
  blue800: #2b62cd,
  blue900: #2743ad,

  alertWarning: #fe921d,

  green50: #e0f8ee,
  green100: #b3eed5,
  green200: #7ce2b9,
  green300: #2ed69e,
  green400: #00cb8a,
  green500: #00c076,
  green600: #00b16a,
  green700: #009e5c,
  green800: #008c50,
  green900: #006c39,

  yellow50: #fff8e2,
  yellow100: #ffecb6,
  yellow200: #ffe187,
  yellow300: #ffd658,
  yellow400: #ffc326,
  yellow500: #fe921d,
  yellow600: #ffb521,
  yellow700: #fea21e,
  yellow800: #fe921d,
  yellow900: #fc7419,

  red50: #fae9e8,
  red100: #feccbf,
  red200: #feaa96,
  red300: #f44d2c,
  red400: #ff6f4d,
  red500: #ff5331,
  red600: #f44d2c,
  red700: #e64728,
  red800: #d84023,
  red900: #bf331b,

  neutral50: #f8f9fc,
  neutral100: #e4e8ec,
  neutral150: #fafafa,
  neutral200: #d2d6dc,
  neutral300: #bfc5cc,
  neutral400: #adb3bc,
  neutral500: #9aa2ac,
  neutral600: #87909c,
  neutral700: #757f8c,
  neutral800: #626d7c,

  teal50: #e0f7fc,
  teal100: #b1ebf8,
  teal200: #7ddff3,
  teal300: #44d1ec,
  teal400: #00c7e6,
  teal500: #00bee0,
  teal600: #00aecd,
  teal700: #0099b2,
  teal800: #008599,
  teal900: #00626c,

  pink50: #fff1f6,
  pink100: #ffdce9,
  pink200: #fec7dc,
  pink300: #fec2cf,
  pink400: #fe9dc2,
  pink500: #fd87b4,
  pink600: #fd72a7,
  pink700: #fc5d9a,
  pink800: #fc488d,

  violet50: #f5edff,
  violet100: #e7d2f7,
  violet200: #d8b7f0,
  violet300: #ca9ce8,
  violet400: #bb82e1,
  violet500: #ad67d9,
  violet600: #9e4cd1,
  violet700: #9031ca,
  violet800: #8116c2,

  indigo700: #35639c,
  indigo800: #284a75,
  indigo900: #1b3250,

  brown50: #faecde,
  brown100: #ecd8c5,
  brown200: #dec5ab,
  brown300: #d0b192,
  brown400: #c39d79,
  brown500: #b5895f,
  brown600: #a77646,
  brown700: #99622c,
  brown800: #8b4e13,

  cWhite: #fff,
);

$mbColors: (
  cPink: #e85388,
  cobalt: #2661ad,

  dark: #202135,
  cGray: #3e3f58,
  midGray: #9495a0,
  lightGray: #f3f3f3,

  lightMint: #f2fcf8,
  lightPink: #ffeaf1,
  lightOrange: #fffaeb,
  lightBlue: #e0e9fc,
  mint: #5ec08f,
  peach: #ffaaa9,
  cOrange: #fb8c00,
  ceruleanBlue: #b6ceff,

  cRed: #eb5757,
  lightRed: #fdeeee,
  cYellow: #ff8a2b,
  cGreen: #f2fcf7,
  cBlue: #4096fe,

  toneYellow: #fff9eb,
  toneGreen: #f2fcf7,
  toneBlue: #e0e9fb,
  tonePink: #ffeaf1,
);

$sizes: (
  fwBold: 700,
  fwSemiBold: 600,
  fsCaption2: 13px,
  fsHeading1: 40px,
  fsHeading2: 28px,
  fsHeading4: 24px,
  fsHeading5: 18px,
  fsHeading6: 16px,
  fsParagraph3: 16px,
  fsParagraph4: 14px,
  fwRegular: 400,
);

$zIndexes: (
  belowHeader: 1,
  zIndex100: 100,
  onTop: 1000,
  drawer: 305,
  menuCategoryPopupWrapper: 200,
);