/* ── Theme tokens ─────────────────────────────────────────── */
/* Gruvbox Light — softened */
:root {
  --bg:          #fdf7d0;
  --bg-header:   rgba(253, 247, 208, 0.92);
  --bg-footer:   rgba(253, 247, 208, 0.92);
  --text-1:      #3c3836;
  --text-2:      #504945;
  --text-3:      #7c6f64;
  --border:      #d8cc88;
  --scrollbar:   #b8aa60;
}

/* Gruvbox Dark */
[data-theme="dark"] {
  --bg:          #282828;
  --bg-header:   rgba(40, 40, 40, 0.92);
  --bg-footer:   rgba(40, 40, 40, 0.92);
  --text-1:      #ebdbb2;
  --text-2:      #d5c4a1;
  --text-3:      #bdae93;
  --border:      #504945;
  --scrollbar:   #665c54;
}

/* ── Base ─────────────────────────────────────────────────── */
html { background-color: var(--bg); }

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text-1);
  font-family:
    "JetBrainsMono Nerd Font Mono", "FiraCode Nerd Font Mono",
    "Hack Nerd Font Mono", monospace;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.2s, color 0.2s;
}

/* ── Header bar (appears on scroll) ──────────────────────── */
header {
  background-color: transparent;
  transition: background-color 0.25s, backdrop-filter 0.25s, border-color 0.25s;
  border-bottom: 1px solid transparent;
}

header.scrolled {
  background-color: var(--bg-header);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom-color: var(--border);
}

/* ── Footer ───────────────────────────────────────────────── */
footer {
  background-color: var(--bg-footer);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  color: var(--text-2);
}

/* ── Typography helpers ───────────────────────────────────── */
.t1 { color: var(--text-1); }
.t2 { color: var(--text-2); }
.t3 { color: var(--text-3); }

a.link {
  color: var(--text-2);
  text-decoration: underline;
}
a.link:hover { color: var(--text-1); }

/* ── Theme toggle button ──────────────────────────────────── */
#theme-toggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-2);
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  transition: color 0.2s, border-color 0.2s;
}
#theme-toggle:hover { color: var(--text-1); }

/* ── Scrollbar ────────────────────────────────────────────── */
body::-webkit-scrollbar       { width: 0.6em; }
body::-webkit-scrollbar-track { background: var(--bg); }
body::-webkit-scrollbar-thumb { background-color: var(--scrollbar); border-radius: 4px; }