import type { Config } from "tailwindcss";

export const NiceTailwindConfig: Config = {
	content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
	theme: {
		extend: {
			colors: {
				// 主色调 - 优雅蓝（清新雅致）
				primary: {
					50: "#f0f7ff",
					100: "#e0f0ff",
					150: "#cce7ff",
					200: "#b3ddff",
					250: "#99d3ff",
					300: "#66bfff",
					350: "#47b3ff",
					400: "#1ca6ff",
					500: "#0088E8", // 主色调
					600: "#0070cc",
					700: "#0058a3",
					800: "#004080",
					900: "#002847",
					DEFAULT: "#0088E8",
				},
				// 辅助色 - 温和灰（内容展示）
				secondary: {
					50: "#fafafa",
					100: "#f5f5f5",
					200: "#eeeeee",
					300: "#e0e0e0",
					350: "#d4d4d4",
					400: "#bdbdbd",
					500: "#9e9e9e",
					600: "#757575",
					700: "#616161",
					800: "#424242",
					900: "#212121",
					DEFAULT: "#757575",
				},
				// 强调色 - 活力橙（重要操作、交互）
				accent: {
					50: "#fff4e5",
					100: "#ffe8cc",
					200: "#ffd699",
					300: "#ffc466",
					400: "#ffb333",
					500: "#ffa200",
					600: "#cc8200",
					700: "#996100",
					800: "#664100",
					900: "#332000",
					DEFAULT: "#ffa200",
				},
				// 功能色（协调搭配）
				success: "#4caf50",
				warning: "#ff9800",
				danger: "#f44336",
				info: "#03a9f4",
			},
			fontFamily: {
				sans: [
					"PingFang SC",
					"Microsoft YaHei",
					"Helvetica Neue",
					"system-ui",
					"sans-serif",
				],
				heading: [
					"PingFang SC",
					"Microsoft YaHei",
					"Helvetica Neue",
					"sans-serif",
				],
				mono: ["Source Code Pro", "monospace"],
			},
			spacing: {
				"72": "18rem",
				"84": "21rem",
				"96": "24rem",
			},
			borderRadius: {
				xl: "1rem",
				"2xl": "2rem",
				"3xl": "3rem",
			},
			boxShadow: {
				outline: "0 0 0 3px rgba(0, 136, 232, 0.4)",
				solid: "2px 2px 0 0 rgba(0, 0, 0, 0.1)",
				glow: "0 0 8px rgba(0, 136, 232, 0.4)",
				inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)",
				"elevation-1": "0 1px 2px rgba(0, 0, 0, 0.05)",
				"elevation-2": "0 2px 4px rgba(0, 0, 0, 0.1)",
				"elevation-3": "0 4px 8px rgba(0, 0, 0, 0.1)",
				"elevation-4": "0 8px 16px rgba(0, 0, 0, 0.1)",
				"elevation-5": "0 16px 32px rgba(0, 0, 0, 0.1)",
				panel: "0 2px 4px rgba(0, 0, 0, 0.05)",
				button: "0 2px 4px rgba(0, 0, 0, 0.1)",
				card: "0 2px 8px rgba(0, 0, 0, 0.08)",
				modal: "0 4px 16px rgba(0, 0, 0, 0.1)",
				"video-thumbnail": "0 2px 4px rgba(0, 0, 0, 0.1)",
				"hover-card": "0 4px 8px rgba(0, 0, 0, 0.08)",
				"player-controls": "0 -2px 8px rgba(0, 0, 0, 0.1)",
				"floating-player": "0 4px 12px rgba(0, 0, 0, 0.1)",
			},
			animation: {
				"pulse-slow": "pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite",
				"spin-slow": "spin 3s linear infinite",
				"fade-in": "fadeIn 0.3s ease-in-out",
				"slide-up": "slideUp 0.4s ease-out",
			},
			keyframes: {
				fadeIn: {
					"0%": { opacity: "0" },
					"100%": { opacity: "1" },
				},
				slideUp: {
					"0%": { transform: "translateY(10px)", opacity: "0" },
					"100%": { transform: "translateY(0)", opacity: "1" },
				},
			},
			transitionDuration: {
				"2000": "2000ms",
				"3000": "3000ms",
			},
			screens: {
				"3xl": "1920px",
				"4xl": "2560px",
			},
		},
	},
	plugins: [],
};