/* theme.css — Attendly brand layer over tokens.css. Most of the palette lives in
   tokens.css; this file carries the web-font and a couple of brand utility classes
   used by the document-level marketing shell. Component-internal styles live in
   each element's constructable stylesheet (css``). Loaded AFTER tokens.css. */

/* Inter, self-hostable later; CDN for now (no build dependency). */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* Brand wordmark gradient (used by the logo + hero headline accents). */
.pg-grad-text {
  background: var(--pg-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* A pill that signals "live / answering" — the mint state. */
.pg-live-dot {
  display: inline-block; width: .55em; height: .55em; border-radius: 50%;
  background: var(--pg-mint); box-shadow: 0 0 0 0 color-mix(in srgb, var(--pg-mint) 60%, transparent);
  animation: pg-pulse 2s var(--pg-ease) infinite;
}
@keyframes pg-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pg-mint) 55%, transparent); }
  70%  { box-shadow: 0 0 0 .6em transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .pg-live-dot { animation: none; } }