/* Standalone: this site is published on its own by GitHub Pages and shares
   nothing with the app bundle, so the handful of tokens it needs are repeated
   here rather than imported from src/renderer/src/styles/index.css. */
:root {
  --app: #191919;
  --surface: #202020;
  --primary: #e9e9e7;
  --muted: #9b9a97;
  --hairline: #2f2f2f;
  --accent: #1a73e8;
}

@media (prefers-color-scheme: light) {
  :root {
    --app: #ffffff;
    --surface: #f7f7f5;
    --primary: #37352f;
    --muted: #787774;
    --hairline: #e9e9e7;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0 16px 72px;
  background: var(--app);
  color: var(--primary);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 44rem;
  margin: 0 auto;
}

header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 40px 0 8px;
}

header img {
  width: 40px;
  height: 40px;
}

header .name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 {
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 24px 0 8px;
}

h2 {
  font-size: 17px;
  margin: 32px 0 8px;
}

p,
li {
  color: var(--primary);
}

.lede,
.meta {
  color: var(--muted);
}

.meta {
  font-size: 14px;
  margin-top: 4px;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ul {
  padding-left: 20px;
}

li {
  margin: 6px 0;
}

/* Radius stays under 5px everywhere, per docs/design-guidelines.md. */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 16px 18px;
  margin: 16px 0;
}

code {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 13.5px;
}

footer {
  border-top: 1px solid var(--hairline);
  margin-top: 48px;
  padding-top: 16px;
  font-size: 14px;
  color: var(--muted);
}