import type { Config } from "tailwindcss";
import forms from "@tailwindcss/forms";

export default {
  content: ["./src/**/*.{ts,tsx}"],
  // Prefix to avoid conflicts with WordPress admin CSS
  prefix: "vr-",
  theme: {
    extend: {
      colors: {
        primary: {
          50: "#FCEDF1",
          100: "#FADCE3",
          200: "#F4B8C6",
          300: "#F099AD",
          400: "#EA7691",
          500: "#E55274",
          600: "#E03058",
          700: "#B11B3E",
          800: "#78122A",
          900: "#3A0914",
          950: "#1F050B",
        },
        secondary: {
          50: "#efeeff",
          100: "#e2e0ff",
          200: "#cac7fe",
          300: "#aaa5fc",
          400: "#8881f8",
          500: "#6b63f1",
          600: "#4f46e5",
          700: "#4038ca",
          800: "#3730a3",
          900: "#332e81",
          950: "#1e1b4b",
        },
        tertiary: {
          50: "#eafff8",
          100: "#cdfeec",
          200: "#a0fade",
          300: "#63f2cd",
          400: "#25e2b8",
          500: "#25e2b8",
          600: "#00a485",
          700: "#00836e",
          800: "#006758",
          900: "#00554a",
          950: "#00302b",
        },
      },
      fontSize: {
        xs: ["0.8125rem", { lineHeight: "1.25rem" }],   // 13px (up from 12px)
        sm: ["0.875rem", { lineHeight: "1.375rem" }],    // 14px (unchanged)
      },
    },
  },
  plugins: [forms],
} satisfies Config;