/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/client/**/*.{html,tsx,ts}"],
  theme: {
    extend: {
      colors: {
        // Semantic surface colors via CSS variables (dark-mode ready)
        surface: {
          DEFAULT: "var(--color-surface)",
          raised: "var(--color-surface-raised)",
          overlay: "var(--color-surface-overlay)",
          inset: "var(--color-surface-inset)",
        },
        border: {
          DEFAULT: "var(--color-border)",
          muted: "var(--color-border-muted)",
        },
        foreground: {
          DEFAULT: "var(--color-foreground)",
          secondary: "var(--color-foreground-secondary)",
          muted: "var(--color-foreground-muted)",
        },
        accent: {
          DEFAULT: "var(--color-accent)",
          light: "var(--color-accent-light)",
          dark: "var(--color-accent-dark)",
        },

        // Cohesive message category colors — unified saturation/luminance band
        category: {
          user: { DEFAULT: "#5b9cf5", light: "#111e35", border: "#1e3560" },
          assistant: { DEFAULT: "#4ebe68", light: "#0f2519", border: "#1b4a30" },
          thinking: { DEFAULT: "#b78ef5", light: "#1a1432", border: "#362868" },
          tool: { DEFAULT: "#d4a030", light: "#1a1810", border: "#4a3818" },
          result: { DEFAULT: "#8890f5", light: "#161830", border: "#2a2c5e" },
          system: { DEFAULT: "#8996a8", light: "#161a22", border: "#2a3140" },
          hook: { DEFAULT: "#586070", light: "#12161e", border: "#222830" },
          snapshot: { DEFAULT: "#f07ab5", light: "#221428", border: "#552040" },
          summary: { DEFAULT: "#38d4b8", light: "#102024", border: "#1a4a42" },
        },
      },
      fontFamily: {
        sans: [
          "Geist",
          "system-ui",
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "sans-serif",
        ],
        mono: [
          "JetBrains Mono",
          "Fira Code",
          "SF Mono",
          "Cascadia Code",
          "ui-monospace",
          "SFMono-Regular",
          "monospace",
        ],
      },
      fontSize: {
        // Typography scale: caption, body, subheading, heading
        caption: ["0.75rem", { lineHeight: "1rem", letterSpacing: "0.01em" }],
        body: ["0.875rem", { lineHeight: "1.5rem", letterSpacing: "0" }],
        subheading: ["0.9375rem", { lineHeight: "1.5rem", letterSpacing: "-0.01em" }],
        heading: ["1.125rem", { lineHeight: "1.75rem", letterSpacing: "-0.02em" }],
        "heading-lg": ["1.5rem", { lineHeight: "2rem", letterSpacing: "-0.025em" }],
      },
      spacing: {
        // Refined spacing for layout rhythm
        0.5: "0.125rem",
        1.5: "0.375rem",
        2.5: "0.625rem",
        4.5: "1.125rem",
        18: "4.5rem",
      },
      borderRadius: {
        DEFAULT: "0.375rem",
        lg: "0.5rem",
        xl: "0.75rem",
        "2xl": "1rem",
      },
      boxShadow: {
        "xs": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
        "sm": "0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.05)",
        "DEFAULT": "0 2px 8px -2px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.06)",
        "md": "0 4px 12px -2px rgb(0 0 0 / 0.1), 0 2px 6px -2px rgb(0 0 0 / 0.06)",
        "lg": "0 12px 28px -6px rgb(0 0 0 / 0.15), 0 4px 12px -4px rgb(0 0 0 / 0.08)",
        "card": "0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04)",
        "card-hover": "0 6px 16px -4px rgb(0 0 0 / 0.14), 0 2px 6px -2px rgb(0 0 0 / 0.06)",
        "glow-accent": "0 0 16px rgba(91, 156, 245, 0.12)",
        "glow-success": "0 0 16px rgba(78, 190, 104, 0.12)",
      },
      transitionDuration: {
        DEFAULT: "150ms",
      },
      transitionTimingFunction: {
        DEFAULT: "cubic-bezier(0.4, 0, 0.2, 1)",
      },
      animation: {
        "fade-in": "fadeIn 250ms ease-out",
        "slide-in": "slideIn 250ms ease-out",
        "slide-up": "slideUp 300ms cubic-bezier(0.16, 1, 0.3, 1)",
        "skeleton": "skeleton 1.5s ease-in-out infinite",
        "pulse-subtle": "pulseSubtle 2s ease-in-out infinite",
      },
      keyframes: {
        fadeIn: {
          "0%": { opacity: "0", transform: "translateY(6px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
        slideIn: {
          "0%": { opacity: "0", transform: "translateX(-8px)" },
          "100%": { opacity: "1", transform: "translateX(0)" },
        },
        slideUp: {
          "0%": { opacity: "0", transform: "translateY(12px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
        skeleton: {
          "0%, 100%": { opacity: "1" },
          "50%": { opacity: "0.4" },
        },
        pulseSubtle: {
          "0%, 100%": { opacity: "1" },
          "50%": { opacity: "0.7" },
        },
      },
    },
  },
  plugins: [],
};