export const styleVariables = {
  widthBreakpointSm: 320,
  widthBreakpointMd: 600,
  widthBreakpointLg: 1024,
  widthBreakpointXl: 1280,
  // animations
  transitionDuration50: 50,
  transitionDuration100: 100,
  transitionDuration150: 150,
  transitionDuration200: 200,
  transitionDuration300: 300,
  transitionDuration400: 400,
  transitionDuration500: 500,
  transitionDuration600: 600,
  transitionDuration700: 700,
  transitionCurveAcceleration: 'cubic-bezier(0.4, 0.0, 1, 1)',
  transitionCurveDeceleration: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
  transitionCurveStandard: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
  transitionCurveSharp: 'cubic-bezier(0.4, 0.0, 0.6, 1)',
  transitionCurveAccelerationArray: [0.4, 0.0, 1, 1],
  transitionCurveDecelerationArray: [0.0, 0.0, 0.2, 1],
  transitionCurveSharpArray: [0.4, 0.0, 0.6, 1],
  transitionCurveStandardArray: [0.4, 0.0, 0.2, 1],
  // colors
  blue100: '#e5eefc',
  blue200: '#bdd7fc',
  blue300: '#6da8fd',
  blue400: '#3187fe',
  blue500: '#006aff',
  blue600: '#075ed6',
  blue700: '#104ea5',
  blue800: '#223143',
  purple100: '#eff0fc',
  purple200: '#dbddfc',
  purple300: '#b3b6fd',
  purple400: '#959bfe',
  purple500: '#7d83ff',
  purple600: '#6b72d6',
  purple700: '#565ca5',
  purple800: '#2c3343',
  teal100: '#ECf6f8',
  teal200: '#D1EFEE',
  teal300: '#9CE0DB',
  teal400: '#74D7CE',
  teal500: '#54cec3',
  teal600: '#4aaea6',
  teal700: '#3f8683',
  teal800: '#29393f',
  orange100: '#f9f2ed',
  orange200: '#f8e1cf',
  orange300: '#f6bf93',
  orange400: '#f4a867',
  orange500: '#f49342',
  orange600: '#ca7f3f',
  orange700: '#785639',
  orange800: '#363534',
  yellow100: '#f8f6e8',
  yellow200: '#f6edbf',
  yellow300: '#f2da6e',
  yellow400: '#efcd32',
  yellow500: '#edc200',
  yellow600: '#c5a40a',
  yellow700: '#75691f',
  yellow800: '#35392f',
  red100: '#f6e7e8',
  red200: '#f1c0bf',
  red300: '#e6716e',
  red400: '#de3832',
  red500: '#d80800',
  red600: '#b40f0a',
  red700: '#891716',
  red800: '#332a2f',
  green100: '#e9f5f4',
  green200: '#c9ece2',
  green300: '#89d7c0',
  green400: '#59caa7',
  green500: '#32be92',
  green600: '#2fa17f',
  green700: '#2a6759',
  green800: '#26383b',
  neutral100: '#ffffff',
  neutral200: '#f9fafc',
  neutral300: '#f4f6f8',
  neutral400: '#dfe3e8',
  neutral500: '#c4cdd5',
  neutral600: '#919eab',
  neutral700: '#7a8a99',
  neutral800: '#637381',
  neutral900: '#454f5b',
  neutral1000: '#212b36',
  brandBlue100: '#e5f2f8',
  brandBlue200: '#bde1ef',
  brandBlue300: '#6dbfdf',
  brandBlue400: '#31a8d3',
  brandBlue500: '#0093c9',
  brandBlue600: '#077fab',
  brandBlue700: '#16566f',
  brandBlue800: '#22353f',
  darkNeutral100: '#ffffff', // ACA compliant text color, title text color
  darkNeutral200: '#ddddde', // ACA compliant text color, body text color
  darkNeutral300: '#a4a5a7', // ACA compliant text color
  darkNeutral400: '#77787c', // ACA compliant text color
  darkNeutral500: '#2e2f36',
  darkNeutral600: '#25262c',
  darkNeutral700: '#1d1e25', // Default background color
  darkNeutral800: '#16181e',
  darkNeutral900: '#14141a',
  // typography
  primaryFont: 'Montserrat',
  secondaryFont: 'Lato',
  lineHeightBody: '1,5em',
  lineHeightHeader: '1.2em',
  commonLetterSpacing: '.04em',
  fontSize0: '13.8px',
  fontSize1: '16px',
  fontSize2: '21.328px',
  fontSize3: '28.432px',
  fontSize4: '37.904px',
  fontSize5: '50.512px',
  fontSize6: '67.344px',
  fontSize7: '89.76px',
  fontWeightLight: '300',
  fontWeightRegular: '400',
  fontWeightMedium: '500',
  fontWeightSemibold: '600',
  fontWeightBold: '700',
};