/**
 * Minimal tokens + logo/button for pages that don't load tools.css
 * (blog, legal, brief, marketplace stubs). Used with tools-shell.js.
 */
:root {
  --bg: #151c28;
  --surface: #243044;
  --surface2: #2c3a50;
  --border: #4a5f78;
  --border2: #5a7290;
  --text: #f5f7fa;
  --muted: #c5d0dc;
  --subtle: #9aabbd;
  --accent: #c9a227;
  --accent-dim: rgba(201, 162, 39, 0.12);
  --green: #2dd4a3;
  --radius: 14px;
  --radius-sm: 9px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
}
.logo:hover { text-decoration: none; }
.logo-mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.logo-mark span {
  border-radius: 3px;
  background: var(--subtle);
  animation: kpLogoCellPulse 2.8s ease-in-out infinite;
}
.logo-mark span:nth-child(5) {
  background: var(--accent);
  animation: kpLogoHotPulse 2s ease-in-out infinite;
}
.logo-mark span:nth-child(2) { animation-delay: 0.15s; }
.logo-mark span:nth-child(3) { animation-delay: 0.3s; }
.logo-mark span:nth-child(4) { animation-delay: 0.45s; }
.logo-mark span:nth-child(6) { animation-delay: 0.6s; }
.logo-mark span:nth-child(7) { animation-delay: 0.75s; }
.logo-mark span:nth-child(8) { animation-delay: 0.9s; }
.logo-mark span:nth-child(9) { animation-delay: 1.05s; }
@keyframes kpLogoCellPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.9; } }
@keyframes kpLogoHotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
.logo-text {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text);
}
.logo-text em { color: var(--accent); font-style: normal; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1.1rem;
  border-radius: 9px;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
}
.btn-primary {
  background: var(--accent);
  color: #110e00;
}
.btn-primary:hover { filter: brightness(1.05); text-decoration: none; }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .logo-mark span { animation: none !important; opacity: 1 !important; transform: none !important; }
}