import { StyleSheet } from "react-native";

// ─── Design Tokens ─────────────────────────────────────────────────────────────

export const colors = {
  bg: "#0d0d0d",
  surface: "#1a1a1a",
  surfaceElevated: "#222",
  border: "#2e2e2e",
  borderSubtle: "#232323",
  textPrimary: "#f0f0f0",
  textSecondary: "#888",
  textMuted: "#505050",
  placeholderColor: "#666",
  accent: "#7c6fff",
  accentDim: "#3a3570",
  danger: "#ff453a",
  dangerBg: "#2a1111",
  dangerBorder: "#5a2020",
  dangerText: "#ff6b63",
} as const;

// ─── Shared Styles ─────────────────────────────────────────────────────────────

export const shared = StyleSheet.create({
  // ── Screens
  screen: {
    flex: 1,
    backgroundColor: colors.bg,
  },
  screenPadded: {
    flex: 1,
    backgroundColor: colors.bg,
    padding: 24,
    gap: 20,
  },

  // ── Typography
  pageTitle: {
    fontSize: 28,
    fontWeight: "700",
    color: colors.textPrimary,
    marginTop: 8,
  },
  pageTitleLarge: {
    fontSize: 32,
    fontWeight: "800",
    color: colors.textPrimary,
    marginTop: 8,
  },
  subtitle: {
    fontSize: 14,
    color: colors.textSecondary,
    marginTop: -12,
  },
  label: {
    fontSize: 13,
    fontWeight: "600",
    color: colors.textMuted,
    textTransform: "uppercase",
    letterSpacing: 0.6,
  },
  sectionLabel: {
    fontSize: 11,
    fontWeight: "700",
    color: colors.textMuted,
    textTransform: "uppercase",
    letterSpacing: 1.2,
    marginTop: 8,
    marginBottom: -4,
  },
  hint: {
    fontSize: 12,
    color: colors.textMuted,
    lineHeight: 17,
  },
  code: {
    fontFamily: "monospace",
    fontSize: 12,
    color: colors.accent,
  },

  // ── Form
  field: {
    gap: 6,
  },
  input: {
    backgroundColor: colors.surface,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: colors.border,
    paddingHorizontal: 14,
    paddingVertical: 11,
    fontSize: 15,
    color: colors.textPrimary,
  },
  inputMultiline: {
    minHeight: 80,
    textAlignVertical: "top",
    paddingTop: 10,
  },
  row: {
    flexDirection: "row",
    gap: 12,
  },
  flex1: {
    flex: 1,
  },

  // ── Buttons
  btnPrimary: {
    backgroundColor: colors.accent,
    borderRadius: 14,
    paddingVertical: 14,
    alignItems: "center",
  },
  btnPrimaryText: {
    fontSize: 16,
    fontWeight: "600",
    color: "#fff",
  },
  btnDanger: {
    backgroundColor: colors.dangerBg,
    borderRadius: 14,
    paddingVertical: 14,
    alignItems: "center",
    borderWidth: 1,
    borderColor: colors.dangerBorder,
  },
  btnDangerText: {
    fontSize: 16,
    fontWeight: "600",
    color: colors.dangerText,
  },
  btnSecondary: {
    backgroundColor: colors.surface,
    borderRadius: 14,
    paddingVertical: 14,
    alignItems: "center",
    borderWidth: 1,
    borderColor: colors.border,
  },
  btnSecondaryText: {
    fontSize: 16,
    fontWeight: "600",
    color: colors.textPrimary,
  },
  btnDisabled: {
    opacity: 0.45,
  },
  actionsRow: {
    flexDirection: "row",
    gap: 12,
    marginTop: 4,
  },
  actionFlex: {
    flex: 1,
  },

  // ── Page header (with back button)
  pageHeader: {
    paddingTop: 16,
    paddingHorizontal: 24,
    paddingBottom: 4,
    gap: 4,
  },
  backBtn: {
    alignSelf: "flex-start",
    paddingVertical: 4,
  },
  backBtnText: {
    fontSize: 14,
    color: colors.accent,
    fontWeight: "500",
  },

  // ── Cards
  card: {
    backgroundColor: colors.surface,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: colors.border,
    padding: 20,
    gap: 6,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.35,
    shadowRadius: 6,
    elevation: 4,
  },
  cardIcon: {
    fontSize: 28,
  },
  cardTitle: {
    fontSize: 18,
    fontWeight: "600",
    color: colors.textPrimary,
  },
  cardDesc: {
    fontSize: 14,
    color: colors.textSecondary,
  },
});
