import { theme } from "ant-design-vue";
import type { ThemeConfig } from "ant-design-vue/es/config-provider/context";

/**
 * Design-system palette — mirrors the Tailwind `@theme` tokens in assets/css/main.css.
 * Keep both in sync: Tailwind drives layout/sections, Ant Design drives form controls.
 */
export const palette = {
  bg: "#0b1224",
  panel: "#101a32",
  panel2: "#152040",
  ink: "#edede6",
  muted: "#8e9ab0",
  accent: "#ff5a00",
  accentSoft: "#ff7a2a",
  hazard: "#ffb800",
  line: "#1e2d4d",
  success: "#34d399", // tailwind emerald-400
} as const;

export const antdTheme: ThemeConfig = {
  algorithm: theme.darkAlgorithm,
  token: {
    colorPrimary: palette.accent,
    colorInfo: palette.accent,
    colorWarning: palette.hazard,
    colorSuccess: palette.success,
    colorBgBase: palette.bg,
    colorBgContainer: palette.bg,
    colorBgElevated: palette.panel,
    colorBorder: palette.line,
    colorBorderSecondary: palette.line,
    colorText: palette.ink,
    colorTextDescription: palette.muted,
    colorTextPlaceholder: "rgba(142, 154, 176, 0.5)",
    colorTextLightSolid: palette.bg,
    fontFamily: "var(--font-sans)",
    fontSize: 14,
    borderRadius: 8,
    controlOutlineWidth: 0,
    motionDurationMid: "0.15s",
    wireframe: false,
  },
};