Refactor header and row styles to use theme tokens.

Replaced hardcoded header colors with theme-based tokens for better maintainability and consistency across themes. Simplified the structure by consolidating row and header-specific design tokens and removing unused badge tokens.

frontend/src/styles/theme.js

@@ -1,4 +1,3 @@
-// frontend/src/styles/theme.js
 export const stylesTokens = {
   pageBg: "var(--hp-pageBg)",
   panelBg: "var(--hp-panelBg)",
@@ -10,41 +9,25 @@ export const stylesTokens = {
 
   goldLine: "var(--hp-goldLine)",
 
-  // ===== Section Header (NEW) =====
-  sectionHeaderBgTop: "var(--hp-sectionHeaderBgTop)",
-  sectionHeaderBgBottom: "var(--hp-sectionHeaderBgBottom)",
-  sectionHeaderText: "var(--hp-sectionHeaderText)",
-  sectionHeaderBorder: "var(--hp-sectionHeaderBorder)",
+  // Header
+  headerBgTop: "var(--hp-headerBgTop)",
+  headerBgBottom: "var(--hp-headerBgBottom)",
+  headerBorder: "var(--hp-headerBorder)",
 
-  // ===== Row/Table colors =====
-  rowDefaultBg: "var(--hp-rowDefaultBg)",
+  // Rows
+  rowNoBg: "var(--hp-rowNoBg)",
+  rowNoText: "var(--hp-rowNoText)",
+  rowNoBorder: "var(--hp-rowNoBorder)",
 
   rowOkBg: "var(--hp-rowOkBg)",
-  rowOkBorder: "var(--hp-rowOkBorder)",
   rowOkText: "var(--hp-rowOkText)",
-
-  rowNoBg: "var(--hp-rowNoBg)",
-  rowNoBorder: "var(--hp-rowNoBorder)",
-  rowNoText: "var(--hp-rowNoText)",
+  rowOkBorder: "var(--hp-rowOkBorder)",
 
   rowMaybeBg: "var(--hp-rowMaybeBg)",
-  rowMaybeBorder: "var(--hp-rowMaybeBorder)",
   rowMaybeText: "var(--hp-rowMaybeText)",
+  rowMaybeBorder: "var(--hp-rowMaybeBorder)",
 
   rowEmptyBg: "var(--hp-rowEmptyBg)",
-  rowEmptyBorder: "var(--hp-rowEmptyBorder)",
   rowEmptyText: "var(--hp-rowEmptyText)",
-
-  // ===== Badge colors (NEW: getrennt von row*) =====
-  badgeOkBg: "var(--hp-badgeOkBg)",
-  badgeOkText: "var(--hp-badgeOkText)",
-
-  badgeNoBg: "var(--hp-badgeNoBg)",
-  badgeNoText: "var(--hp-badgeNoText)",
-
-  badgeMaybeBg: "var(--hp-badgeMaybeBg)",
-  badgeMaybeText: "var(--hp-badgeMaybeText)",
-
-  badgeEmptyBg: "var(--hp-badgeEmptyBg)",
-  badgeEmptyText: "var(--hp-badgeEmptyText)",
+  rowEmptyBorder: "var(--hp-rowEmptyBorder)",
 };