/* ---- Simple, readable defaults ---- */
:root {
    --bg: #fafafa;
    --text: #1f2937;     /* slate-800 */
    --muted: #6b7280;    /* slate-500 */
    --link: #2563eb;     /* blue-600 */
    --link-visited: #7c3aed; /* violet-600 */
    --border: #e5e7eb;   /* slate-200 */
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #ffffff;
      --text: #01143a;
      --muted: #94a3b8;
      --link: #60a5fa;
      --link-visited: #c084fc;
      --border: #1f2937;
    }
  }

  html {
    box-sizing: border-box;
    scroll-behavior: smooth;
  }

  *, *::before, *::after { box-sizing: inherit; }

  body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }

  /* Center content with a comfortable line length */
  main, .container, body > div:first-child {
    max-width: 70ch;
    margin-inline: auto;
  }

  /* Headings */
  h1, h2, h3 {
    line-height: 1.25;
    margin: 1.6em 0 0.6em;
  }
  h1 { font-size: clamp(1.8rem, 2.5vw + 1rem, 2.4rem); }
  h2 { font-size: clamp(1.4rem, 1.5vw + 1rem, 1.8rem); }
  h3 { font-size: 1.25rem; color: var(--muted); }

  /* Paragraphs */
  p { margin: 0; }             /* reset */
  p + p { margin-top: 1rem; }  /* spacing between consecutive paragraphs */

  /* Lists */
  ul, ol {
    margin: 0 0 1rem 1.25rem;  /* space below + indent */
    padding: 0;
  }
  li { margin: 0.4rem 0; }

  /* Tweak nested list spacing/indent */
  li ul, li ol {
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
  }

  /* Optional: soft card look for sections */
  section, article {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
  }

  /* Horizontal rule */
  hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2rem 0;
  }

  /* Blockquotes (nice for callouts) */
  blockquote {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--link);
    background: color-mix(in oklab, var(--link) 6%, var(--card));
  }

  /* Images scale nicely */
  img, svg, video {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Small text utilities */
  small, .muted { color: var(--muted); }

  /* Print-friendly */
  @media print {
    a { text-decoration: underline; border: none; }
    section, article { border: none; box-shadow: none; }
    body { background: white; color: black; }
  }