/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./*.html",
    "./pages/**/*.html",
    "./components/**/*.html",
    "./**/*.js",
  ],
  corePlugins: {
    preflight: false,
  },

  safelist: [
    // Core color utilities
    {
      pattern:
        /(bg|text|border|ring|stroke|fill)-(primary|secondary|tertiary|white|black)/,
      variants: ["hover", "focus", "active", "disabled", "visited"],
    },

    // Group / Peer / State variants (THIS is the missing piece)
    {
      pattern: /(bg|text|border|ring|shadow)-(.*)/,
      variants: [
        "hover",
        "focus",
        "active",
        "group-hover",
        "group-focus",
        "peer-hover",
        "peer-focus",
        "peer-checked",
        "checked",
        "focus-visible",
        "aria-selected",
        "aria-expanded",
      ],
    },

    // Layout & display toggles often used via JS
    {
      pattern: /(hidden|block|inline-block|flex|inline-flex|grid|inline-grid)/,
      variants: ["sm", "md", "lg", "xl"],
    },

    // Responsive variants
    {
      pattern: /(.*)/,
      variants: ["sm", "md", "lg", "xl"],
    },
  ],

  theme: {
    extend: {
      colors: {
        primary: "#281900",
        "primary-container": "#5E513B",

        secondary: "#B38B59",
        "secondary-container": "#E8D4B0",

        tertiary: "#C09040",
        "tertiary-container": "#DCC39D",

        background: "#F8F3EB",
        surface: "#FFFFFF",

        "surface-bright": "#FFFFFF",
        "surface-dim": "#E8DCCB",

        "surface-container-lowest": "#FFFFFF",
        "surface-container-low": "#FCF8F2",
        "surface-container": "#efe2cf",
        "surface-container-high": "#EFE5D6",
        "surface-container-highest": "#E8DCCB",

        outline: "#C7B8A2",
        "outline-variant": "#DDD2C2",

        "on-primary": "#FFFFFF",
        "on-primary-container": "#F8F3EB",
        "on-primary-fixed": "#4C412E",
        "on-primary-fixed-variant": "#6E5E46",

        "on-secondary": "#FFFFFF",
        "on-secondary-container": "#6B5638",
        "on-secondary-fixed": "#5A4528",
        "on-secondary-fixed-variant": "#7A6548",

        "on-background": "#2F2925",
        "on-surface": "#2F2925",
        "on-surface-variant": "#5C554E",

        "surface-tint": "#B38B59",

        "inverse-primary": "#E8DCCB",
        "inverse-surface": "#3A3228",
        "inverse-on-surface": "#F8F3EB",

        "primary-fixed": "#E8DCCB",
        "primary-fixed-dim": "#D8C6B5",

        "secondary-fixed": "#F1E3D6",
        "secondary-fixed-dim": "#D8B57A",

        "tertiary-fixed": "#E8D4B0",
        "tertiary-fixed-dim": "#D8B57A",

        "on-tertiary": "#FFFFFF",
        "on-tertiary-container": "#FFF8EE",
        "on-tertiary-fixed": "#4A3A24",
        "on-tertiary-fixed-variant": "#6B5638",

        error: "#BA1A1A",
        "error-container": "#FFDAD6",
        "on-error": "#FFFFFF",
        "on-error-container": "#93000A",

        "clinical-blue": "#2b1c02", // kept for compatibility
      },
      borderRadius: {
        DEFAULT: "0.25rem",
        lg: "0.5rem",
        xl: "0.75rem",
        full: "9999px",
      },
      fontFamily: {
        "headline-lg-mobile": ["Plus Jakarta Sans"],
        "body-md": ["Inter"],

        "body-lg": ["Inter"],
      },
      spacing: {
        md: "24px",
        gutter: "24px",
        lg: "48px",
        xs: "4px",
        xl: "80px",
        sm: "12px",
        base: "8px",
        margin: "32px",
      },
      fontSize: {
        "headline-lg-mobile": [
          "32px",
          { lineHeight: "40px", fontWeight: "600" },
        ],
        "body-md": ["16px", { lineHeight: "26px", fontWeight: "400" }],
        "headline-md": ["32px", { lineHeight: "40px", fontWeight: "500" }],
        "display-xl": [
          "72px",
          {
            lineHeight: "80px",
            letterSpacing: "-0.04em",
            fontWeight: "300",
          },
        ],
        "display-lg": [
          "56px",
          {
            lineHeight: "64px",
            letterSpacing: "-0.02em",
            fontWeight: "300",
          },
        ],
        "headline-lg": [
          "40px",
          {
            lineHeight: "48px",
            letterSpacing: "-0.01em",
            fontWeight: "500",
          },
        ],
        "label-sm": [
          "12px",
          {
            lineHeight: "16px",
            letterSpacing: "0.1em",
            fontWeight: "600",
          },
        ],
        "body-lg": ["20px", { lineHeight: "32px", fontWeight: "400" }],
      },
    },
  },
  variants: {
    extend: {
      backgroundColor: [
        "hover",
        "focus",
        "active",
        "group-hover",
        "peer-checked",
      ],
      textColor: ["hover", "focus", "active", "group-hover", "peer-checked"],
      borderColor: ["hover", "focus", "active", "group-hover", "peer-checked"],
      ringColor: ["hover", "focus", "active"],
    },
  },

  plugins: [],
};
