import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        brand: {
          navy: "#0F2B5B",        // Primary Brand / Sidebar Header
          "navy-dark": "#0A1D3D",   // Deep Navy / Active Hover
          "navy-light": "#1A3D7C",  // Subtle Navy tint
          blue: "#2563EB",        // Primary Action / CTA
          "blue-secondary": "#3B82F6", // Interactive Hover
          "blue-light": "#EFF6FF", // Soft Blue Background / Active Pill
          bg: "#F8FAFC",          // Page Background
          surface: "#FFFFFF",     // Card / Container Surface
          text: "#0F172A",        // Primary Text (Slate 900)
          secondary: "#64748B",   // Muted Text (Slate 500)
          border: "#E2E8F0",      // Thin Border (Slate 200)
          success: "#16A34A",     // Status Success
          warning: "#D97706",     // Status Warning
          danger: "#DC2626",      // Status Danger
        },
      },
      fontFamily: {
        sans: ["var(--font-sans)", "Inter", "Plus Jakarta Sans", "system-ui", "sans-serif"],
      },
      spacing: {
        "1": "4px",
        "2": "8px",
        "3": "12px",
        "4": "16px",
        "5": "20px",
        "6": "24px",
        "8": "32px",
        "10": "40px",
        "12": "48px",
      },
      borderRadius: {
        sm: "6px",
        DEFAULT: "8px",
        md: "8px",
        lg: "12px",
        xl: "16px",
      },
      boxShadow: {
        card: "0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04)",
        dropdown: "0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04)",
        modal: "0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.05)",
      },
    },
  },
  plugins: [],
};

export default config;