/* ─── Tokens ──────────────────────────────────────────────────────────────
   Modern Dark Cards — Linear/Vercel-adjacent dark UI with a single lime
   accent. All variants use the same six tokens; nothing else is a brand
   colour. */

:root {
  --bg:      #0d0e10;   /* page background — near-black, slight cool tilt */
  --surf:    #16181c;   /* card surface (one step up from bg) */
  --surf-hi: #1d2026;   /* card surface, hovered / active / expanded */
  --line:    #2a2d33;   /* hairline borders + dividers */
  --txt:     #e9eaec;   /* primary text */
  --sub-hi:  #9ea1a6;   /* brighter secondary text */
  --sub:     #8a8d94;   /* secondary text + icons */
  --accent:  #c2ff5b;   /* lime — used sparingly: pills, active borders, CTAs */

  --sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*, *::before, *::after { box-sizing: border-box; }

/* Keyboard focus ring — lime outline, only shown for keyboard navigation */
[role="button"]:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Card hover lift — uniform across the page */
.lift { box-shadow: 0 16px 48px rgba(0,0,0,1), 0 0 0 1px rgba(255,255,255,0.06); transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease, background .14s ease, border-color .14s ease; }
.lift:hover { transform: translate(-1px, -1px); box-shadow: 0 24px 64px rgba(0,0,0,1), 0 0 0 1px rgba(255,255,255,0.12); }

/* Interactive social buttons */
.btn-social {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surf-hi);
  font-size: 12px;
  color: var(--txt);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.14s ease, color 0.14s ease;
}
.btn-social:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Row hover for list items */
.row-hover {
  transition: background 0.14s ease;
}
.row-hover:hover {
  background: var(--surf-hi);
}

/* Hand-drawn-feeling button used in the project header. Borrowed from
   the wider site's `.btn-sketch` so the CTA has a tiny bit of personality
   against an otherwise very flat dark UI. */
.btn-sketch {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  font: 500 13px/1 var(--sans);
  background: #fff;
  border: 1.5px solid var(--txt);
  color: var(--txt);
  cursor: pointer;
  border-radius: 2px;
  position: relative;
  transition: transform .08s ease, box-shadow .08s ease;
  box-shadow: 3px 3px 0 var(--txt);
}
.btn-sketch:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--txt); }
.btn-sketch:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--txt); }

/* Hide native scrollbar on the carousel — we still want wheel/trackpad
   scroll, just no chrome. */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ─── Responsive ──────────────────────────────────────────────────────────
   Layout is inline-style driven, so breakpoints live in useBreakpoint()
   in app.js (tablet ≤ 900px, mobile ≤ 600px) — not in CSS media queries. */