/* Choose Your Own AI Adventure: shared tokens (from the Claude Design mockups) */
@font-face { font-family: "Poppins"; src: url("fonts/poppins-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --bg: #1c2028;
  --line: #313845;
  --line-2: #4a5262;
  --text: #eef1f6;
  --muted: #c4cbd6;
  --ink: #000033;        /* text on colored chips */
  --accent: #ff9900;
  --accent-2: #ffad33;
  --p1: #ff9900;
  --p2: #38bdf8;
  --p3: #a3e635;
  --p4: #f472b6;
  --display: "Poppins", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); }
button { font-family: var(--display); cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

[data-i="0"] { --c: var(--p1); --glow: #ff990055; }
[data-i="1"] { --c: var(--p2); --glow: #38bdf855; }
[data-i="2"] { --c: var(--p3); --glow: #a3e63555; }
[data-i="3"] { --c: var(--p4); --glow: #f472b655; }

.chip-num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--c);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
}

.eyebrow {
  font-family: var(--body);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.live { animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}