import type { Config } from "tailwindcss";

export default {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/modules/**/*.{js,ts,jsx,tsx}",
    "./src/zustand/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-outfit)"],
      },
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",

        // Business colors
        primary: "#02bc71", // Primary #02bc71
        secondary: "#038700", // Tertiary #038700
        tertiary: "#F7F1F7", // Tertiary #F7F1F7

        // Sensory colors
        info: "#3E56FF", // Info #3E56FF
        success: "#11BC78", // Success #11BC78
        warning: "#FFA500", // Warning #FFA500
        error: "#DC4652", // Error #DC4652

        // Neutral colors
        neutral: {
          "black-87": "#212121", // Neutral Dark (Primary black 87)
          "black-70": "#4D4D4D", // Neutral Medium-Dark (Secondary black 70)
          "black-54": "#757575", // Neutral Medium (Muted black 54)
          "black-30": "#B2B2B2", // Neutral Light (Border 30)
          "black-12": "#E0E0E0", // Neutral Extra-Light (Separator 12)
          "black-4": "#F2F2F2", // Neutral Background (Background 4)
        },
      },
      fontSize: {
        // Mobile Typography
        "display-mobile": ["28px", { lineHeight: "42px", fontWeight: "600" }],
        "h1-mobile": ["24px", { lineHeight: "36px", fontWeight: "600" }],
        "h2-mobile": ["20px", { lineHeight: "30px", fontWeight: "600" }],
        "title-mobile": ["18px", { lineHeight: "26px", fontWeight: "600" }],
        "body1-mobile": ["15px", { lineHeight: "22px", fontWeight: "400" }],
        "body2-mobile": ["13px", { lineHeight: "20px", fontWeight: "400" }],
        "caption1-mobile": ["11px", { lineHeight: "16px", fontWeight: "400" }],
        "caption2-mobile": ["9px", { lineHeight: "14px", fontWeight: "500" }],

        // Desktop Typography
        "display-desktop": ["52px", { lineHeight: "42px", fontWeight: "600" }],
        "h1-desktop": ["32px", { lineHeight: "36px", fontWeight: "600" }],
        "h2-desktop": ["24px", { lineHeight: "30px", fontWeight: "600" }],
        "title-desktop": ["20px", { lineHeight: "26px", fontWeight: "600" }],
        "body1-desktop": ["18px", { lineHeight: "22px", fontWeight: "400" }],
        "body2-desktop": ["15px", { lineHeight: "22px", fontWeight: "400" }],
        "body3-desktop": ["13px", { lineHeight: "20px", fontWeight: "400" }],
        "caption1-desktop": ["11px", { lineHeight: "16px", fontWeight: "400" }],
        "caption2-desktop": ["9px", { lineHeight: "14px", fontWeight: "500" }],
      },

      screens: {
        xs: "360px",
        sm: "640px",
        md: "768px",
        lg: "1024px",
        xl: "1280px",
        "2xl": "1440px",
      },
    },
  },
  plugins: [require("tailwindcss-radix")()],
} satisfies Config;