module.exports = {
	main: "#394EFF",

  "gray-light-shade": "#EEEEEE",
  "gray-lightest": "#f6f6f6",
  "gray-light": "#ddd",
  "gray-bg": "#CCC",
  "gray-medium": "#888",
  "gray-dark": "#666",
  "gray-darkest": "#333",
  
  teal: "#394EFF", /* blue */
  "teal-dark": "#2331A8", /* "blue-dark" */
  "teal-light": "rgba(57, 78, 255, 0.1)", /* "blue-light" */

  tealx: "#3EAAAF",
  "tealx-light": "#E2F0EE",
  "tealx-light-border": "#C6DCDA",

  "tealx-lightest": 'rgba(62, 170, 175, 0.1)',

  orange: "#E28940",
  yellow: "#FFFBE5",
  yellow2: "#F5A623",
  "orange-dark": "#C26822",
  green: "#42AE5E",
  green2: "#00dc69",
  "green-dark": "#2C9848",
  red: "#cc0000",
  red2: "#F5A623",
  "red-lightest": 'rgba(204, 0, 0, 0.1)',
  blue: "#366CD9",
  blue2: "#0076FF",
  "active-blue": "#F6F7FF",
  'active-dark-blue': "#E2E4F6",
  "bg-blue": "#e3e6ff",
  "active-blue-border": "#D0D4F2",
  pink: "#ffb9b9",
  "light-blue-bg": "#E5F7F7",

  white: "#fff",
  borderColor: {
    default: '#DDDDDD',
    'gray-light-shade': '#EEEEEE',
    'primary': '#3490dc',
    'transparent': 'transparent',
  },
  transparent: 'transparent',
  cyan: '#EBF4F5',

  // actual theme colors - use this for new components
  figmaColors: {
    'accent-secondary': 'rgba(62, 170, 175, 1)',
    'main': 'rgba(57, 78, 255, 1)',
    'primary-outlined-hover-background':  'rgba(62, 170, 175, 0.08)',
    'primary-outlined-resting-border': 'rgba(62, 170, 175, 0.5)',
    'secondary-outlined-hover-background': 'rgba(63, 81, 181, 0.08)',
    'secondary-outlined-resting-border': 'rgba(63, 81, 181, 0.5)',
    'text-disabled': 'rgba(0,0,0, 0.38)',
    'text-primary': 'rgba(0,0,0, 0.87)',
    'outlined-border': 'rgba(0,0,0, 0.23)',
    'divider': 'rgba(0, 0, 0, 0.12)',
  }
}