/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "../../packages/app-store/**/{components,pages}/**/*.{js,ts,jsx,tsx}",
    "../../packages/features/**/*.{js,ts,jsx,tsx}",
    "../../packages/ui/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: "class",
  theme: {
    fontFamily: {
      cal: ['"Cal Sans"', "sans-serif"],
      mono: ["Roboto Mono", "monospace"],
      sans: ['"Inter var"', "sans-serif"],
    },
    extend: {
      colors: {
        /* your primary brand color */
        brand: {
          // TODO: To be shared between Storybook for v2 UI components and web
          // Figure out a way to automate this for self hosted users
          // Goto https://javisperez.github.io/tailwindcolorshades to generate your brand color
          50: "#d1d5db",
          100: "#9ca3af",
          200: "#6b7280",
          300: "#4b5563",
          400: "#374151",
          500: "#111827", // Brand color
          600: "#0f1623",
          700: "#0d121d",
          800: "#0a0e17",
          900: "#080c13",
          DEFAULT: "#111827",
        },
        brandcontrast: "var(--brand-text-color)",
        darkmodebrand: "var(--brand-color-dark-mode)",
        darkmodebrandcontrast: "var(--brand-text-color-dark-mode)",
        bookinglightest: "var(--booking-lightest-color)",
        bookinglighter: "var(--booking-lighter-color)",
        bookinglight: "var(--booking-light-color)",
        bookingmedian: "var(--booking-median-color)",
        bookingdark: "var(--booking-dark-color)",
        bookingdarker: "var(--booking-darker-color)",
        bookinghighlight: "var(--booking-highlight-color)",
        black: "#111111",
        gray: {
          50: "#F8F8F8",
          100: "#F5F5F5",
          200: "#E1E1E1",
          300: "#CFCFCF",
          400: "#ACACAC",
          500: "#888888",
          600: "#494949",
          700: "#3E3E3E",
          800: "#313131",
          900: "#292929",
        },
        neutral: {
          50: "#F8F8F8",
          100: "#F5F5F5",
          200: "#E1E1E1",
          300: "#CFCFCF",
          400: "#ACACAC",
          500: "#888888",
          600: "#494949",
          700: "#3E3E3E",
          800: "#313131",
          900: "#292929",
        },
        primary: {
          50: "#F4F4F4",
          100: "#E8E8E8",
          200: "#C6C6C6",
          300: "#A3A3A3",
          400: "#5F5F5F",
          500: "#1A1A1A",
          600: "#171717",
          700: "#141414",
          800: "#101010",
          900: "#0D0D0D",
        },
        secondary: {
          50: "#F5F8F7",
          100: "#EBF0F0",
          200: "#CDDAD9",
          300: "#AEC4C2",
          400: "#729894",
          500: "#356C66",
          600: "#30615C",
          700: "#28514D",
          800: "#20413D",
          900: "#223B41",
        },
        red: {
          50: "#FEF2F2",
          100: "#FEE2E2",
          200: "#FECACA",
          300: "#FCA5A5",
          400: "#F87171",
          500: "#EF4444",
          600: "#DC2626",
          700: "#B91C1C",
          800: "#991B1B",
          900: "#7F1D1D",
        },
        orange: {
          50: "#FFF7ED",
          100: "#FFEDD5",
          200: "#FED7AA",
          300: "#FDBA74",
          400: "#FB923C",
          500: "#F97316",
          600: "#EA580C",
          700: "#C2410C",
          800: "#9A3412",
          900: "#7C2D12",
        },
        green: {
          50: "#ECFDF5",
          100: "#D1FAE5",
          200: "#A7F3D0",
          300: "#6EE7B7",
          400: "#34D399",
          500: "#10B981",
          600: "#059669",
          700: "#047857",
          800: "#065F46",
          900: "#064E3B",
        },
      },
      fontFamily: {
        cal: ['"Cal Sans"', "sans-serif"],
        mono: ["Roboto Mono", "monospace"],
        sans: ['"Inter var"', "sans-serif"],
      },
      maxHeight: (theme) => ({
        0: "0",
        97: "25rem",
        ...theme("spacing"),
        full: "100%",
        screen: "100vh",
      }),
      minHeight: (theme) => ({
        0: "0",
        ...theme("spacing"),
        full: "100%",
        screen: "100vh",
      }),
      minWidth: (theme) => ({
        0: "0",
        ...theme("spacing"),
        full: "100%",
        screen: "100vw",
      }),
      maxWidth: (theme, { breakpoints }) => ({
        0: "0",
        ...theme("spacing"),
        ...breakpoints(theme("screens")),
        full: "100%",
        screen: "100vw",
      }),
    },
  },
  plugins: [
    require("@tailwindcss/forms"),
    require("@tailwindcss/typography"),
    require("@tailwindcss/line-clamp"),
  ],
};