@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Space+Grotesk:wght@400;500;600&display=swap');

:root {
  --pm-bg: #f7f7f7;
  --pm-ink: #0e0e0e;
  --pm-brand: #0a2bff;
  --pm-accent: #ffd500;
  --pm-danger: #ff3b30;
}

body {
  background: var(--pm-bg);
  color: var(--pm-ink);
}

.font-display { font-family: 'Bricolage Grotesque', sans-serif; }
.font-body { font-family: 'Space Grotesk', sans-serif; }

.pm-chip {
  border: 2px solid var(--pm-ink);
  border-radius: 9999px;
  background: white;
  box-shadow: 2px 2px 0 0 var(--pm-ink);
}

.pm-card {
  border: 2px solid var(--pm-ink);
  border-radius: 0.9rem;
  background: white;
  box-shadow: 4px 4px 0 0 var(--pm-ink);
}

.pm-cta {
  border: 2px solid var(--pm-ink);
  border-radius: 0.75rem;
  box-shadow: 5px 5px 0 0 var(--pm-ink);
}

.pm-cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 0 var(--pm-ink);
}

.pm-subtle {
  border: 2px solid var(--pm-ink);
  border-radius: 0.75rem;
  background: #f2f2f2;
}