import { CSSProperties } from "react";

// Import shared tokens and styles to avoid duplication
// Note: We can't directly import tokens from shared.ts as it's not exported,
// so we'll use the shared style objects where possible
import {
  layoutStyles,
  cardStyles,
  formStyles,
  buttonStyles,
  bannerStyles,
  typographyStyles,
} from "./shared";

export const authFormStyles: Record<string, CSSProperties> = {
  main: {
    ...layoutStyles.main,
    ...layoutStyles.contentCentered,
    padding: "1rem",
  },
  container: {
    width: "100%",
    maxWidth: "420px",
  },
  card: {
    ...cardStyles.card,
    padding: "3rem 2.5rem",
  },
  header: {
    textAlign: "center" as const,
    marginBottom: "2.5rem",
  },
  title: {
    ...typographyStyles.pageTitle,
    fontSize: "2.5rem",
    textAlign: "center" as const,
  },
  subtitle: {
    ...typographyStyles.pageSubtitle,
    textAlign: "center" as const,
  },
  form: {
    ...formStyles.form,
    gap: "1.5rem",
  },
  field: {
    ...formStyles.field,
  },
  label: {
    ...formStyles.label,
  },
  input: {
    ...formStyles.input,
  },
  button: {
    ...buttonStyles.primaryButton,
    marginTop: "0.5rem",
  },
  error: {
    ...bannerStyles.errorBanner,
    textAlign: "center" as const,
  },
  footer: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    textAlign: "center" as const,
    marginTop: "2rem",
    color: "rgba(255, 255, 255, 0.5)",
    fontSize: "0.875rem",
  },
  link: {
    color: "#a78bfa",
    textDecoration: "none",
    fontWeight: 500,
  },
};