import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        // Primary
        "foodifly-orange": "#FF5C00",
        "foodifly-orange-dark": "#CC4900",

        // Status Colors
        success: "#22C55E",
        "success-dark": "#16A34A",
        warning: "#FBBF24",
        error: "#EF4444",
        info: "#3B82F6",

        // Backgrounds
        "bg-light": "#FFFFFF",
        "bg-surface": "#F7F7F7",
        "bg-dark": "#0F0F0F",
        "surface-dark": "#1A1A1A",

        // Text (admin tokens)
        "text-primary": "#111827",
        "text-secondary": "#374151",
        "text-hint": "#9CA3AF",
        "text-muted": "#6B7280",

        // Borders & Dividers
        divider: "#F0F0F0",
        "divider-dark": "#2A2A2A",
        border: "#E5E7EB",

        // Special
        "star-gold": "#FFC107",
        offline: "#9CA3AF",
      },
      fontFamily: {
        sans: ["var(--font-inter)", "system-ui", "sans-serif"],
        poppins: ["var(--font-inter)", "sans-serif"],
        "dm-sans": ["var(--font-inter)", "sans-serif"],
        mono: ["var(--font-jetbrains-mono)", "monospace"],
      },
      fontSize: {
        "page-title": ["20px", { fontWeight: "600", lineHeight: "1.3" }],
        "section-hd": ["15px", { fontWeight: "600", lineHeight: "1.4" }],
        body: ["14px", { fontWeight: "400", lineHeight: "1.5" }],
        muted: ["13px", { fontWeight: "400", lineHeight: "1.5" }],
        caption: ["12px", { fontWeight: "400", lineHeight: "1.4" }],
        label: ["11px", { fontWeight: "500", lineHeight: "1.4" }],
      },
      spacing: {
        xs: "4px",
        sm: "8px",
        md: "12px",
        base: "16px",
        lg: "20px",
        xl: "24px",
        xxl: "32px",
        xxxl: "48px",
      },
      borderRadius: {
        sm: "8px",
        md: "12px",
        lg: "16px",
        xl: "24px",
        full: "999px",
      },
      boxShadow: {
        card: "0 4px 12px rgba(0, 0, 0, 0.06)",
        modal: "0 -4px 24px rgba(0, 0, 0, 0.15)",
        focus: "0 0 0 3px rgba(255, 92, 0, 0.2)",
      },
      backgroundColor: {
        "badge-active": "#DCFCE7",
        "badge-pending": "#FEF9C3",
        "badge-error": "#FEE2E2",
        "badge-inactive": "#F3F4F6",
        "badge-info": "#DBEAFE",
      },
      textColor: {
        "badge-active": "#15803D",
        "badge-pending": "#A16207",
        "badge-error": "#DC2626",
        "badge-inactive": "#6B7280",
        "badge-info": "#1D4ED8",
      },
    },
  },
  plugins: [],
};

export default config;