/* Shared tokens and navigation for every page on the site.
   Add a page: edit the PAGES list in nav.js. Nothing here needs to change. */

:root {
  color-scheme: dark;

  --ink:    #080d18;
  --panel:  rgba(16, 26, 46, .5);
  --accent: #4cc9f0;
  --warn:   #ff6b8a;
  --text:   #eef4ff;
  --muted:  #93a9c8;

  --edge:      rgba(255, 255, 255, .10);
  --highlight: rgba(255, 255, 255, .16);

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body:    "IBM Plex Sans", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;
}

/* ---------- Tabs ---------- */

/* Aero glass, to match the cursors: a blur, a hairline edge, and one bright
   line along the top where the light catches. */
.tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)), var(--panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 var(--highlight);
  transform: translate3d(0, 0, 0);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tabs a {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  white-space: nowrap;
  color: var(--muted);
  text-decoration: none;
  padding: 9px 18px;
  border-radius: 999px;
  transition: color .2s ease, background .2s ease;
}

.tabs a:hover { color: var(--text); background: rgba(255, 255, 255, .05); }

.tabs a[aria-current="page"] {
  color: var(--accent);
  background: rgba(76, 201, 240, .12);
  box-shadow: inset 0 0 0 1px rgba(76, 201, 240, .35);
}

/* Placement variants. Pick one on the [data-nav] container. */

.tabs-fixed {
  position: fixed;
  top: clamp(18px, 3vw, 30px);
  right: clamp(18px, 3vw, 34px);
  z-index: 30;
  display: flex;
  justify-content: flex-end;
}

.tabs-inline { display: block; }

@media (max-width: 560px) {
  .tabs-fixed {
    left: 12px;
    right: 12px;
    top: 12px;
  }
  .tabs { display: flex; width: 100%; }
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .tabs a { transition: none; }
}