export const colors: any = {
  lightGray: "#ededf0",
  mediumGray: "#e3e5e5",
  darkGray: "#33302f",
  mediumBlue: "#4285f4",
  green: "#349d7b",
  lavender: "#a5a6f6",
  darkLavender: "#5d5fef",
  pink: "#fcddec",
  cdrLinkOrange: "#ff7115",
  coreYellow: "#fac942",
  helpYellow: "#fff4d5",
  dwcDarkBlue: "#191847",
  hazyMint: "#ecf7f8",
  leafcutterElectricBlue: "#4d6aff",
  leafcutterLightBlue: "#fafbfd",
  waterbearElectricPurple: "#332c83",
  waterbearLightSmokePurple: "#eff3f8",
  bumpedPurple: "#212058",
  mutedPurple: "#373669",
  warningPink: "#ef5da8",
  lightPink: "#fff0f7",
  lightGreen: "#f0fff3",
  lightOrange: "#fff5f0",
  beige: "#f6f2f1",
  almostBlack: "#33302f",
  white: "#ffffff",
};

export const typography: any = {
  h1: {
    fontFamily: "Playfair, serif",
    fontSize: 45,
    fontWeight: 700,
    lineHeight: 1.1,
    margin: 0,
  },
  h2: {
    fontFamily: "Poppins, sans-serif",
    fontSize: 35,
    fontWeight: 700,
    lineHeight: 1.1,
    margin: 0,
  },
  h3: {
    fontFamily: "Poppins, sans-serif",
    fontWeight: 400,
    fontSize: 27,
    lineHeight: 1.1,
    margin: 0,
  },
  h4: {
    fontFamily: "Poppins, sans-serif",
    fontWeight: 700,
    fontSize: 18,
  },
  h5: {
    fontFamily: "Roboto, sans-serif",
    fontWeight: 700,
    fontSize: 16,
    lineHeight: "24px",
    textTransform: "uppercase",
    textAlign: "center",
    margin: 1,
  },
  h6: {
    fontFamily: "Roboto, sans-serif",
    fontWeight: 400,
    fontSize: 14,
    textAlign: "center",
  },
  p: {
    fontFamily: "Roboto, sans-serif",
    fontSize: 17,
    lineHeight: "26.35px",
    fontWeight: 400,
    margin: 0,
  },
  small: {
    fontFamily: "Roboto, sans-serif",
    fontSize: 13,
    lineHeight: "18px",
    fontWeight: 400,
    margin: 0,
  },
};