/* © 2026 William C. Chesher. All Rights Reserved.
   tokens - bench's colours, type and motion, the ONE source every page reads. Same method spawn
   uses (glitch's rule: every colour a token here, no page restates one), in bench's identity.

   Two players on the dark screen, as spawn has: ORANGE is player one (the student, the tool under
   the light) and leads; BLUE is player two (Claude, the build partner) and appears only where
   player two acts. AMBER is triggers. The one gradient (--genesis) walks orange to blue, player
   one into player two, and is spent on display type only. bench's identity is "tools made of
   code": neon over a deep void that leans blue, so the screen reads as a place, not an absence. */

:root {
  --void: #0a0e17;              /* the ground: a void leaning blue, never grey */
  --panel: #111726;
  --panel-2: #161d2e;
  --line: rgba(255, 255, 255, .08);
  --orange: #ff8a1e;            /* player one, the lead */
  --orange-lt: #ffa24d;
  --orange-ink: #1a1200;
  --blue: #2e9bff;             /* player two, Claude */
  --blue-lt: #5bb2ff;
  --amber: #ffc53d;            /* triggers */
  --mint: #39d7a6;            /* perception / good / strings */
  --caution: #ffb347;
  --bad: #ff5d73;            /* stop */
  --ink: #e9edf7;
  --ink-2: #c7d0e6;
  --ink-dim: #97a3bd;
  --ink-faint: #5e6a86;
  --disp: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --wordmark: "Space Grotesk", "Poppins", system-ui, sans-serif;  /* the logo's lead */
  --radius: 14px;
  --radius-sm: 10px;
  --maxw: 1080px;
  --side: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.2, 0, .2, 1);
  --fast: 150ms;
  --genesis: linear-gradient(100deg, var(--orange) 6%, var(--orange-lt) 36%, var(--blue-lt) 72%, var(--blue) 98%);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--disp);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100%;
}

/* THE VOID: player one's light on the left, player two's on the right, fixed behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 10% -8%, rgba(255, 138, 30, .10), transparent 70%),
    radial-gradient(70% 55% at 92% -4%, rgba(46, 155, 255, .13), transparent 70%);
}

/* the gradient headline: player one into player two, clipped to the letters */
.clip {
  background: var(--genesis);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* the eyebrow: mono, uppercase, two pulsing dots (player one, player two) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 14px;
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 10px var(--orange);
  animation: pulse 1.8s ease-in-out infinite;
}
.eyebrow .dot.two { background: var(--blue); box-shadow: 0 0 10px var(--blue); animation-delay: .6s; }
@keyframes pulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .eyebrow .dot { animation: none; }
}