/* Resonar — shared design system. Linked by every page so the whole site
   looks and feels like one application. Page-specific styles stay in each
   page for now; migrate them here over time. */

:root{
  --night:#0a0e1a; --panel:#111726; --panel-2:#0d1320; --line:#233047;
  --ink:#e2e9f4; --muted:#7688a6;
  --teal:#46e2c4; --rose:#e468b4; --amber:#e8b35f;
  --teal-dim:rgba(70,226,196,.16); --rose-dim:rgba(228,104,180,.18);
  --font-display:"Space Grotesk", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, monospace;
}

/* ---- shared top navigation (injected by app.js into #app-nav) ---- */
.app-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:13px clamp(16px,4vw,40px);
  background:rgba(10,14,26,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); font-family:var(--font-mono);
}
.app-nav .nav-brand{ font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:-.01em; color:var(--ink); text-decoration:none; }
.app-nav .nav-brand span{ color:var(--teal); }
.app-nav .nav-links{ display:flex; gap:6px; flex-wrap:wrap; }
.app-nav .nav-links a{ font-size:12.5px; color:var(--muted); text-decoration:none; padding:7px 13px; border-radius:20px; border:1px solid transparent; transition:.15s; }
.app-nav .nav-links a:hover{ color:var(--ink); }
.app-nav .nav-links a.active{ color:var(--teal); border-color:var(--line); background:var(--teal-dim); }

/* ---- shared footer (optional; injected into #app-footer when present) ---- */
.app-footer{ text-align:center; color:var(--muted); font-size:11px; line-height:1.7; padding:24px 20px; border-top:1px solid var(--line); }
.app-footer b{ color:var(--ink); font-weight:500; }