:root {
  /* Dark mode */
  --dark-bg-primary: 15, 23, 42;
  --dark-bg-secondary: 30, 41, 59;
  --dark-border: 51, 65, 85;
  --dark-text-primary: 248, 250, 252;
  --dark-text-secondary: 203, 213, 225;

  /* Light mode */
  --light-bg-primary: 255, 255, 255;
  --light-bg-secondary: 232, 237, 244;
  --light-border: 226, 232, 240;
  --light-text-primary: 15, 23, 42;
  --light-text-secondary: 71, 85, 105;

  /* Accent */
  --highlight: 59, 130, 246;

  --bg: var(--light-bg-primary);
  --text: var(--light-text-primary);
  --heading: var(--light-text-secondary);
  --border: var(--light-bg-secondary);

  @media (prefers-color-scheme: dark) {
    --bg: var(--dark-bg-primary);
    --text: var(--dark-text-primary);
    --heading: var(--dark-text-secondary);
    --border: var(--dark-bg-secondary);
  }

  --color-bg: rgb(var(--bg));
  --color-text: rgb(var(--text));
  --color-heading: rgb(var(--heading));
  --color-border: rgb(var(--border));
  --color-highlight: rgb(var(--highlight));

  background-color: var(--color-bg);
  color: var(--color-text);
}

body {
  font-family: Helvetica, Arial, sans-serif;
}

main {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 2rem;
  min-height: 100dvh;
  line-height: 1.5em;
}

main > section {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

main > section > *:first-child {
  margin-top: 0;
}

main > section > *:last-child {
  margin-bottom: 0;
}

main > section > h2 {
  padding-block: 0.5rem;
  margin: 0;
}

[id] {
  scroll-margin-top: 1.5rem;
}

@media print {
  [data-print=block] {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

astro-block {
  display: block;
  margin-bottom: 3em;
}