/* ===== tokeny motywu: fonty, kolory jasne (domyślne) i ciemne, przełącznik motywu.
   Współdzielone przez stronę główną i blog. ===== */
:root {
  --font-sans: "Geist", system-ui, sans-serif;
  --font-display: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
}
/* ===== light (default, follows system) ===== */
[data-theme="light"] {
  --bg: #fafafa; --surface: #ffffff; --surface-2: #f4f4f5;
  --border: #e7e7e9; --border-strong: #d4d4d8;
  --text: #161618; --text-2: #44444a; --muted: #8e8e93;
  --accent: #e8500f; --accent-soft: rgba(232,80,15,.09); --mark: rgba(232,80,15,.18);
  --glow: 0 0 0 1px var(--border-strong), 0 10px 24px rgba(0,0,0,.08);
}
/* ===== dark (opt-in) ===== */
[data-theme="dark"] {
  --bg: #131211; --surface: #1c1a18; --surface-2: #221f1c;
  --border: #2c2925; --border-strong: #443e36;
  --text: #f8f6f3; --text-2: #c6beb3; --muted: #97907f;
  --accent: #ff6a3d; --accent-soft: rgba(255,106,61,.14); --mark: rgba(255,106,61,.30);
  --glow: 0 0 0 1px var(--border-strong), 0 8px 24px rgba(0,0,0,.4);
}
/* theme toggle button */
.theme-btn {
  width: 32px; height: 32px; margin-left: 4px;
  display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 9999px;
  background: none; color: var(--muted); cursor: pointer;
  transition: all 150ms var(--ease);
}
.theme-btn:hover { color: var(--text); border-color: var(--border-strong); }
.theme-btn svg { width: 15px; height: 15px; }
[data-theme="dark"] .sun { display: block; } [data-theme="dark"] .moon { display: none; }
[data-theme="light"] .sun { display: none; } [data-theme="light"] .moon { display: block; }
body { transition: background-color 300ms var(--ease), color 300ms var(--ease); }

/* theme toggle: the incoming icon spins in after a click */
@keyframes themeSpin { from { transform: rotate(-120deg) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
.theme-btn.spin svg { animation: themeSpin 380ms var(--ease); }