/* Shared light/dark tokens and header theme toggle for myfispoints.com */
:root {
  --ink: #0b1d2e;
  --ink-2: #0f2740;
  --snow: #f5f8fa;
  --snow-dim: #c9d4dc;
  --gate-red: #e8362e;
  --gate-blue: #3b66ff;
  --amber: #ffb020;
  --steel: #9eafbb;
  --hairline: rgba(245, 248, 250, 0.12);
  --radius: 10px;
  --page-bg: var(--ink);
  --page-text: var(--snow);
  --page-muted: var(--snow-dim);
  --page-surface: var(--ink-2);
  --page-strong: var(--snow);
  --btn-bg: var(--snow);
  --btn-fg: var(--ink);
  --dock-bg: rgba(11, 29, 46, 0.92);
  color-scheme: dark;
}

html[data-theme="light"] {
  --steel: #7f929f;
  --hairline: rgba(11, 29, 46, 0.12);
  --page-bg: var(--snow);
  --page-text: var(--ink);
  --page-muted: #4e6270;
  --page-surface: #ffffff;
  --page-strong: var(--ink);
  --btn-bg: var(--ink);
  --btn-fg: var(--snow);
  --dock-bg: rgba(245, 248, 250, 0.92);
  color-scheme: light;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.theme-tabs {
  display: inline-flex;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  overflow: hidden;
}

.theme-tabs button {
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  background: transparent;
  color: var(--steel);
  padding: 6px 14px;
  cursor: pointer;
}

.theme-tabs button[aria-selected="true"] {
  background: rgba(59, 102, 255, 0.18);
  color: var(--page-text);
}

@media (max-width: 560px) {
  .header-tools .tag-pill { display: none; }
}

.site-nav {
  position: relative;
  z-index: 2;
  padding: 16px 0 0;
}
.site-nav .wrap,
.site-nav [data-site-nav] {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 0;
}
.site-nav a {
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--steel);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 6px 12px;
}
.site-nav a.active {
  color: var(--page-text);
  border-color: rgba(59, 102, 255, 0.55);
  background: rgba(59, 102, 255, 0.18);
}

.footer-nav { display: contents; }
footer .footer-links { flex-wrap: wrap; }
.footer-links a.active { color: var(--page-text); }