// Admin Panel Design System
// Centralized design tokens for the admin UI.
//
// Palette: neutral slate base with an indigo accent. The admin no longer uses
// the public-site brand orange — keep branding scoped to the public site.

export const adminTokens = {
  surface: {
    app: "bg-slate-950",
    card: "bg-slate-900",
    inset: "bg-slate-900/60",
    raised: "bg-slate-800",
    hover: "bg-slate-800/60",
    active: "bg-indigo-500/10",
  },
  border: {
    subtle: "border-slate-800",
    default: "border-slate-800",
    strong: "border-slate-700",
    accent: "border-indigo-500",
  },
  text: {
    primary: "text-slate-100",
    secondary: "text-slate-300",
    tertiary: "text-slate-400",
    muted: "text-slate-500",
    accent: "text-indigo-400",
    inverse: "text-slate-900",
  },
  ring: {
    accent: "focus:ring-2 focus:ring-indigo-500/60 focus:ring-offset-0",
  },
} as const;

export const adminComponentStyles = {
  input: {
    base:
      "w-full px-3 py-2 rounded-lg bg-slate-950 border border-slate-800 text-slate-100 placeholder-slate-500 " +
      "focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500/60 transition-colors",
    error: "border-rose-500/70 focus:border-rose-500 focus:ring-rose-500/60",
    disabled: "opacity-50 cursor-not-allowed",
  },
  button: {
    base:
      "inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors " +
      "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-950 focus:ring-indigo-500/60",
    primary: "bg-indigo-500 text-white hover:bg-indigo-400 active:bg-indigo-600",
    secondary:
      "bg-slate-800 text-slate-100 border border-slate-700 hover:bg-slate-700 hover:border-slate-600",
    ghost: "bg-transparent text-slate-300 hover:bg-slate-800 hover:text-slate-100",
    danger: "bg-rose-500 text-white hover:bg-rose-400 active:bg-rose-600",
    success: "bg-emerald-500 text-white hover:bg-emerald-400 active:bg-emerald-600",
    disabled: "opacity-50 cursor-not-allowed pointer-events-none",
  },
  card: {
    base: "bg-slate-900 rounded-xl border border-slate-800",
    header: "px-6 py-4 border-b border-slate-800",
    body: "p-6",
    footer: "px-6 py-4 border-t border-slate-800",
  },
  badge: {
    base:
      "inline-flex items-center gap-1.5 px-2 py-0.5 text-xs font-medium rounded-md border",
    success: "bg-emerald-500/10 text-emerald-300 border-emerald-500/20",
    warning: "bg-amber-500/10 text-amber-300 border-amber-500/20",
    danger: "bg-rose-500/10 text-rose-300 border-rose-500/20",
    info: "bg-sky-500/10 text-sky-300 border-sky-500/20",
    neutral: "bg-slate-800 text-slate-300 border-slate-700",
    accent: "bg-indigo-500/10 text-indigo-300 border-indigo-500/20",
  },
} as const;

// Re-export convenience classnames used by ad-hoc elements.
export const adminClassNames = {
  pageTitle: "text-2xl font-semibold text-slate-100",
  pageDescription: "text-sm text-slate-400",
  sectionLabel:
    "text-xs font-semibold uppercase tracking-wider text-slate-400",
  fieldLabel: "block text-sm font-medium text-slate-300 mb-2",
  divider: "border-t border-slate-800",
} as const;
