/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{ts,tsx}"],
  theme: {
    extend: {
      colors: {
        // 底色：暖白纸面，不用纯白，避免刺眼、也让卡片有层次
        paper: {
          50: "#F9FAFC",
          100: "#F3F5F9",
          200: "#E9EDF3",
          300: "#DFE5ED",
        },
        // 分隔线与描边（冷灰，跟蓝主色同一个中性轴）
        line: {
          100: "#EDEFF3",
          200: "#E2E6EC",
          300: "#D3D9E1",
        },
        // 文字与中性
        ink: {
          50: "#F6F8FA",
          100: "#E9EEF3",
          200: "#D7DEE7",
          300: "#B8C2CE",
          400: "#929EAD",
          500: "#6C7788",
          600: "#4E5867",
          700: "#3A4352",
          800: "#262D39",
          900: "#161C25",
        },
        // 主色：景泰蓝（沉一点的靛蓝），克制、有"工作台"气质，避开任务工具常见的荧光蓝
        primary: {
          50: "#EFF5FB",
          100: "#DCE9F7",
          200: "#B9D3EC",
          300: "#8FB6DD",
          400: "#6094C8",
          500: "#3E76AC",
          600: "#2E5D8D",
          700: "#274B73",
          800: "#1F3B5B",
          900: "#1A2F48",
        },
        // 强调色：陶土橙，只用在"需要人注意"的地方
        clay: {
          50: "#FBF2EB",
          100: "#F5DFCE",
          200: "#EBC1A2",
          300: "#DFA176",
          400: "#D08454",
          500: "#C2703D",
          600: "#A65B2F",
          700: "#854926",
          800: "#65381E",
          900: "#472716",
        },
        sage: { 500: "#2F7D5E", 50: "#EAF4EF" },
        wheat: { 500: "#A97C25", 50: "#F8F1E2" },
        rust: { 500: "#B04A32", 50: "#FAEDE9" },
        // 信息色：比主色更亮更青一档，免得和 primary 的「进行中」糊在一起
        sky: { 500: "#2F86B0", 50: "#E8F4FA" },
      },
      fontFamily: {
        sans: [
          "Inter",
          "-apple-system",
          "PingFang SC",
          "HarmonyOS Sans SC",
          "Microsoft YaHei",
          "system-ui",
          "sans-serif",
        ],
        display: ["Inter", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "sans-serif"],
        mono: ["JetBrains Mono", "SFMono-Regular", "Consolas", "monospace"],
      },
      fontSize: {
        "2xs": ["11px", { lineHeight: "16px", letterSpacing: "0.02em" }],
        xs: ["12px", { lineHeight: "18px" }],
        sm: ["13px", { lineHeight: "20px" }],
        base: ["14px", { lineHeight: "22px" }],
        lg: ["16px", { lineHeight: "24px" }],
        xl: ["18px", { lineHeight: "26px", letterSpacing: "-0.01em" }],
        "2xl": ["22px", { lineHeight: "30px", letterSpacing: "-0.02em" }],
        "3xl": ["28px", { lineHeight: "36px", letterSpacing: "-0.02em" }],
        "4xl": ["36px", { lineHeight: "42px", letterSpacing: "-0.03em" }],
      },
      borderRadius: {
        md: "8px",
        lg: "10px",
        xl: "14px",
        "2xl": "18px",
        "3xl": "24px",
      },
      boxShadow: {
        card: "0 1px 2px rgba(20,27,36,0.04), 0 8px 24px -16px rgba(20,27,36,0.35)",
        pop: "0 2px 6px rgba(20,27,36,0.06), 0 20px 48px -24px rgba(20,27,36,0.35)",
        inset: "inset 0 1px 0 rgba(255,255,255,0.6)",
      },
      keyframes: {
        "fade-in": { from: { opacity: "0" }, to: { opacity: "1" } },
        "slide-up": {
          from: { opacity: "0", transform: "translateY(6px)" },
          to: { opacity: "1", transform: "translateY(0)" },
        },
        "slide-in-right": {
          from: { opacity: "0", transform: "translateX(24px)" },
          to: { opacity: "1", transform: "translateX(0)" },
        },
        shimmer: { "100%": { transform: "translateX(100%)" } },
      },
      animation: {
        "fade-in": "fade-in .18s ease-out both",
        "slide-up": "slide-up .22s cubic-bezier(.2,.7,.3,1) both",
        "slide-in-right": "slide-in-right .24s cubic-bezier(.2,.7,.3,1) both",
      },
    },
  },
  plugins: [],
};