:root {
  /* Primary */
  --primary-h: 210; /* Farbton passend zu #003a6a */
  --primary-s: 100%;
  --primary-l: 25%;
  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l)); /* Dunkles Blau */
  --text-on-primary: hsl(0, 0%, 98%); /* Sehr heller Text für guten Kontrast */

  /* Hover */
  --primary-hover-bg: hsla(210, 100%, 35%, 0.2); /* Gedämpftes Blau für Hover */

  /* Body */
  --body-bg: hsl(210, 25%, 95%); /* Helles Grau-Blau für Hintergrund */
  --body-font: hsl(210, 20%, 20%); /* Dunkles Blau-Grau für Text */

  /* Navigation */
  --nav-bg: hsla(210, 25%, 90%, 0.9); /* Transparenter Blauton für Navigation */

  /* Hero Section */
  --hero-gradient-from: hsl(210, 70%, 85%); /* Helles Blau als Start */
  --hero-gradient-to: hsl(210, 60%, 70%); /* Wärmerer Verlaufston */

  /* Post Card */
  --post-card-bg: hsl(0, 0%, 100%); /* Weiß für Klarheit */

  /* Footer */
  --footer-gradient-from: hsl(210, 25%, 20%); /* Dunkler Blauton für Start */
  --footer-gradient-to: hsl(210, 25%, 15%); /* Sanfter Verlauf zu einem dunkleren Ton */

  /** Markdown Content */
  --markdown-h1-color: hsl(210, 90%, 20%);
  --markdown-h2-color: hsl(210, 85%, 25%);
  --markdown-h3-color: hsl(210, 80%, 30%);
  --markdown-h4-color: hsl(210, 75%, 40%);
  --markdown-h5-color: hsl(210, 70%, 50%);
  --markdown-h6-color: hsl(210, 65%, 60%);
  --markdown-table-bg: hsl(210, 25%, 95%);
  --markdown-table-header-bg: hsl(210, 20%, 90%);
  --markdown-table-row-even-bg: hsl(210, 25%, 92%);
  --markdown-table-row-odd-bg: hsl(210, 25%, 90%);
}

[data-theme="dark"] {
  /* Override hover */
  --primary-hover-bg: hsla(210, 100%, 35%, 0.3); /* Kräftigeres Blau für Hover im Dark Mode */

  /* Override body colors */
  --body-bg: hsl(210, 15%, 10%); /* Tiefdunkles Blau für Hintergrund */
  --body-font: hsl(210, 60%, 85%); /* Helles Blau für Text */

  /* Override navigation */
  --nav-bg: hsla(210, 20%, 20%, 0.9); /* Dunkler, transparenter Blauton */

  /* Override hero section */
  --hero-gradient-from: hsl(210, 40%, 25%); /* Sattes Dunkelblau für Start */
  --hero-gradient-to: hsl(210, 45%, 30%); /* Etwas hellerer Verlaufston */

  /* Post Card */
  --post-card-bg: hsl(210, 15%, 15%); /* Dunklerer Hintergrund für Karten */

  /* Footer */
  --footer-gradient-from: hsl(210, 40%, 20%); /* Sattes Dunkelblau für Start */
  --footer-gradient-to: hsl(210, 45%, 25%); /* Etwas hellerer Verlaufston */

  /** Markdown Content */
  --markdown-h1-color: hsl(210, 90%, 65%);
  --markdown-h2-color: hsl(210, 85%, 60%);
  --markdown-h3-color: hsl(210, 80%, 55%);
  --markdown-h4-color: hsl(210, 75%, 50%);
  --markdown-h5-color: hsl(210, 70%, 45%);
  --markdown-h6-color: hsl(210, 65%, 40%);
  --markdown-table-bg: hsl(210, 15%, 10%);
  --markdown-table-header-bg: hsl(210, 20%, 20%);
  --markdown-table-row-even-bg: hsl(210, 18%, 15%);
  --markdown-table-row-odd-bg: hsl(210, 17%, 13%);
}