/* Webfonts */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* Base */
html {
  max-width: 50rem;
  font-family: 'Atkinson Hyperlegible', sans-serif;
  padding: 4em 1em;
  margin: auto;
  line-height: 1.5;
  font-size: 18px;
  background: #fafafa;
  color: #222;
}

/* Links — subtle, modern gray-blue tone */
a {
  color: #225;
  text-decoration: underline;
  text-decoration-color: #bbb;
  text-underline-offset: 2px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
a:hover {
  color: #000;
  text-decoration-color: #666;
}

/* Headings — consistent with original spacing */
h1, h2, h3 {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-weight: bold;
  margin-top: 1em;
  margin-bottom: 0.5em;
  line-height: 1.25;
}

/* Code */
code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  background: #f5f5f5;
  padding: 0.2em 0.4em;
  border-radius: 4px;
}
pre {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  background: #f5f5f5;
  padding: 1em;
  border-radius: 6px;
  overflow-x: auto;
  position: relative;
  margin-bottom: 1.5em;
}

/* Copy button */
.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 0.2em 0.6em;
  font-size: 0.8em;
  border: none;
  border-radius: 4px;
  background: #eee;
  color: #333;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
}
pre:hover .copy-btn { opacity: 1; }
.copy-btn:hover { background: #ddd; }

/* Blockquotes — softer tone */
blockquote {
  border-left: 3px solid #ccc;
  padding-left: 1em;
  color: #555;
  background: #f9f9f9;
  margin: 1.5em 0;
  border-radius: 4px;
}

/* Lists & paragraphs */
p { margin-bottom: 1.5em; }
ul, ol { padding-left: 1.5em; margin-bottom: 1.5em; }

/* Dark mode (optional) */
html.dark-mode {
  background: #121212;
  color: #eee;
}

html.dark-mode a { color: #aae; }
html.dark-mode pre, html.dark-mode code { background: #1e1e1e; color: #f8f8f2; }
html.dark-mode blockquote { background: #1e1e1e; border-left-color: #4ea3f1; color: #ccc; }
html.dark-mode .note { background: #1b2838; border-left-color: #4ea3f1; color: #eee; }
html.dark-mode .warning { background: #3b1e1e; border-left-color: #e06c75; color: #eee; }
html.dark-mode .copy-btn { background: #2b2b2b; color: #eee; }
html.dark-mode .copy-btn:hover { background: #3b3b3b; }