import type { Config } from "tailwindcss";

/**
 * SPB Cloud v3 — design system "Aurora"
 *
 * - `gray`  → neutre froid maison (remplace la palette Tailwind, ré-harmonise
 *             les ~22k lignes existantes sans les toucher).
 * - `blue`  → ACCENT dynamique (variables CSS --accent-*), sélectionnable par
 *             l'utilisateur (Préférences → Accent). Tout `text-blue-500`,
 *             `bg-blue-600/10`… suit l'accent choisi.
 * - `canvas` / `surface` / `elevated` / `line` → surfaces sémantiques.
 */
const accent = (n: number) => `rgb(var(--accent-${n}) / <alpha-value>)`;

const config: Config = {
  darkMode: "class",
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-geist)", "Inter", "system-ui", "-apple-system", "sans-serif"],
        mono: ["var(--font-geist-mono)", "ui-monospace", "SFMono-Regular", "Menlo", "monospace"],
      },
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
        canvas: "rgb(var(--canvas) / <alpha-value>)",
        surface: "rgb(var(--surface) / <alpha-value>)",
        elevated: "rgb(var(--elevated) / <alpha-value>)",
        line: "rgb(var(--line) / <alpha-value>)",
        accent: {
          50: accent(50), 100: accent(100), 200: accent(200), 300: accent(300),
          400: accent(400), 500: accent(500), 600: accent(600), 700: accent(700),
          800: accent(800), 900: accent(900), 950: accent(950),
          DEFAULT: accent(500),
        },
        blue: {
          50: accent(50), 100: accent(100), 200: accent(200), 300: accent(300),
          400: accent(400), 500: accent(500), 600: accent(600), 700: accent(700),
          800: accent(800), 900: accent(900), 950: accent(950),
        },
        gray: {
          50: "#f7f8fa",
          100: "#eef0f3",
          200: "#dfe3e8",
          300: "#c8cdd5",
          400: "#9aa1ad",
          500: "#6b7280",
          600: "#4f5663",
          700: "#3a404b",
          800: "#23272f",
          900: "#15181e",
          950: "#0b0c10",
        },
        cloud: {
          50: "#f7f8fa", 100: "#eef0f3", 200: "#dfe3e8", 300: "#c8cdd5", 400: "#9aa1ad",
          500: "#6b7280", 600: "#4f5663", 700: "#3a404b", 800: "#23272f", 900: "#15181e", 950: "#0b0c10",
        },
      },
      borderRadius: {
        "2xl": "1rem",
        "3xl": "1.25rem",
        "4xl": "1.75rem",
      },
      boxShadow: {
        card: "0 1px 2px rgb(15 23 42 / 0.04), 0 1px 3px rgb(15 23 42 / 0.06)",
        "card-hover": "0 4px 12px rgb(15 23 42 / 0.08), 0 1px 3px rgb(15 23 42 / 0.06)",
        pop: "0 12px 40px -8px rgb(15 23 42 / 0.25), 0 2px 8px rgb(15 23 42 / 0.08)",
        glow: "0 0 0 1px rgb(var(--accent-500) / 0.35), 0 8px 30px -6px rgb(var(--accent-500) / 0.45)",
        "inner-hi": "inset 0 1px 0 0 rgb(255 255 255 / 0.06)",
      },
      backgroundImage: {
        "accent-gradient":
          "linear-gradient(135deg, rgb(var(--accent-500)) 0%, rgb(var(--accent-600)) 60%, rgb(var(--accent-700)) 100%)",
        aurora:
          "radial-gradient(1200px 600px at 10% -10%, rgb(var(--accent-500) / 0.25), transparent 60%), radial-gradient(900px 500px at 110% 10%, rgb(var(--accent-300) / 0.18), transparent 55%), radial-gradient(700px 500px at 50% 120%, rgb(var(--accent-700) / 0.22), transparent 60%)",
        grid: "linear-gradient(to right, rgb(var(--line) / 0.7) 1px, transparent 1px), linear-gradient(to bottom, rgb(var(--line) / 0.7) 1px, transparent 1px)",
      },
      keyframes: {
        shimmer: { "0%": { backgroundPosition: "-200% 0" }, "100%": { backgroundPosition: "200% 0" } },
        "fade-in": { from: { opacity: "0" }, to: { opacity: "1" } },
        "slide-up": { from: { opacity: "0", transform: "translateY(8px)" }, to: { opacity: "1", transform: "translateY(0)" } },
        "scale-in": { from: { opacity: "0", transform: "scale(0.96)" }, to: { opacity: "1", transform: "scale(1)" } },
        float: { "0%,100%": { transform: "translateY(0)" }, "50%": { transform: "translateY(-6px)" } },
        "pulse-ring": { "0%": { transform: "scale(1)", opacity: "0.6" }, "100%": { transform: "scale(1.8)", opacity: "0" } },
        drift: {
          "0%,100%": { transform: "translate(0,0) scale(1)" },
          "33%": { transform: "translate(40px,-30px) scale(1.05)" },
          "66%": { transform: "translate(-30px,20px) scale(0.97)" },
        },
      },
      animation: {
        shimmer: "shimmer 1.6s linear infinite",
        "fade-in": "fade-in .2s ease-out both",
        "slide-up": "slide-up .25s cubic-bezier(.2,.8,.2,1) both",
        "scale-in": "scale-in .18s cubic-bezier(.2,.8,.2,1) both",
        float: "float 6s ease-in-out infinite",
        "pulse-ring": "pulse-ring 1.6s cubic-bezier(.2,.8,.2,1) infinite",
        drift: "drift 22s ease-in-out infinite",
      },
      transitionTimingFunction: {
        spring: "cubic-bezier(.2,.8,.2,1)",
      },
    },
  },
  plugins: [],
};
export default config;