/* ─── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  /* dark mode is default */
  --bg:        #0e0e11;
  --bg-2:      #141417;
  --bg-3:      #1a1a1f;
  --border:    rgba(255,255,255,0.08);
  --border-hi: rgba(255,255,255,0.14);
  --fg:        #f0f0f2;
  --fg-2:      #a0a0aa;
  --fg-3:      #666672;
  --accent:    #f5a623;
  --accent-bg: rgba(245,166,35,0.10);
  --accent-bd: rgba(245,166,35,0.22);
  --green:     #3ecf8e;
  --code-bg:   #080810;
  --card-bg:   #141417;
  --card-hover:#1c1c22;
  --nav-bg:    rgba(14,14,17,0.85);
  --shadow:    0 4px 24px rgba(0,0,0,0.5);
}

[data-theme="light"] {
  --bg:        #fafaf8;
  --bg-2:      #f5f4f0;
  --bg-3:      #edebe6;
  --border:    rgba(0,0,0,0.08);
  --border-hi: rgba(0,0,0,0.14);
  --fg:        #1a1a1a;
  --fg-2:      #555;
  --fg-3:      #888;
  --accent:    #d4880e;
  --accent-bg: rgba(245,166,35,0.08);
  --accent-bd: rgba(245,166,35,0.22);
  --green:     #059669;
  --code-bg:   #111;
  --card-bg:   #fafaf8;
  --card-hover:#f3f2ee;
  --nav-bg:    rgba(250,250,248,0.85);
  --shadow:    0 4px 24px rgba(0,0,0,0.1);
}

/* ─── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Space Grotesk', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.25s, color 0.25s;
}

::selection { background: rgba(245,166,35,0.25); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--fg-3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-2); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: inherit; text-decoration: none; }

/* ─── Utility ───────────────────────────────────────────────────────────────── */
.section-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  margin-bottom: 1rem;
}
.section-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--fg);
  margin: 0 0 3.5rem;
}

/* ─── Dark-mode animated mini-preview keyframes ─────────────────────────────── */
@keyframes pulse-bar {
  0%   { width: 20%; }
  50%  { width: 85%; }
  100% { width: 20%; }
}
@keyframes blink-cursor {
  50% { opacity: 0; }
}
@keyframes slide-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes token-fill {
  0%   { width: 10%; }
  100% { width: 72%; }
}
@keyframes scan-line {
  0%   { top: 0; }
  100% { top: 100%; }
}
@keyframes node-appear {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes dot-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40%           { transform: scale(1); }
}
/* Live duration ticker — the value changes visually to suggest counting up */
@keyframes tick-pulse {
  0%, 90% { opacity: 1; }
  95%      { opacity: 0.35; }
  100%     { opacity: 1; }
}
.anim-tick {
  animation: tick-pulse 0.9s ease-in-out infinite;
  color: var(--accent) !important;
}