/* Sizes */
.content h1 { font-size: 1.8rem !important; line-height: 1.25; }
.content h2 { font-size: 1.4rem !important; line-height: 1.30; }
.content h3 { font-size: 1.2rem !important; line-height: 1.35; }
.content h4 { font-size: 1.0rem !important; line-height: 1.40; }

/* Define per-theme variable (cover both html/body just in case) */
html[data-theme="light"],
body[data-theme="light"] {
  --agrios-heading: #458A77;  /* green for light mode */
}

html[data-theme="dark"],
body[data-theme="dark"] {
  --agrios-heading: #5FD0B0;  /* lighter green for dark mode */
}

/* Auto mode: use system preference */
html[data-theme="auto"],
body[data-theme="auto"] {
  /* default to light, then override with prefers-color-scheme below */
  --agrios-heading: #458A77;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"],
  body[data-theme="auto"] {
    --agrios-heading: #5FD0B0;
  }
}

/* Apply it everywhere (once) */
.content :is(h1,h2,h3,h4),
main header h1,
.page .header h1 {
  color: var(--agrios-heading) !important;
}

/* Keep the ¶ anchor proportional */
main .content .headerlink { font-size: 0.7em; }