import type { Config } from "tailwindcss";

export default {
  content: ["./src/**/*.{ts,tsx}", "./index.html"],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        canvas: {
          DEFAULT: "rgb(var(--canvas) / <alpha-value>)",
          subtle: "rgb(var(--canvas-subtle) / <alpha-value>)",
          overlay: "rgb(var(--canvas-overlay) / <alpha-value>)",
        },
        border: {
          DEFAULT: "rgb(var(--border) / <alpha-value>)",
          muted: "rgb(var(--border-muted) / <alpha-value>)",
        },
        fg: {
          DEFAULT: "rgb(var(--fg) / <alpha-value>)",
          muted: "rgb(var(--fg-muted) / <alpha-value>)",
          subtle: "rgb(var(--fg-subtle) / <alpha-value>)",
          dim: "rgb(var(--fg-dim) / <alpha-value>)",
        },
        accent: {
          DEFAULT: "rgb(var(--accent) / <alpha-value>)",
          emphasis: "rgb(var(--accent-emphasis) / <alpha-value>)",
        },
        success: {
          DEFAULT: "rgb(var(--success) / <alpha-value>)",
          emphasis: "rgb(var(--success-emphasis) / <alpha-value>)",
          50: "rgb(var(--success-50)  / <alpha-value>)",
          100: "rgb(var(--success-100) / <alpha-value>)",
          200: "rgb(var(--success-200) / <alpha-value>)",
          300: "rgb(var(--success-300) / <alpha-value>)",
          400: "rgb(var(--success-400) / <alpha-value>)",
          500: "rgb(var(--success-500) / <alpha-value>)",
          600: "rgb(var(--success-600) / <alpha-value>)",
          700: "rgb(var(--success-700) / <alpha-value>)",
          800: "rgb(var(--success-800) / <alpha-value>)",
          900: "rgb(var(--success-900) / <alpha-value>)",
          950: "rgb(var(--success-950) / <alpha-value>)",
        },
        attention: {
          DEFAULT: "rgb(var(--attention) / <alpha-value>)",
          emphasis: "rgb(var(--attention-emphasis) / <alpha-value>)",
        },
        danger: {
          DEFAULT: "rgb(var(--danger) / <alpha-value>)",
          emphasis: "rgb(var(--danger-emphasis) / <alpha-value>)",
          50: "rgb(var(--danger-50)  / <alpha-value>)",
          100: "rgb(var(--danger-100) / <alpha-value>)",
          200: "rgb(var(--danger-200) / <alpha-value>)",
          300: "rgb(var(--danger-300) / <alpha-value>)",
          400: "rgb(var(--danger-400) / <alpha-value>)",
          500: "rgb(var(--danger-500) / <alpha-value>)",
          600: "rgb(var(--danger-600) / <alpha-value>)",
          700: "rgb(var(--danger-700) / <alpha-value>)",
          800: "rgb(var(--danger-800) / <alpha-value>)",
          900: "rgb(var(--danger-900) / <alpha-value>)",
          950: "rgb(var(--danger-950) / <alpha-value>)",
        },
        info: {
          DEFAULT: "rgb(var(--info) / <alpha-value>)",
          emphasis: "rgb(var(--info-emphasis) / <alpha-value>)",
        },
        // ── Adaptive palette (50–950 auto-invert in dark mode) ──
        primary: {
          DEFAULT: "rgb(var(--primary-500) / <alpha-value>)",
          50: "rgb(var(--primary-50)  / <alpha-value>)",
          100: "rgb(var(--primary-100) / <alpha-value>)",
          200: "rgb(var(--primary-200) / <alpha-value>)",
          300: "rgb(var(--primary-300) / <alpha-value>)",
          400: "rgb(var(--primary-400) / <alpha-value>)",
          500: "rgb(var(--primary-500) / <alpha-value>)",
          600: "rgb(var(--primary-600) / <alpha-value>)",
          700: "rgb(var(--primary-700) / <alpha-value>)",
          800: "rgb(var(--primary-800) / <alpha-value>)",
          900: "rgb(var(--primary-900) / <alpha-value>)",
          950: "rgb(var(--primary-950) / <alpha-value>)",
        },
        secondary: {
          DEFAULT: "rgb(var(--secondary-500) / <alpha-value>)",
          50: "rgb(var(--secondary-50)  / <alpha-value>)",
          100: "rgb(var(--secondary-100) / <alpha-value>)",
          200: "rgb(var(--secondary-200) / <alpha-value>)",
          300: "rgb(var(--secondary-300) / <alpha-value>)",
          400: "rgb(var(--secondary-400) / <alpha-value>)",
          500: "rgb(var(--secondary-500) / <alpha-value>)",
          600: "rgb(var(--secondary-600) / <alpha-value>)",
          700: "rgb(var(--secondary-700) / <alpha-value>)",
          800: "rgb(var(--secondary-800) / <alpha-value>)",
          900: "rgb(var(--secondary-900) / <alpha-value>)",
          950: "rgb(var(--secondary-950) / <alpha-value>)",
        },
        warning: {
          DEFAULT: "rgb(var(--warning-500) / <alpha-value>)",
          50: "rgb(var(--warning-50)  / <alpha-value>)",
          100: "rgb(var(--warning-100) / <alpha-value>)",
          200: "rgb(var(--warning-200) / <alpha-value>)",
          300: "rgb(var(--warning-300) / <alpha-value>)",
          400: "rgb(var(--warning-400) / <alpha-value>)",
          500: "rgb(var(--warning-500) / <alpha-value>)",
          600: "rgb(var(--warning-600) / <alpha-value>)",
          700: "rgb(var(--warning-700) / <alpha-value>)",
          800: "rgb(var(--warning-800) / <alpha-value>)",
          900: "rgb(var(--warning-900) / <alpha-value>)",
          950: "rgb(var(--warning-950) / <alpha-value>)",
        },
        neutral: {
          DEFAULT: "rgb(var(--neutral-500) / <alpha-value>)",
          50: "rgb(var(--neutral-50)  / <alpha-value>)",
          100: "rgb(var(--neutral-100) / <alpha-value>)",
          200: "rgb(var(--neutral-200) / <alpha-value>)",
          300: "rgb(var(--neutral-300) / <alpha-value>)",
          400: "rgb(var(--neutral-400) / <alpha-value>)",
          500: "rgb(var(--neutral-500) / <alpha-value>)",
          600: "rgb(var(--neutral-600) / <alpha-value>)",
          700: "rgb(var(--neutral-700) / <alpha-value>)",
          800: "rgb(var(--neutral-800) / <alpha-value>)",
          900: "rgb(var(--neutral-900) / <alpha-value>)",
          950: "rgb(var(--neutral-950) / <alpha-value>)",
        },
        background: {
          DEFAULT: "rgb(var(--background-50) / <alpha-value>)",
          50: "rgb(var(--background-50)  / <alpha-value>)",
          100: "rgb(var(--background-100) / <alpha-value>)",
          200: "rgb(var(--background-200) / <alpha-value>)",
          300: "rgb(var(--background-300) / <alpha-value>)",
          400: "rgb(var(--background-400) / <alpha-value>)",
          500: "rgb(var(--background-500) / <alpha-value>)",
          600: "rgb(var(--background-600) / <alpha-value>)",
          700: "rgb(var(--background-700) / <alpha-value>)",
          800: "rgb(var(--background-800) / <alpha-value>)",
          900: "rgb(var(--background-900) / <alpha-value>)",
          950: "rgb(var(--background-950) / <alpha-value>)",
        },
        foreground: {
          DEFAULT: "rgb(var(--foreground-900) / <alpha-value>)",
          50: "rgb(var(--foreground-50)  / <alpha-value>)",
          100: "rgb(var(--foreground-100) / <alpha-value>)",
          200: "rgb(var(--foreground-200) / <alpha-value>)",
          300: "rgb(var(--foreground-300) / <alpha-value>)",
          400: "rgb(var(--foreground-400) / <alpha-value>)",
          500: "rgb(var(--foreground-500) / <alpha-value>)",
          600: "rgb(var(--foreground-600) / <alpha-value>)",
          700: "rgb(var(--foreground-700) / <alpha-value>)",
          800: "rgb(var(--foreground-800) / <alpha-value>)",
          900: "rgb(var(--foreground-900) / <alpha-value>)",
          950: "rgb(var(--foreground-950) / <alpha-value>)",
        },
      },
      fontFamily: {
        mono: ["'SF Mono'", "Consolas", "monospace"],
      },
      animation: {
        "fade-in": "fade-in 0.15s ease forwards",
        "slide-up": "slide-up 0.2s ease forwards",
      },
      keyframes: {
        "fade-in": { from: { opacity: "0" }, to: { opacity: "1" } },
        "slide-up": {
          from: { opacity: "0", transform: "translateY(6px)" },
          to: { opacity: "1", transform: "translateY(0)" },
        },
      },
    },
  },
  plugins: [],
} satisfies Config;
