/* ── Reset & Base ── */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Color Tokens ── */
:root {
  --bg: #fff;
  --text: #1a1a1a;
  --text-muted: #555;
  --text-faint: #595959;
  --heading: #111;
  --link: #0066cc;
  --divider: #e0e0e0;
  --label: #222;
  --btn-border: #ccc;
  --btn-bg: #fff;
  --btn-text: #444;
  --btn-hover-border: #888;
  --btn-hover-text: #111;
  --btn-active-bg: #f5f5f5;
  --highlight-bg: #fef3cd;
  --copy-green: #4caf50;
  --footer-border: #f0f0f0;
  --card-bg: transparent;
  --badge-bg: rgba(245, 245, 245, 0.6);
  --badge-border: rgba(0, 0, 0, 0.05);
  --badge-text: #444;
  --badge-shadow: rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] {
  --bg: #121212;
  --text: #e0e0e0;
  --text-muted: #aaa;
  --text-faint: #999;
  --heading: #f0f0f0;
  --link: #6db3f2;
  --divider: #2a2a2a;
  --label: #ccc;
  --btn-border: #444;
  --btn-bg: #1a1a1a;
  --btn-text: #bbb;
  --btn-hover-border: #888;
  --btn-hover-text: #fff;
  --btn-active-bg: #252525;
  --highlight-bg: #3d3520;
  --copy-green: #66bb6a;
  --footer-border: #222;
  --card-bg: #1a1a1a;
  --badge-bg: rgba(255, 255, 255, 0.05);
  --badge-border: rgba(255, 255, 255, 0.08);
  --badge-text: #ccc;
  --badge-shadow: rgba(0, 0, 0, 0.3);
}

body {
  font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  padding: 40px 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.3s, color 0.3s;
}

/* ── Container ── */
.container {
  max-width: 720px;
  margin: 0 auto;
}

/* ── Divider ── */
hr {
  border: none;
  border-top: 1px solid var(--divider);
  margin: 32px 0;
}

/* ── Body Text ── */
p {
  margin-bottom: 16px;
  color: var(--text);
  font-weight: 400;
}

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

a:hover {
  text-decoration: underline;
}

/* ── Section Labels ── */
.section-label {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.08em;
  color: var(--label);
  margin-bottom: 16px;
  margin-top: 8px;
}

/* ── Theme Toggle ── */
.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 14px;
  border: 1px solid var(--btn-border);
  border-radius: 4px;
  background: var(--btn-bg);
  color: var(--btn-text);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  z-index: 100;
}

.theme-toggle:hover {
  border-color: var(--btn-hover-border);
  color: var(--btn-hover-text);
}