/* Global theme variables */
html[data-theme="dark"] {
  --bg: #0b0b0c;
  --fg: #ffffff;
  --muted: #a3a3ad;
  --border: rgba(255,255,255,.10);
  --surface: rgba(255,255,255,.06);
  --surface-2: rgba(255,255,255,.03);
  --header-bg: rgba(10,10,12,.6);
}

html[data-theme="light"] {
  --bg: #ffffff;
  --fg: #0b0b0c;
  --muted: #4b5563;
  --border: rgba(0,0,0,.10);
  --surface: rgba(0,0,0,.04);
  --surface-2: rgba(0,0,0,.02);
  --header-bg: rgba(255,255,255,.7);
}

/* Header styling */
.site-header { position: sticky; top: 0; inset-inline: 0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.site-header-inner { max-width: var(--max, 1200px); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px clamp(14px, 4vw, 24px); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font-weight: 700; letter-spacing: -.02em; }
.brand img { width: 26px; height: 26px; display: block; }
.site-header nav { display: flex; align-items: center; gap: 10px; }
.site-header nav a { padding: .45em .8em; border-radius: 999px; color: var(--fg); text-decoration: none; background: var(--surface); border: 1px solid var(--border); }
.site-header nav a:hover { background: var(--surface-2); }
.toggle { padding: .45em .8em; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: #000; font-weight: 600; }
html[data-theme="light"] .toggle { background: #0b0b0c; color: #fff; }

/* Utility for body background to follow theme when pages don't override */
body { background: var(--bg); color: var(--fg); }