:root {
  /* Primary */
  --primary-h: 195; /* Farbton passend zu einem lebendigen Türkis */
  --primary-s: 80%;
  --primary-l: 50%;
  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l)); /* Belebendes Türkis */
  --text-on-primary: hsl(195, 100%, 10%); /* Dunkler Kontrast für Lesbarkeit */

  /* Hover */
  --primary-hover-bg: hsla(195, 80%, 40%, 0.2); /* Weicher Türkiston für Hover */

  /* Body */
  --body-bg: hsl(195, 50%, 95%); /* Sehr helles Türkis für den Hintergrund */
  --body-font: hsl(195, 60%, 20%); /* Dunkler Türkiston für Text */

  /* Navigation */
  --nav-bg: hsla(195, 40%, 85%, 0.9); /* Sanfte Türkistöne für Navigation */

  /* Hero Section */
  --hero-gradient-from: hsl(195, 80%, 80%);
  --hero-gradient-to: hsl(195, 75%, 60%);

  /* Post Card */
  --post-card-bg: hsl(0, 0%, 100%); /* Klarer Weißton */

  /* Footer */
  --footer-gradient-from: hsl(195, 60%, 50%);
  --footer-gradient-to: hsl(195, 55%, 45%);

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

[data-theme="dark"] {
  /* Override hover */
  --primary-hover-bg: hsla(195, 80%, 40%, 0.3);

  /* Override body colors */
  --body-bg: hsl(195, 25%, 10%);
  --body-font: hsl(195, 60%, 85%);

  /* Override navigation */
  --nav-bg: hsla(195, 30%, 20%, 0.9);

  /* Override hero section */
  --hero-gradient-from: hsl(195, 50%, 25%);
  --hero-gradient-to: hsl(195, 55%, 30%);

  /* Post Card */
  --post-card-bg: hsl(195, 20%, 15%);

  /* Footer */
  --footer-gradient-from: hsl(195, 40%, 20%);
  --footer-gradient-to: hsl(195, 35%, 15%);
  
  /** Markdown Content */
  --markdown-h1-color: hsl(195, 90%, 65%);
  --markdown-h2-color: hsl(195, 85%, 60%);
  --markdown-h3-color: hsl(195, 80%, 55%);
  --markdown-h4-color: hsl(195, 75%, 50%);
  --markdown-h5-color: hsl(195, 70%, 45%);
  --markdown-h6-color: hsl(195, 65%, 40%);
  --markdown-table-bg: hsl(195, 25%, 10%);
  --markdown-table-header-bg: hsl(195, 30%, 20%);
  --markdown-table-row-even-bg: hsl(195, 28%, 15%);
  --markdown-table-row-odd-bg: hsl(195, 27%, 13%);
}