const tailwindColors = require("tailwindcss/colors");

const colors = {
  transparent: "transparent",
  current: "currentColor",
  black: tailwindColors.black,
  white: tailwindColors.white,
  gray: {
    50: "#F9FAFB",
    100: "#F3F4F6",
    200: "#E5E7EB",
    300: "#D1D5DB",
    400: "#9CA3AF",
    500: "#6B7280",
    600: "#4B5563",
    700: "#374151",
    800: "#1F2937",
    900: "#111827",
    transparent: {
      50: "rgba(0, 12, 39, 0.06)",
      100: "rgba(0, 12, 39, 0.1)",
      200: "rgba(0, 12, 39, 0.18)",
    },
  },
  green: {
    50: "#E8F3F1",
    100: "#D1E7E2",
    200: "#A3CFC5",
    300: "#76B8AA",
    400: "#48A08D",
    500: "#1A8871",
    600: "#137464",
    700: "#0D6159",
    800: "#084C4E",
    900: "#013C43",
  },
  red: {
    50: "#FEF2F2",
    100: "#FEE2E2",
    200: "#FECACA",
    300: "#FCA5A5",
    400: "#F87171",
    500: "#EF4444",
    600: "#DC2626",
    700: "#B91C1C",
    800: "#991B1B",
    900: "#7F1D1D",
  },
  amber: {
    50: "#FFFBEB",
    100: "#FEF3C7",
    200: "#FDE68A",
    300: "#FCD34D",
    400: "#FBBF24",
    500: "#F59E0B",
    600: "#D97706",
    700: "#B45309",
    800: "#92400E",
    900: "#78350F",
  },
  blue: {
    50: "#F0F9FF",
    100: "#E0F2FE",
    200: "#BAE6FD",
    300: "#7DD3FC",
    400: "#38BDF8",
    500: "#0EA5E9",
    600: "#0284C7",
    700: "#0369A1",
    800: "#075985",
    900: "#0C4A6E",
  },
  teal: tailwindColors.teal,
};

const colorAliases = {
  primary: {
    ...colors.green,
  },
  positive: {
    ...colors.green,
  },
  negative: {
    ...colors.red,
  },
  warning: {
    ...colors.amber,
  },
  info: {
    ...colors.blue,
  },
  background: {
    header: {
      DEFAULT: "#427484",
    },
    light: {
      1: colors.white,
      2: colors.gray[50],
      3: colors.gray[100],
    },
    dark: {
      1: colors.gray[900],
      2: colors.gray[800],
      3: colors.gray[700],
    },
    primary: {
      DEFAULT: colors.green[500],
      light: colors.green[100],
    },
    negative: {
      DEFAULT: colors.red[600],
      light: colors.red[100],
    },
    warning: {
      DEFAULT: colors.amber[500],
      light: colors.amber[50],
    },
    positive: {
      DEFAULT: colors.green[500],
      light: colors.green[100],
    },
    info: {
      DEFAULT: colors.blue[600],
      light: colors.blue[100],
    },
  },
  content: {
    dark: {
      1: colors.gray[900],
      2: colors.gray[800],
      muted: colors.gray[400],
    },
    light: {
      1: colors.white,
      2: colors.gray[200],
      muted: colors.gray[400],
    },
    primary: {
      DEFAULT: colors.green[500],
      dark: colors.green[600],
      inverse: colors.green[300],
      "inverse-vivid": "#009979",
    },
    negative: {
      DEFAULT: colors.red[600],
      dark: colors.red[700],
      inverse: colors.red[300],
    },
    warning: {
      DEFAULT: colors.amber[600],
      dark: colors.amber[700],
      inverse: colors.amber[300],
    },
    positive: {
      DEFAULT: colors.green[500],
      dark: colors.green[600],
      inverse: colors.green[300],
    },
    info: {
      DEFAULT: colors.blue[600],
      dark: colors.blue[700],
      inverse: colors.blue[300],
    },
  },
};

const screens = {
  xs: "380px",
  sm: "576px",
  md: "768px",
  lg: "992px",
  xl: "1200px",
  "2xl": "1400px",
  max: "1800px",
  letterbox: { raw: "(max-height: 760px) and (min-width: 576px)" },
  print: { raw: "print" }, // Note: PDFs are rendered at a viewport width of 1280px
};

const fontSize = {
  "para-xs": ["12px", "16px"],
  "para-sm": ["14px", "20px"],
  "para-md": ["16px", "24px"],
  "para-lg": ["18px", "27px"],

  "label-xxs": ["10px", "12px"],
  "label-xs": ["12px", "14px"],
  "label-sm": ["14px", "16px"],
  "label-md": ["16px", "20px"],
  "label-lg": ["18px", "24px"],

  "display-1": ["96px", "96px"],
  "display-2": ["80px", "84px"],
  "display-3": ["64px", "68px"],
  "display-4": ["48px", "52px"],

  "heading-1": ["48px", "50px"],
  "heading-2": ["36px", "40px"],
  "heading-3": ["30px", "36px"],
  "heading-4": ["24px", "30px"],
  "heading-5": ["20px", "25px"],
  "heading-6": ["16px", "20px"],

  "subheading-1": ["32px", "40px"],
  "subheading-2": ["24px", "32px"],
  "subheading-3": ["20px", "28px"],
  "subheading-4": ["16px", "24px"],
};

module.exports = {
  app: {
    colors: {
      ...colors,
      ...colorAliases,
    },
    screens,
    fontSize,
    fontFamily: {
      displaySans: "proxima-nova",
      bodySans: "proxima-nova",
      displaySerif: "merriweather",
    },
  },
  book: {
    colors: {
      ...colors,
      ...colorAliases,
    },
    screens,
    fontSize,
    fontFamily: {
      displaySans: "proxima-nova",
      bodySans: "proxima-nova",
    },
  },
};