// frontend/src/styles/theme.js
export const stylesTokens = {
  pageBg: "var(--hp-pageBg)",
  panelBg: "var(--hp-panelBg)",
  panelBorder: "var(--hp-panelBorder)",

  textMain: "var(--hp-textMain)",
  textDim: "var(--hp-textDim)",
  textGold: "var(--hp-textGold)",

  goldLine: "var(--hp-goldLine)",

  // ===== NEW: Row/Table colors so themes affect tables =====
  rowDefaultBg: "var(--hp-rowDefaultBg)",

  rowOkBg: "var(--hp-rowOkBg)",
  rowOkBorder: "var(--hp-rowOkBorder)",
  rowOkText: "var(--hp-rowOkText)",
  badgeOkBg: "var(--hp-badgeOkBg)",
  badgeOkText: "var(--hp-badgeOkText)",

  rowNoBg: "var(--hp-rowNoBg)",
  rowNoBorder: "var(--hp-rowNoBorder)",
  rowNoText: "var(--hp-rowNoText)",
  badgeNoBg: "var(--hp-badgeNoBg)",
  badgeNoText: "var(--hp-badgeNoText)",

  rowMaybeBg: "var(--hp-rowMaybeBg)",
  rowMaybeBorder: "var(--hp-rowMaybeBorder)",
  rowMaybeText: "var(--hp-rowMaybeText)",
  badgeMaybeBg: "var(--hp-badgeMaybeBg)",
  badgeMaybeText: "var(--hp-badgeMaybeText)",

  rowEmptyBg: "var(--hp-rowEmptyBg)",
  rowEmptyBorder: "var(--hp-rowEmptyBorder)",
  rowEmptyText: "var(--hp-rowEmptyText)",
  badgeEmptyBg: "var(--hp-badgeEmptyBg)",
  badgeEmptyText: "var(--hp-badgeEmptyText)",
};