import brand from "@/brand.config";

const accent = brand.colors.accent;
const sand = {
  paper: "#FAFAF7",
  card: "#FFFFFF",
  ink: "#1A1812",
  muted: "#5C5644",
  border: "#E8E4D8",
};

export const clerkAppearance: object = {
  variables: {
    colorPrimary: accent,
    colorBackground: sand.card,
    colorInputBackground: sand.paper,
    colorText: sand.ink,
    colorTextSecondary: sand.muted,
    colorInputText: sand.ink,
    colorNeutral: sand.muted,
    borderRadius: "0.75rem",
    fontFamily: "var(--font-geist-sans, system-ui, sans-serif)",
  },
  elements: {
    card: {
      backgroundColor: sand.card,
      border: `1px solid ${sand.border}`,
      boxShadow: "none",
    },
    headerTitle: { color: sand.ink },
    headerSubtitle: { color: sand.muted },
    socialButtonsBlockButton: {
      backgroundColor: sand.paper,
      border: `1px solid ${sand.border}`,
      color: sand.ink,
    },
    socialButtonsBlockButtonText: { color: sand.ink },
    dividerLine: { backgroundColor: sand.border },
    dividerText: { color: sand.muted },
    formFieldLabel: { color: sand.muted },
    formFieldInput: {
      backgroundColor: sand.paper,
      border: `1px solid ${sand.border}`,
      color: sand.ink,
    },
    footerActionLink: { color: accent },
    identityPreviewEditButton: { color: accent },
  },
};