/* Puck brand tokens + components ("sticker paper"). See design/DESIGN.md.
   Brand surfaces only (landing, claim, dashboard, 404). Creator pages use public/css/page.css. */

:root {
  --pb-paper: #f6f1e7;
  --pb-ink: #121212;
  --pb-white: #fff;
  --pb-coral: #ff5a36;
  --pb-sun: #ffd140;
  --pb-pink: #ffc7e0;
  --pb-sky: #c7dbff;
  --pb-butter: #ffe580;
  --pb-live: #22c55e;
  --pb-nope: #e5332a;
  --pb-muted: #5c5447;
  --pb-faint: #8a8478;

  --pb-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pb-line: 3px solid var(--pb-ink);
  --pb-shadow: 8px 8px 0 var(--pb-ink);
  --pb-shadow-sm: 5px 5px 0 var(--pb-ink);
  --pb-r-btn: 12px;
  --pb-r-input: 16px;
  --pb-r-card: 20px;
  --pb-r-phone: 48px;
  --pb-ease: 120ms ease-out;
}

.pb { background: var(--pb-paper); color: var(--pb-ink); font: 16px/1.5 var(--pb-font); }
.pb-display { margin: 0; font: 900 clamp(48px, 8vw, 104px)/1 var(--pb-font); letter-spacing: -0.03em; }
.pb-display em { font-style: normal; color: var(--pb-coral); }
.pb-h2 { margin: 0; font: 900 clamp(36px, 5vw, 64px)/1.05 var(--pb-font); letter-spacing: -0.02em; }
.pb-lead { margin: 0; font-size: 22px; color: var(--pb-muted); }
.pb-caption { font-size: 13px; font-weight: 500; color: var(--pb-faint); }

/* Sticker press: pushed into the paper */
.pb-sticker { border: var(--pb-line); box-shadow: var(--pb-shadow-sm); transition: transform var(--pb-ease), box-shadow var(--pb-ease); }
.pb-sticker:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--pb-ink); }
.pb-sticker:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--pb-ink); }

.pb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border: var(--pb-line); border-radius: var(--pb-r-btn);
  background: var(--pb-coral); color: var(--pb-ink); font: 800 16px/1 var(--pb-font);
  text-decoration: none; cursor: pointer; box-shadow: var(--pb-shadow-sm);
  transition: transform var(--pb-ease), box-shadow var(--pb-ease);
}
.pb-btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--pb-ink); }
.pb-btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--pb-ink); }
.pb-btn--ink { background: var(--pb-ink); color: var(--pb-white); box-shadow: none; border-color: var(--pb-ink); font-size: 19px; }
.pb-btn--ink:hover, .pb-btn--ink:active { box-shadow: none; }
.pb-btn:focus-visible, .pb-claim input:focus-visible { outline: 3px solid var(--pb-coral); outline-offset: 3px; }

.pb-claim {
  display: flex; align-items: center; gap: 0; max-width: 620px; width: 100%;
  padding: 10px 10px 10px 24px; background: var(--pb-white);
  border: var(--pb-line); border-radius: 18px; box-shadow: var(--pb-shadow);
  font: 700 26px/1 var(--pb-font);
}
.pb-claim input { flex: 1; min-width: 0; border: 0; padding: 8px 8px 8px 0; font: inherit; color: var(--pb-ink); background: transparent; }
.pb-claim input:focus-visible { outline: none; }
.pb-claim:focus-within { box-shadow: 8px 8px 0 var(--pb-coral); }

.pb-chip { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 10px; font: 800 16px/1 var(--pb-font); color: var(--pb-white); }
.pb-chip--yours { background: var(--pb-live); }
.pb-chip--taken { background: var(--pb-faint); }
.pb-chip--nope { background: var(--pb-nope); }

.pb-bubble {
  display: inline-block; max-width: 520px; margin: 0; padding: 14px 20px; border: var(--pb-line);
  border-radius: 4px 20px 20px 20px; font: 800 20px/1.3 var(--pb-font); color: var(--pb-ink);
  animation: pb-pop 300ms ease-out;
}
.pb-bubble--approved { background: var(--pb-sun); }
.pb-bubble--taken { background: var(--pb-sky); }
.pb-bubble--reserved { background: var(--pb-pink); }

.pb-kicker { display: inline-block; padding: 9px 16px; border: 2px solid var(--pb-ink); border-radius: 999px; background: var(--pb-sun); font: 700 15px/1 var(--pb-font); }

.pb-card { padding: 22px 24px; border: var(--pb-line); border-radius: var(--pb-r-card); box-shadow: var(--pb-shadow); display: grid; gap: 10px; }
.pb-card--pink { background: var(--pb-pink); }
.pb-card--sky { background: var(--pb-sky); }
.pb-card--butter { background: var(--pb-butter); }
.pb-card .pb-card-handle { font: 800 20px/1.2 var(--pb-font); }
.pb-card .pb-card-big { font: 900 28px/1.2 var(--pb-font); }

.pb-live { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--pb-ink); color: var(--pb-white); font: 600 13px/1 var(--pb-font); }
.pb-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pb-live); animation: pb-pulse 1.6s infinite; }

.pb-phone { width: 380px; max-width: 100%; aspect-ratio: 1 / 2; background: var(--pb-white); border: 4px solid var(--pb-ink); border-radius: var(--pb-r-phone); box-shadow: 10px 12px 0 var(--pb-ink); overflow: hidden; }

.pb-puck { display: block; width: 160px; height: auto; image-rendering: auto; }
.pb-puck--badge { width: 24px; display: inline-block; vertical-align: -6px; }

@keyframes pb-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } }
@keyframes pb-pulse { 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  .pb-btn, .pb-sticker, .pb-bubble, .pb-live::before { transition: none; animation: none; }
  .pb-btn:hover, .pb-btn:active, .pb-sticker:hover, .pb-sticker:active { transform: none; }
}