/* ── Theme tokens ── */
:root {
  --bg:        #000000;
  --bg-nav:    rgba(6,4,2,0.92);
  --bg-card:   rgba(255,255,255,0.06);
  --border:    rgba(255,255,255,0.1);
  --divider:   #374151;
  --gradient:  rgba(255,0,0,0.04);
  --c-heading: #d1d5db;
  --c-body:    #9ca3af;
  --c-subtle:  #6b7280;
  --c-faint:   #4b5563;
  --c-accent:  #fdba74;
  --c-dot-off: #374151;
}
html.light {
  --bg:        #f8f7f4;
  --bg-nav:    rgba(228,216,200,0.96);
  --bg-card:   rgba(0,0,0,0.025);
  --border:    rgba(0,0,0,0.06);
  --divider:   #e5e7eb;
  --gradient:  rgba(255,80,0,0.05);
  --c-heading: #1a1a1a;
  --c-body:    #4a4a4a;
  --c-subtle:  #6b7280;
  --c-faint:   #9ca3af;
  --c-accent:  #c2410c;
  --c-dot-off: #d1d5db;
}

body { font-family: 'JetBrains Mono', 'Monaco', monospace; background: var(--bg); }
.font-serif { font-family: 'Playfair Display', Georgia, serif; }

/* ── Semantic color utilities ── */
.c-heading        { color: var(--c-heading); }
.c-body           { color: var(--c-body); }
.c-subtle         { color: var(--c-subtle); }
.c-faint          { color: var(--c-faint); }
.c-accent         { color: var(--c-accent); }
.hover-accent:hover { color: var(--c-accent); }

/* ── Nav scroll blend ── */
#top-nav {
  transition: background 400ms ease, backdrop-filter 400ms ease;
  background: transparent;
}
#top-nav.scrolled {
  background: var(--bg-nav);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#top-nav a.nav-active { color: var(--c-heading); }

/* ── Logo ── */
html.light img[alt="The Neat Ninja logo"] { border-radius: 1.5rem; }

/* ── Dot nav ── */
.dot              { background: var(--c-dot-off); transition: background 200ms, transform 200ms; }
.dot.active       { background: var(--c-accent); transform: scale(1.25); }
.dot:not(.active):hover { background: var(--c-subtle); }

/* ── Scroll snap ── */
html    { scroll-snap-type: y proximity; }
section { scroll-snap-align: start; }

/* ── Section backgrounds ── */
#hero       { background: #131110; }
#about      { background: #161412; }
#experience { background: #131110; }
#projects   { background: #161412; }
#contact    { background: #131110; }

html.light #hero       { background: #fdf6ec; }
html.light #about      { background: #f9f3e8; }
html.light #experience { background: #f5efe4; }
html.light #projects   { background: #f9f3e8; }
html.light #contact    { background: #fdf6ec; }

/* ── Project cards ── */
.project-card {
  display: block;
  text-decoration: none;
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* !important overrides the translateY(0) scale(1) set by .fade-up.visible */
.project-card.visible:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 12px 36px rgba(255,255,255,0.07), 0 4px 14px rgba(255,255,255,0.04);
}
html.light .project-card.visible:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.14), 0 4px 14px rgba(0,0,0,0.08);
}

/* ── Reveal animation ── */
.fade-up {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-up.visible { opacity: 1; transform: translateY(0) scale(1); }

/* ── Responsive large name in philosophy ── */
.name-large { font-size: 1.6em; line-height: 1; }
@media (max-width: 639px) { .name-large { font-size: 1.25em; } }