import type { Config } from "tailwindcss";
import { COLORS } from "./src/branding/colors";

const config: Config = {
  darkMode: "class",
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/features/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: COLORS.primary,
          light: COLORS.primaryLight,
          dark: COLORS.primaryDark,
        },
        secondary: {
          DEFAULT: COLORS.secondary,
          light: COLORS.secondaryLight,
          dark: COLORS.secondaryDark,
        },
        neutral: {
          dark: COLORS.neutralDark,
          light: COLORS.neutralLight,
        },
        base: {
          black: COLORS.black,
          white: COLORS.white,
        },
        dt: {
          bg: COLORS.dark.bg,
          card: COLORS.dark.surface,
          deep: COLORS.dark.deep,
          border: COLORS.dark.border,
          "border-soft": "rgba(255,255,255,0.05)",
          text: "#ffffff",
          muted: "#999999",
          dim: "#666666",
          "accent-soft": `rgba(var(--accent-rgb), 0.12)`,
        },
      },
      fontFamily: {
        sans: ["Inter", "sans-serif"],
      },
      keyframes: {
        pulse: {
          "0%": { boxShadow: "0 0 0 0 rgba(217,48,37,0.6)" },
          "70%": { boxShadow: "0 0 0 8px rgba(217,48,37,0)" },
          "100%": { boxShadow: "0 0 0 0 rgba(217,48,37,0)" },
        },
        "fade-in": {
          from: { opacity: "0" },
          to: { opacity: "1" },
        },
      },
      animation: {
        "live-dot": "pulse 1.6s ease-out infinite",
        "fade-in": "fade-in 180ms ease",
      },
    },
  },
  plugins: [],
};

export default config;