/* ============================================================
   snackdriven.com — site.css
   Single source of truth: design tokens + shared components.
   Every page links this first. Page- and feature-specific rules
   live elsewhere (e.g. blog.css) and only build on these tokens.
   ============================================================ */

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

/* ---- design tokens (the single source of truth) ---- */
:root {
  /* render native UI (scrollbars, form controls) in dark mode */
  color-scheme: dark;

  /* palette */
  --bg: #2D2B3A;
  --bg-sidebar: #252336;
  --fg: #E0DEE8;
  --green: #4AEEA0;
  --cyan: #A78BFA;
  --teal: #72C5D9;
  --magenta: #FF6B9D;
  --muted: #B5B2C8;
  --border: #3D3A50;

  /* type families */
  --font-display: "Chakra Petch", sans-serif;
  --font-body: "Inter", -apple-system, system-ui, sans-serif;
  --font-mono: "DM Mono", monospace;

  /* the neon-green glow, defined once and reused everywhere */
  --glow-green:
    0 0 2px var(--green),
    0 0 8px rgba(74, 238, 160, 0.5),
    0 0 16px rgba(74, 238, 160, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.4);
}

::selection { background: var(--green); color: var(--bg); }

/* ---- base ---- */
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: var(--fg); text-decoration: none; transition: color 0.1s; }
a:hover { color: var(--magenta); }
a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---- neon display title (reusable) ---- */
.neon {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--green);
  text-shadow: var(--glow-green);
}
.neon span {
  display: inline-block;
  position: relative;
  text-shadow: var(--glow-green);
}

@keyframes neon-flicker {
  0%, 76%  { text-shadow: var(--glow-green), 1.5px 0 2px rgba(255, 107, 157, 0.35), -1.5px 0 2px rgba(181, 178, 200, 0.35); }
  77%      { text-shadow: var(--glow-green), -2.5px 0 2px rgba(255, 107, 157, 0.55), 2.5px -1.5px 2px rgba(181, 178, 200, 0.55); }
  78%      { text-shadow: var(--glow-green), -4px 0 2.5px rgba(255, 107, 157, 0.7), 3.5px -2.5px 2.5px rgba(181, 178, 200, 0.7); }
  80%      { text-shadow: var(--glow-green), -3.5px 0 2.5px rgba(255, 107, 157, 0.7), 4px 0 2.5px rgba(181, 178, 200, 0.7); }
  82%, 100%{ text-shadow: var(--glow-green); }
}
.flickering { animation: neon-flicker 0.8s ease-in-out; }

/* ---- terminal-style top bar ---- */
.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 28px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.topbar .brand { color: var(--green); font-weight: 500; }
.topbar .brand .prompt { text-shadow: 0 0 8px rgba(74, 238, 160, 0.5); }
.topbar nav { display: flex; gap: 20px; }
.topbar nav a { color: var(--muted); }
.topbar nav a:hover { color: var(--magenta); }
.topbar nav a[aria-current="page"] { color: var(--green); }

/* ---- mono metadata row + badge (shared by list cards and articles) ---- */
.post-meta {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-bottom: 18px;
}
.post-meta .tag { color: var(--teal); }
.badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--cyan);
  padding: 2px 6px;
  border-radius: 3px;
}

/* ---- mono link cluster (footers, home page) ---- */
.links {
  display: flex;
  gap: 22px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.links a { color: var(--muted); border-bottom: 1px solid var(--border); padding-bottom: 2px; }
.links a:hover { color: var(--magenta); border-bottom-color: var(--magenta); }

.domain {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--border);
}

/* ---- page footer ---- */
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

/* ---- respect reduced-motion (WCAG 2.3.3 / prefers-reduced-motion) ----
   The home page's neon flicker is also gated in JS so it never starts;
   this is the CSS belt-and-suspenders for any motion that does run. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .post-row:hover { transform: none; }
}