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


const navyColor = {
  50: "#EBF0F7",
  100: "#CBD8E6",
  200: "#AEBFD4",
  300: "#6F85A5",
  400: "#526B91",
  450: "#3F5676",
  500: "#334564",
  600: "#2C3D55",
  700: "#233143",
  750: "#202C3B",
  800: "#1D2734",
  900: "#151D27",
};


const customColors = {
  navy: navyColor,
  "slate-150": "#F8F9FA",
  "slate-300": "#E2E6EA", // หัว table
  primary: "#2D6A4F", // สีเขียวเข้ม
  "primary-focus": "#1B4332",
  "secondary-light": "#C4F1D3", // สีเขียวอ่อน
  secondary: "#F8F9FA", // background
  "secondary-focus": "#E2E6EA",
  "accent-light": "#FFC107",
  accent: "#FFC107",
  "accent-focus": "#E0A800",
  info: "#1c3334",
  "info-focus": "#1c3524",
  success: "#28A745",
  "success-focus": "#218838",
  warning: "#FFC107",
  "warning-focus": "#E0A800",
  error: "#DC3545",
  "error-focus": "#C82333",
  "slate-100": "#2D6A4F",
};
module.exports = {
  content: [
    "./src/**/*.{php,html,js,jsx,ts,tsx,vue}",
    "./resources/**/*.{php,html,js,jsx,ts,tsx,vue}",
    "./storage/framework/views/*.php",
  ],
  mode: "jit",
  darkMode: "class",
  theme: {
    extend: {
      fontFamily: {
        sans: ["Sarabun", ...defaultTheme.fontFamily.sans],
        inter: ["Inter", ...defaultTheme.fontFamily.sans],
      },
      fontSize: {
        tiny: ["0.625rem", "0.8125rem"],
        "tiny+": ["0.6875rem", "0.875rem"],
        "xs+": ["0.8125rem", "1.125rem"],
        "sm+": ["0.9375rem", "1.375rem"],
      },
      colors: { ...customColors },
      opacity: {
        15: ".15",
      },
      spacing: {
        4.5: "1.125rem",
        5.5: "1.375rem",
        18: "4.5rem",
      },
      boxShadow: {
        soft: "0 3px 10px 0 rgb(48 46 56 / 6%)",
        "soft-dark": "0 3px 10px 0 rgb(25 33 50 / 30%)",
      },
      zIndex: {
        1: "1",
        2: "2",
        3: "3",
        4: "4",
        5: "5",
      },
      keyframes: {
        "fade-out": {
          "0%": {
            opacity: 1,
            visibility: "visible",
          },
          "100%": {
            opacity: 0,
            visibility: "hidden",
          },
        },
      },
    },
  },
  corePlugins: {
    textOpacity: false,
    backgroundOpacity: false,
    borderOpacity: false,
    divideOpacity: false,
    placeholderOpacity: false,
    ringOpacity: false,
  },
  plugins: [
    require("@tailwindcss/line-clamp")
  ],
};