const plugin = require("tailwindcss/plugin");

module.exports = {
  content: ["./index.html", "./src/**/*.{vue,ts,js}"],
  darkMode: "class",
  theme: {
    screens: {
      sm: "576px",
      "sm-max": { max: "576px" },
      md: "768px",
      "md-max": { max: "768px" },
      lg: "992px",
      "lg-max": { max: "992px" },
      xl: "1200px",
      "xl-max": { max: "1200px" },
      "2xl": "1320px",
      "2xl-max": { max: "1320px" },
    },
    colors: ({ colors }) => ({
      inherit: colors.inherit,
      current: colors.current,
      transparent: colors.transparent,
      black: colors.black,
      white: colors.white,
      slate: {
        50: "#f8fafc", 100: "#dee2e6", 200: "#cbd3da", 300: "#a8b8d8",
        400: "#8392ab", 500: "#67748e", 600: "#627594", 700: "#344767",
        800: "#3a416f", 900: "#0f172a",
      },
      gray: {
        50: "#f8f9fa", 100: "#ebeff4", 200: "#e9ecef", 300: "#d2d6da",
        400: "#ced4da", 500: "#adb5bd", 600: "#6c757d", 700: "#495057",
        800: "#252f40", 900: "#141727",
      },
      red: {
        50: "#fef2f2", 100: "#fee2e2", 200: "#fecaca", 300: "#fca5a5",
        400: "#f87171", 500: "#f53939", 600: "#ea0606", 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",
      },
      lime: {
        50: "#f7fee7", 100: "#ecfccb", 200: "#d9f99d", 300: "#bef264",
        400: "#98ec2d", 500: "#82d616", 600: "#65a30d", 700: "#4d7c0f",
        800: "#3f6212", 900: "#365314",
      },
      green: {
        50: "#f0fdf4", 100: "#dcfce7", 200: "#bbf7d0", 300: "#86efac",
        400: "#4ade80", 500: "#22c55e", 600: "#17ad37", 700: "#15803d",
        800: "#166534", 900: "#14532d",
      },
      teal: {
        50: "#f0fdfa", 100: "#ccfbf1", 200: "#99f6e4", 300: "#5eead4",
        400: "#2dd4bf", 500: "#14b8a6", 600: "#0d9488", 700: "#0f766e",
        800: "#115e59", 900: "#134e4a",
      },
      cyan: {
        50: "#ecfeff", 100: "#cffafe", 200: "#a5f3fc", 300: "#67e8f9",
        400: "#21d4fd", 500: "#17c1e8", 600: "#0891b2", 700: "#0e7490",
        800: "#155e75", 900: "#164e63",
      },
      blue: {
        50: "#eff6ff", 100: "#dbeafe", 200: "#bfdbfe", 300: "#93c5fd",
        400: "#60a5fa", 500: "#3b82f6", 600: "#2152ff", 700: "#1d4ed8",
        800: "#344e86", 900: "#00007d",
      },
      violet: {
        50: "#f5f3ff", 100: "#ede9fe", 200: "#ddd6fe", 300: "#c4b5fd",
        400: "#a78bfa", 500: "#8b5cf6", 600: "#7c3aed", 700: "#6d28d9",
        800: "#5b21b6", 900: "#4c1d95",
      },
      purple: {
        50: "#faf5ff", 100: "#f3e8ff", 200: "#e9d5ff", 300: "#d8b4fe",
        400: "#c084fc", 500: "#a855f7", 600: "#9333ea", 700: "#7928ca",
        800: "#6b21a8", 900: "#581c87",
      },
      fuchsia: {
        50: "#fdf4ff", 100: "#fae8ff", 200: "#f5d0fe", 300: "#e293d3",
        400: "#e879f9", 500: "#cb0c9f", 600: "#c026d3", 700: "#a21caf",
        800: "#830866", 900: "#701a75",
      },
      pink: {
        50: "#fdf2f8", 100: "#fce7f3", 200: "#fbcfe8", 300: "#f9a8d4",
        400: "#f472b6", 500: "#ff0080", 600: "#db2777", 700: "#be185d",
        800: "#9d174d", 900: "#831843",
      },
      rose: {
        50: "#fff1f2", 100: "#ffe4e6", 200: "#fecdd3", 300: "#fda4af",
        400: "#ff667c", 500: "#f43f5e", 600: "#e11d48", 700: "#be123c",
        800: "#9f1239", 900: "#881337",
      },
    }),
    spacing: {
      px: "1px", 0: "0px", 0.5: "0.125rem", 0.75: "0.1875rem",
      1: "0.25rem", 1.25: "0.3125rem", 1.5: "0.375rem", 1.75: "0.4375rem",
      2: "0.5rem", 2.5: "0.625rem", 2.7: "0.675rem", 3: "0.75rem",
      3.5: "0.875rem", 4: "1rem", 4.5: "1.125rem", 5: "1.25rem",
      5.5: "1.375rem", 6: "1.5rem", 6.5: "1.625rem", 7: "1.75rem",
      7.5: "1.875rem", 8: "2rem", 8.75: "2.1875rem", 9: "2.25rem",
      10: "2.5rem", 11: "2.75rem", 12: "3rem", 14: "3.5rem", 16: "4rem",
      19.5: "4.875rem", 20: "5rem", 24: "6rem", 28: "7rem", 32: "8rem",
      36: "9rem", 40: "10rem", 44: "11rem", 48: "12rem", 52: "13rem",
      56: "14rem", 60: "15rem", 62.5: "15.625rem", 64: "16rem",
      68: "17rem", 68.5: "17.125rem", 72: "18rem", 80: "20rem",
      96: "24rem",
    },
    boxShadow: {
      "soft-xxs": "0 1px 5px 1px #ddd",
      "soft-xs": "0 3px 5px -1px rgba(0,0,0,.09),0 2px 3px -1px rgba(0,0,0,.07)",
      "soft-sm": "0 .25rem .375rem -.0625rem hsla(0,0%,8%,.12),0 .125rem .25rem -.0625rem hsla(0,0%,8%,.07)",
      "soft-md": "0 4px 7px -1px rgba(0,0,0,.11),0 2px 4px -1px rgba(0,0,0,.07)",
      "soft-lg": "0 2px 12px 0 rgba(0,0,0,.16)",
      "soft-xl": "0 20px 27px 0 rgba(0,0,0,0.05)",
      "soft-2xl": "0 .3125rem .625rem 0 rgba(0,0,0,.12)",
      "soft-3xl": "0 8px 26px -4px hsla(0,0%,8%,.15),0 8px 9px -5px hsla(0,0%,8%,.06)",
      "soft-primary-outline": "0 0 0 2px #e9aede",
      blur: "inset 0 0 1px 1px hsla(0,0%,100%,.9),0 20px 27px 0 rgba(0,0,0,.05)",
      none: "none",
    },
    borderRadius: {
      none: "0px", xs: "0.0625rem", sm: "0.125rem", DEFAULT: "0.25rem",
      md: "0.375rem", lg: "0.5rem", xl: "0.75rem", "2xl": "1rem",
      "3xl": "1.5rem", full: "9999px", circle: "50%",
    },
    fontFamily: {
      sans: ["Open Sans", "sans-serif"],
      body: ["Roboto", "sans-serif"],
      awesome: ["FontAwesome"],
    },
    fontSize: {
      xs: ["0.75rem", { lineHeight: "1rem" }],
      sm: ["0.875rem", { lineHeight: "1.5rem" }],
      base: ["1rem", { lineHeight: "1.5rem" }],
      lg: ["1.125rem", { lineHeight: "1.75rem" }],
      xl: ["1.25rem", { lineHeight: "1.75rem" }],
      "2xl": ["1.5rem", { lineHeight: "2rem" }],
      "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
      "4xl": ["2.25rem", { lineHeight: "2.5rem" }],
      "5xl": ["3rem", { lineHeight: "1" }],
    },
    fontWeight: {
      light: "300", normal: "400", medium: "500",
      semibold: "600", bold: "700", extrabold: "800",
    },
    lineHeight: {
      none: "1", tight: "1.25", snug: "1.375", normal: "1.5",
      default: "1.6", relaxed: "1.625", loose: "2",
      pro: "1.4", button: "1.3",
      5.6: "1.4rem",
    },
    height: ({ theme }) => ({
      auto: "auto",
      ...theme("spacing"),
      "1/2": "50%", "1/3": "33.333333%", "2/3": "66.666667%",
      "1/4": "25%", "3/4": "75%",
      full: "100%",
      sidenav: "calc(100vh - 370px)",
      screen: "100vh",
      min: "min-content", max: "max-content", fit: "fit-content",
    }),
    maxWidth: ({ theme, breakpoints }) => ({
      ...theme("spacing"),
      none: "none", xs: "20rem", sm: "24rem", md: "28rem", lg: "32rem",
      xl: "36rem", "2xl": "42rem", "3xl": "48rem", "4xl": "56rem",
      "5xl": "64rem", "6xl": "72rem", "7xl": "80rem",
      full: "100%", min: "min-content", max: "max-content",
      ...breakpoints(theme("screens")),
    }),
    width: ({ theme }) => ({
      auto: "auto",
      ...theme("spacing"),
      "1/100": "1%",
      "1/2": "50%", "1/3": "33.333333%", "2/3": "66.666667%",
      "1/4": "25%", "2/4": "50%", "3/4": "75%",
      "1/5": "20%", "2/5": "40%", "3/5": "60%", "4/5": "80%",
      "1/6": "16.666667%", "5/6": "83.333333%",
      "1/12": "8.333333%", "2/12": "16.666667%", "3/12": "25%",
      "4/12": "33.333333%", "5/12": "41.666667%", "6/12": "50%",
      "7/12": "58.333333%", "8/12": "66.666667%", "9/12": "75%",
      "10/12": "83.333333%", "11/12": "91.666667%",
      full: "100%", screen: "100vw",
      min: "min-content", max: "max-content", fit: "fit-content",
    }),
    backgroundImage: ({ theme }) => ({
      none: "none",
      "gradient-to-t": "linear-gradient(to top, var(--tw-gradient-stops))",
      "gradient-to-tr": "linear-gradient(to top right, var(--tw-gradient-stops))",
      "gradient-to-r": "linear-gradient(to right, var(--tw-gradient-stops))",
      "gradient-to-br": "linear-gradient(to bottom right, var(--tw-gradient-stops))",
      "gradient-to-b": "linear-gradient(to bottom, var(--tw-gradient-stops))",
      "gradient-to-bl": "linear-gradient(to bottom left, var(--tw-gradient-stops))",
      "gradient-to-l": "linear-gradient(to left, var(--tw-gradient-stops))",
      "gradient-to-tl": "linear-gradient(to top left, var(--tw-gradient-stops))",
      "gradient-fuchsia": "linear-gradient(310deg," + theme("colors.purple.700") + "," + theme("colors.pink.500") + ")",
      "gradient-cyan": "linear-gradient(310deg," + theme("colors.blue.600") + "," + theme("colors.cyan.400") + ")",
      "gradient-lime": "linear-gradient(310deg," + theme("colors.green.600") + "," + theme("colors.lime.400") + ")",
      "gradient-slate": "linear-gradient(310deg," + theme("colors.slate.600") + "," + theme("colors.slate.300") + ")",
      "gradient-dark-gray": "linear-gradient(310deg," + theme("colors.gray.900") + "," + theme("colors.slate.800") + ")",
      "gradient-horizontal-dark": "linear-gradient(90deg,transparent,rgba(0,0,0,.4),transparent)",
      "gradient-horizontal-light": "linear-gradient(90deg,transparent,rgba(0,0,0,.1),transparent)",
    }),
    backgroundSize: {
      auto: "auto", cover: "cover", contain: "contain", 150: "150%",
    },
    backgroundPosition: {
      bottom: "bottom", center: "center", "x-25": "25% 0",
      left: "left", right: "right", top: "top",
    },
    opacity: {
      0: "0", 5: "0.05", 10: "0.1", 20: "0.2", 25: "0.25", 30: "0.3",
      40: "0.4", 50: "0.5", 60: "0.6", 65: "0.65", 70: "0.7", 75: "0.75",
      80: "0.8", 85: "0.85", 90: "0.9", 95: "0.95", 100: "1",
    },
    scale: {
      0: "0", 50: ".5", 75: ".75", 90: ".9", 95: ".95", 100: "1",
      102: "1.02", 105: "1.05", 110: "1.1", 125: "1.25", 150: "1.5",
    },
    transitionTimingFunction: {
      DEFAULT: "cubic-bezier(0.4, 0, 0.2, 1)",
      linear: "linear",
      in: "cubic-bezier(0.4, 0, 1, 1)",
      "in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
      out: "cubic-bezier(0, 0, 0.2, 1)",
      "soft": "cubic-bezier(0.25, 0.1, 0.25, 1)",
      "soft-in": "cubic-bezier(0.42, 0, 1, 1)",
      "soft-in-out": "cubic-bezier(0.42, 0, 0.58, 1)",
      "soft-out": "cubic-bezier(0, 0, 0.58, 1)",
      "nav-brand": "cubic-bezier(0.4, 0, 1, 1)",
    },
    transitionDuration: {
      DEFAULT: "150ms", 75: "75ms", 100: "100ms", 150: "150ms",
      200: "200ms", 250: "250ms", 300: "300ms", 500: "500ms",
      600: "600ms", 700: "700ms", 1000: "1000ms",
    },
    zIndex: {
      auto: "auto", 0: "0", 10: "10", 20: "20", 30: "30",
      40: "40", 50: "50", 100: "100", 990: "990", sticky: "1020",
    },
    container: {
      center: true,
      padding: "1.5rem",
    },
    extend: {},
  },
  plugins: [
    plugin(function ({ addComponents, addUtilities }) {
      addUtilities({
        ".flex-wrap-inherit": { "flex-wrap": "inherit" },
        ".transform3d": {
          transform: "perspective(999px) rotateX(0deg) translateZ(0)",
        },
        ".transform3d-hover": {
          transform: "perspective(999px) rotateX(7deg) translate3d(0,-4px,5px)",
        },
      });
      addComponents({
        "h1, h2, h3, h4, h5, h6": {
          "margin-bottom": ".5rem",
          color: "#344767",
        },
        "h1, h2, h3": { "font-weight": "700", "letter-spacing": "-0.05rem" },
        "h4, h5, h6": { "font-weight": "600" },
        h1: { "font-size": "3rem", "line-height": "1.25" },
        h2: { "font-size": "2.25rem", "line-height": "1.3" },
        h3: { "font-size": "1.875rem", "line-height": "1.375" },
        h4: { "font-size": "1.5rem", "line-height": "1.375" },
        h5: { "font-size": "1.25rem", "line-height": "1.375" },
        h6: { "font-size": "1rem", "line-height": "1.625" },
        p: { "line-height": "1.625", "font-weight": "400", "margin-bottom": "1rem" },
        label: { display: "inline-block" },
        hr: { margin: "1rem 0", border: "0", opacity: ".25" },
      });
    }),
    plugin(function ({ matchUtilities, theme }) {
      matchUtilities({
        "bg-gradient": (angle) => ({
          "background-image": `linear-gradient(${angle}, var(--tw-gradient-stops))`,
        }),
      });
    }),
  ],
};