/* ─── 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:     #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 { transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease, background .14s ease, border-color .14s ease; }
.lift:hover { transform: translate(-1px, -1px); }

/* 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: tablet (≤ 900px) ───────────────────────────────────────
   TODO Task 19: hero section gridTemplateColumns → 1fr
   TODO Task 19: project tiles grid → 1fr
   TODO Task 19: repo grid → 1fr 1fr */
@media (max-width: 900px) {
}

/* ─── Responsive: mobile (≤ 600px) ───────────────────────────────────────
   TODO Task 19: outer padding → 16px 20px
   TODO Task 19: body font-size 14px
   TODO Task 19: repo grid → 1fr
   TODO Task 19: writing row drops read-time column (gridTemplateColumns: "80px 1fr")
   TODO Task 19: project detail hero → 1fr
   TODO Task 19: carousel default card width 220px, expanded min(580px, 90vw) */
@media (max-width: 600px) {
}