/* ───────────────────────────────────────────────────────────────────────
 * Weird Network — site chrome (shared nav + footer + theme tokens)
 *
 * Single source of truth for pre-login pages. Tokens align with the captive
 * portal at routes/portal-page.js. Legacy aliases (`--accent`, `--bg-dark`,
 * etc.) are preserved so existing page-specific CSS rules keep working
 * after their inline `:root` blocks are dropped.
 *
 * Usage: <link rel="stylesheet" href="/chrome/site-chrome.css">
 *        after the Google Fonts <link> in each pre-login page.
 * ─────────────────────────────────────────────────────────────────── */

:root {
  /* Canonical tokens — match routes/portal-page.js */
  --primary:        #22d3ee;
  --secondary:      #0891b2;
  --bg:             #0a0e1a;
  --bg-card:        #111827;
  --bg-card2:       #141d2e;
  --text:           #f1f5f9;
  --text-dim:       #94a3b8;
  --text-muted:     #64748b;
  --border:         rgba(148, 163, 184, 0.1);
  --glow:           rgba(34, 211, 238, 0.15);
  --gradient:       linear-gradient(135deg, #22d3ee 0%, #0891b2 100%);

  /* Legacy aliases — keep so existing page rules keep resolving.
   * Remove once every page reads only canonical names. */
  --accent:         #22d3ee;
  --accent-dim:     #0891b2;
  --accent-glow:    rgba(34, 211, 238, 0.15);
  --accent2:        #818cf8;
  --bg-dark:        #0a0e1a;
  --bg-card-2:      #0f1623;
  --surface:        #111111;
  --surface2:       #161616;
  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --muted:          #64748b;
  --gradient-1:     linear-gradient(135deg, #22d3ee 0%, #818cf8 100%);
  --gradient-2:     linear-gradient(135deg, #0891b2 0%, #6366f1 100%);

  /* Status colors used by roadmap/features badges */
  --green:          #22c55e;
  --yellow:         #eab308;
  --blue:           #38bdf8;
  --amber:          #f59e0b;
  --red:            #ef4444;
  --status-built:   #22c55e;
  --status-beta:    #22d3ee;
  --status-stable:  #4ade80;
  --status-soon:    #64748b;
  --status-next:    #818cf8;
  --live-bg:        rgba(34, 197, 94, 0.12);
  --live-border:    rgba(34, 197, 94, 0.3);
  --live-text:      #4ade80;
}

/* ── Site header / nav ───────────────────────────────────────────── */

.site-header {
  position: relative;
  z-index: 10;
  padding: 1.5rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-logo {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  text-decoration: none;
  color: var(--text);
}
.site-logo span,
.site-logo > span {
  background: var(--gradient-1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.site-nav-link {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-nav-link:hover,
.site-nav-link.active {
  color: var(--text);
}

.site-nav-cta {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--glow);
  border: 1px solid rgba(34, 211, 238, 0.2);
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.site-nav-cta:hover {
  background: rgba(34, 211, 238, 0.22);
  border-color: rgba(34, 211, 238, 0.4);
}

/* ── Background mesh ─────────────────────────────────────────────── */

.bg-mesh {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(34, 211, 238, 0.05) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(129, 140, 248, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Site footer ─────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.site-footer-tagline {
  margin-bottom: 0.75rem;
  color: var(--primary);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
}
.site-footer-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  max-width: 100%;
}
.site-footer-nav a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-footer-nav a:hover {
  color: var(--primary);
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .site-header  { padding: 1.1rem 1.25rem; }
  .site-nav     { flex-wrap: wrap; gap: 0.75rem; }
  .site-nav-links { gap: 0.85rem; flex-wrap: wrap; }
  .site-nav-link { font-size: 0.8rem; }
  .site-nav-cta  { font-size: 0.72rem; padding: 0.3rem 0.7rem; }
  .site-footer { padding: 1.5rem 1.25rem; }
  .site-footer-nav { flex-wrap: wrap; gap: 0.45rem 0.85rem; }
}