/* Root tokens, typography, background layers, and global animations.
 * Loaded first; layout.css and flow-stage.css depend on these. */

:root {
  --bg: #ffffff;
  --bg-2: #f7f8fa;
  --line: rgba(10,15,26,0.08);
  --line-2: rgba(10,15,26,0.14);
  --fg: #0a0f1a;
  --fg-dim: #56607a;
  --fg-mute: #8b93a7;
  --primary: #2663EB;
  --primary-dark: #1d4ed8;
  --primary-light: #3b82f6;
  --primary-soft: rgba(38,99,235,0.08);
  --primary-glow: rgba(38,99,235,0.18);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); }

body {
  font-family: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11";
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

.mono { font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0; }

/* Background grid + glow layers (fixed, behind content) */
.bg-grid {
  position: fixed; inset: 0; z-index: 0;
  background-image:
    linear-gradient(to right, rgba(10,15,26,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,15,26,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 45%, black 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 45%, black 40%, transparent 85%);
  pointer-events: none;
}
.bg-glow {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 72% 18%, rgba(38,99,235,0.10), transparent 50%),
    radial-gradient(circle at 18% 82%, rgba(38,99,235,0.05), transparent 55%);
}

/* Global keyframes - referenced by layout.css and flow-stage.css */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dashMove { to { stroke-dashoffset: -48; } }
@keyframes nodeIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Countdown digit-roll utility */
.digit-wrap { display: inline-flex; overflow: hidden; height: 1em; vertical-align: baseline; }
.digit-wrap .stack { display: flex; flex-direction: column; transition: transform 0.45s cubic-bezier(.2,.8,.2,1); }
.digit-wrap .stack span { line-height: 1; height: 1em; }

/* Reduced-motion: disable all decorative animations and transitions for users
 * who request it. Layout still arrives at the final state since fadeUp etc.
 * end at opacity:1; we just snap there instead of animating. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}