import type { Config } from "tailwindcss";

const config: Config = {
  darkMode: "class",
  content: [
    "./node_modules/flowbite-react/lib/**/*.js",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./shared/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/react-tailwindcss-select/dist/index.esm.js",
  ],
  theme: {
    colors: {
      primary: "#70192C",
      secondary: "#1C2D37",
      thirdy: "#d8C09B;",
      dark: "#171717",
      secondrydark: "#323232",
      grey: "#F5F5F5",
      border: "#CACACA",
      placeholder: "#BDC1DF",
      line: "#F5F6FF",
      white: "#ffffff",
      text: "#0B0608",
      textgrey: "#636363",
      "text-light": "var(--website_light_font_color)",
      greynormal: "#495059",
      footer: "#1E1E1E",
      error: "#EF233C",
      sub: "#8B9693",

      transparent: "transparent",
      current: "currentColor",
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
    },
    keyframes: {
      "accordion-down": {
        from: { height: "0" },
        to: { height: "var(--radix-accordion-content-height)" },
      },
      "accordion-up": {
        from: { height: "var(--radix-accordion-content-height)" },
        to: { height: "0" },
      },
      spin: {
        "0%, 100%": { transform: "rotate(-3deg)" },
        "50%": { transform: "rotate(3deg)" },
      },
    },
    animation: {
      "accordion-down": "accordion-down 0.2s ease-out",
      "accordion-up": "accordion-up 0.2s ease-out",
      spin: "spin 3s linear infinite",
      puls: " .3 transform  ease-in-out ",
    },
    screens: {
      xs: "475px",

      sm: "576px",
      // => @media (min-width: 640px) { ... }

      md: "768px",
      // => @media (min-width: 768px) { ... }

      lg: "992px",
      // => @media (min-width: 992px) { ... }

      xl: "1200px",
      // => @media (min-width: 1280px) { ... }

      "2xl": "1400px",
      // '3xl': '1600px',
    },
    opacity: {
      "2": ".2",
      "5": "0.05",
      "04": ".04",
      "02": ".02",
      "0": "0",
      "25": ".25",
      "50": ".5",
      "75": ".75",
      "10": ".1",
      "20": ".2",
      "30": ".3",
      "40": ".4",
      "60": ".6",
      "70": ".7",
      "80": ".8",
      "90": ".9",
      "100": "1",
    },
    fontFamily: {
      switzer: ["Switzer", "sans-serif"],
      din: ["Din", "sans-serif"],
      Cairo: ["Cairo", "sans-serif"],
      allura: ["Allura", "sans-serif"],
      alex: ["Alex", "sans-serif"],
      SchibstedGrotesk: ["SchibstedGrotesk", "sans-serif"],
      Montserrat: ["Montserrat", "sans-serif"],
    },
    minHeight: {
      "3/4": "75%",
    },
    maxWidth: {
      "3/4": "75%",
    },
    boxShadow: {
      none: "none",
      "card-shadow": "0px 7px 58px 0px #b1b1b11a",
    },
    extend: {
      transitionProperty: {
        "font-weight": "font-weight",
      },
    },
    variants: {
      extend: {
        fontWeight: ["hover", "focus"],
      },
    },
    container: {
      center: true,
      padding: {
        DEFAULT: "1rem",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
};
export default config;