/** @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: {
              "on-tertiary-fixed-variant": "#004e5a",
              "clinical-blue": "#0f4c81", // David Gouett Dentistry blue
              "on-primary-fixed-variant": "#00497a",
              error: "#ba1a1a",
              primary: "#005c97",
              "on-secondary-fixed": "#001d33",
              background: "#f7fafb",
              "tertiary-fixed-dim": "#62d6ed",
              "surface-container-low": "#f1f4f5",
              "on-tertiary": "#ffffff",
              "surface-container-high": "#e5e9ea",
              surface: "#f7fafb",
              "surface-tint": "#0062a0",
              secondary: "#3e6183",
              "on-surface": "#181c1d",
              "surface-container-lowest": "#ffffff",
              "on-primary-container": "#f3f7ff",
              "surface-dim": "#d7dadc",
              "primary-fixed": "#d0e4ff",
              "on-secondary": "#ffffff",
              "on-primary-fixed": "#001d35",
              "primary-fixed-dim": "#9ccaff",
              "primary-container": "#0f75bc",
              "outline-variant": "#c0c7d2",
              "inverse-primary": "#9ccaff",
              "on-error": "#ffffff",
              "on-secondary-fixed-variant": "#25496a",
              "surface-container": "#ebeeef",
              "surface-variant": "#e0e3e4",
              "on-primary": "#ffffff",
              "on-tertiary-container": "#e5faff",
              "on-tertiary-fixed": "#001f25",
              "tertiary-fixed": "#a4eeff",
              tertiary: "#006170",
              "surface-container-highest": "#e0e3e4",
              "secondary-fixed-dim": "#a7caf0",
              "on-background": "#181c1d",
              "surface-bright": "#f7fafb",
              "on-error-container": "#93000a",
              "inverse-on-surface": "#eef1f2",
              "tertiary-container": "#007c8e",
              "inverse-surface": "#2d3132",
              "secondary-container": "#b4d8ff",
              "error-container": "#ffdad6",
              outline: "#717882",
              "on-secondary-container": "#3b5e80",
              "secondary-fixed": "#cfe5ff",
              "on-surface-variant": "#404751",
              surface: "#f7f9fb",
              secondary: "#006686",
              "on-secondary-container": "#005b78",
              "outline-variant": "#c2c7d1",
              "on-secondary-fixed-variant": "#004d65",
              "on-error": "#ffffff",
              "inverse-surface": "#2d3133",
              "tertiary-fixed": "#d7e2ff",
              "surface-container": "#eceef0",
              "primary-fixed": "#d2e4ff",
              "on-surface-variant": "#42474f",
              "on-secondary-fixed": "#001f2b",
              "on-primary-fixed-variant": "#07497d",
              "surface-container-low": "#f2f4f6",
              "surface-bright": "#f7f9fb",
              "on-tertiary-fixed-variant": "#00458f",
              "tertiary-container": "#004895",
              "surface-variant": "#e0e3e5",
              "surface-dim": "#d8dadc",
              "inverse-primary": "#a0c9ff",
              "surface-container-highest": "#e0e3e5",
              "on-primary": "#ffffff",
              "on-primary-fixed": "#001c37",
              "on-error-container": "#93000a",
              outline: "#727780",
              "primary-fixed-dim": "#a0c9ff",
              "on-secondary": "#ffffff",
              "inverse-on-surface": "#eff1f3",
              "secondary-container": "#7dd4fd",
              "secondary-fixed": "#bfe8ff",
              "on-primary-container": "#8ebdf9",
              background: "#f7f9fb",
              "primary-container": "#0f4c81",
              "on-tertiary": "#ffffff",
              "on-background": "#191c1e",
              "tertiary-fixed-dim": "#abc7ff",
              "on-tertiary-fixed": "#001b3f",
              "surface-tint": "#2d6197",
              "secondary-fixed-dim": "#7ad1fa",
              "surface-container-high": "#e6e8ea",
              "surface-container-lowest": "#ffffff",
              "on-surface": "#191c1e",
              primary: "#00355f",
              "on-tertiary-container": "#96baff",
              "error-container": "#ffdad6",
              error: "#ba1a1a",
              tertiary: "#00326b",
            },
            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: [],
  
};
