import type { Config } from "tailwindcss";

export default {
  darkMode: "class",
  content: ["./index.html", "./src/**/*.{ts,tsx}"],
  theme: {
    extend: {
      colors: {
        // Legacy aliases now resolve to the v2 tokens so every existing
        // page picks up the new palette without per-file edits. The CSS
        // variables themselves flip under `.dark`, so the `-dark` variants
        // point at the same vars.
        bg: { DEFAULT: "var(--sp-bg)", dark: "var(--sp-bg)" },
        card: { DEFAULT: "var(--sp-surface)", dark: "var(--sp-surface)" },
        accent: {
          DEFAULT: "rgb(var(--sp-blue-rgb) / <alpha-value>)",
          dark: "rgb(var(--sp-blue-rgb) / <alpha-value>)",
        },
        // Design System v2 tokens
        "sp-bg": "var(--sp-bg)",
        "sp-surface": "var(--sp-surface)",
        "sp-surface-2": "var(--sp-surface-2)",
        "sp-border": "var(--sp-border-color)",
        "sp-text-1": "var(--sp-text-1)",
        "sp-text-2": "var(--sp-text-2)",
        "sp-text-3": "var(--sp-text-3)",
        "sp-blue": "var(--sp-blue)",
        "sp-blue-light": "var(--sp-blue-light)",
        "sp-green": "var(--sp-green)",
        "sp-pink": "var(--sp-pink)",
        "sp-amber": "rgb(var(--sp-amber-rgb) / <alpha-value>)",
        "sp-pill": "var(--sp-pill-bg)",
        "sp-pill-text": "var(--sp-pill-text)",
      },
      borderRadius: {
        card: "var(--sp-r-card)",
        pill: "var(--sp-r-pill)",
        chip: "var(--sp-r-chip)",
      },
      keyframes: {
        // Sliding bar for indeterminate progress (e.g. server zipping a folder).
        indeterminate: {
          "0%": { transform: "translateX(-100%)" },
          "100%": { transform: "translateX(400%)" },
        },
      },
      animation: {
        indeterminate: "indeterminate 1.2s ease-in-out infinite",
      },
    },
  },
  plugins: [],
} satisfies Config;