/* ============================================================
   base.css: design tokens + page furniture shared by BOTH pages.
   Load FIRST, before home.css / post.css / promo.css / mobile.css.

   Contents:
     :root tokens  : palette, fonts, glass surfaces
     reset + focus : accessibility rings (keyboard only)
     body          : dark base, font, overflow guard
     #starfield    : canvas behind everything (lib/effects.js drives it)
     .aurora-*     : decorative blur blobs (parallax targets)
     #scrollProgress: top reading-progress bar
     .nav          : fixed nav + .scrolled state
     footer        : site footer
     .read-pill    : green "✓ READ" badge (featured card + collage)

   PAGE-SPECIFIC STYLES DO NOT LIVE HERE. Homepage: home.css.
   Post page: post.css. Both pages' floating UI: tts-bar/share-sheet
   live in post.css (only the post page loads them).
   ============================================================ */

:root {
  --bg-0: #05060c;
  --bg-1: #0a0c18;
  --bg-2: #10132a;
  --text-1: #eef0ff;
  --text-2: #b8bdd6;
  --text-3: #6b708c;
  --cyan: #00e5ff;
  --magenta: #ff2e9a;
  --violet: #7c3aed;
  --gold: #ffd166;
  --green: #22c55e;
  --glass: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.09);
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ---- keyboard focus states (accessibility) ----
   :focus-visible only: mouse users see nothing, keyboard users get
   a neon ring that follows the palette. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn-primary:focus-visible { box-shadow: 0 8px 30px rgba(0,229,255,0.3), 0 0 0 3px rgba(0,229,255,0.35); }
.btn-ghost:focus-visible { border-color: rgba(0,229,255,0.6); box-shadow: 0 0 0 3px rgba(0,229,255,0.25); }
.post-card:focus-visible, .featured-card:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
  border-color: rgba(0,229,255,0.4);
}
.nav-links a:focus-visible { color: var(--cyan); }

/* ---- skip-to-content link (keyboard users, screen readers) ----
   Parked above the viewport with a transform (element stays in the
   DOM and focusable, just off-screen), snaps into view on first Tab. */
.skip-link {
  position: fixed; top: 14px; left: 14px; z-index: 200;
  transform: translateY(-260%);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 1px; text-decoration: none;
  color: var(--bg-0); background: var(--cyan);
  border: 1px solid rgba(0,229,255,0.7); border-radius: 8px;
  padding: 10px 16px;
  box-shadow: 0 0 24px rgba(0,229,255,0.45);
  transition: transform 0.2s;
}
.skip-link:focus-visible { transform: translateY(0); outline-offset: 5px; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-display);
  min-height: 100vh;
  overflow-x: clip;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* ---- animated starfield (lib/effects.js) ---- */
#starfield { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* ---- aurora blobs (parallax via [data-parallax]) ---- */
.aurora {
  position: fixed; border-radius: 50%; filter: blur(90px);
  pointer-events: none; z-index: 0; opacity: 0.5;
  will-change: transform;
}
.aurora-1 { width: 520px; height: 520px; background: rgba(0,229,255,0.16); top: -160px; left: -120px; }
.aurora-2 { width: 480px; height: 480px; background: rgba(255,46,154,0.14); bottom: -160px; right: -100px; }
.aurora-3 { width: 360px; height: 360px; background: rgba(124,58,237,0.18); top: 40%; left: 55%; }

/* ---- scroll progress bar ---- */
#scrollProgress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  z-index: 100; box-shadow: 0 0 12px rgba(0,229,255,0.6);
}

/* ---- nav ---- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 40px;
  transition: padding 0.4s, background 0.4s, backdrop-filter 0.4s;
}
.nav.scrolled {
  padding: 10px 40px;
  background: rgba(5,6,12,0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--glass-border);
}
.nav-brand { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: 2px; font-size: 15px; }
.nav-brand img { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(0,229,255,0.4)); }
.nav-brand em { font-style: normal; color: var(--text-3); font-size: 11px; letter-spacing: 3px; }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a { color: var(--text-2); text-decoration: none; font-size: 13px; letter-spacing: 1px; transition: color 0.2s; }
.nav-links a:hover { color: var(--cyan); }

/* ---- footer ---- */
footer { position: relative; z-index: 1; border-top: 1px solid var(--glass-border); padding: 50px 40px; text-align: center; color: var(--text-3); font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; }
footer img { width: 28px; height: 28px; vertical-align: middle; margin-bottom: 12px; opacity: 0.8; }

/* ---- "✓ READ" pill (shared: featured card + collage cards) ---- */
.read-pill {
  display: inline-block; vertical-align: middle; margin-left: 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; font-weight: 700;
  color: var(--green); background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.45); border-radius: 999px;
  padding: 3px 10px; white-space: nowrap;
}