/* Veutel's Sora / Plus Jakarta Sans typography and purple brand palette.
   Fonts are bundled locally; this theme is scoped to the card and its preview. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonts/sora-latin.woff2') format('woff2');
}

.profile-page,
#mini-card {
  --veutel-brand: #9889ce;
  --veutel-deep: #5e4680;
  --veutel-ink: #201c44;
  --veutel-muted: #6b6b86;
  --veutel-surface: #f7f6fb;
  --veutel-soft: #f3efff;
  --veutel-border: #e6e3f1;
  --veutel-ring: #c4b5fd;
  --accent: #5e4680;
  --accent-text: #ffffff;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  color: var(--veutel-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.profile-page {
  background: radial-gradient(ellipse at top, #efeaff, transparent 65%), var(--veutel-surface);
}
.profile-page .public-card {
  border-color: var(--veutel-border);
  box-shadow: 0 14px 50px #201c4410;
}
.profile-page .profile-cover {
  background: radial-gradient(ellipse at top right, #ec489925, transparent 65%),
    linear-gradient(120deg, var(--veutel-deep), var(--veutel-brand));
}
.profile-page .profile-avatar {
  width: 112px;
  height: 112px;
  margin-top: -50px;
  border-radius: 28px;
  font-size: 32px;
  color: var(--veutel-deep);
  box-shadow: 0 3px 14px #5e468018;
}
#mini-card .mini-avatar {
  width: 76px;
  height: 76px;
  border-radius: 21px;
  font-size: 24px;
}
@media (min-width: 641px) {
  .profile-page .profile-avatar {
    width: 120px;
    height: 120px;
    margin-top: -54px;
    border-radius: 30px;
  }
}
.profile-page .profile-name,
.profile-page .profile-loading h1,
#mini-card h3 {
  font-family: 'Sora', 'Plus Jakarta Sans', sans-serif;
  font-weight: 650;
  letter-spacing: -.025em;
  color: var(--veutel-ink);
}
.profile-page .profile-role,
.profile-page .profile-bio,
.profile-page .profile-contact small,
.profile-page .profile-loading p,
#mini-card .mini-role,
#mini-card .mini-bio,
#mini-card .mini-placeholder {
  color: var(--veutel-muted);
}
.profile-page .profile-save {
  min-height: 50px;
  border-radius: 14px;
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 4px 14px #5e468024;
}
.profile-page .profile-save:hover {
  filter: brightness(1.08);
}
.profile-page .profile-contact,
#mini-card .mini-contact {
  color: var(--veutel-ink);
  border-color: var(--veutel-border);
}
.profile-page .profile-contact:hover {
  color: var(--veutel-deep);
}
.profile-page .profile-contact .contact-icon {
  background: var(--veutel-soft);
  color: var(--veutel-deep);
}
.profile-page .profile-contact > .icon,
#mini-card .mini-contact .icon {
  color: var(--veutel-deep);
}
.profile-page .profile-links-heading,
#mini-card .profile-links-heading {
  font-family: 'Sora', 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  color: var(--veutel-deep);
}
.profile-page .profile-link,
#mini-card .mini-link {
  color: var(--veutel-deep);
  border-color: var(--veutel-border);
  background: var(--veutel-surface);
  font-weight: 600;
}
.profile-page .profile-link:hover,
.profile-page .profile-link.profile-hand-hover {
  background: var(--veutel-soft);
  border-color: var(--veutel-brand);
}
.profile-page .profile-link.has-partner-brand,
#mini-card .mini-link.has-partner-brand {
  background: #ffffff;
}
.profile-page .profile-link.has-partner-brand:hover,
.profile-page .profile-link.has-partner-brand.profile-hand-hover {
  background: var(--veutel-surface);
}
.profile-page .partner-logo,
#mini-card .partner-logo {
  border-color: var(--veutel-border);
}
.profile-page .partner-logo[href]:hover,
.profile-page .partner-logo[href]:focus-visible,
#mini-card .partner-logo[href]:hover,
#mini-card .partner-logo[href]:focus-visible {
  border-color: var(--veutel-brand);
  box-shadow: 0 0 0 3px #9889ce22;
}
.profile-page .social-link,
#mini-card .social-link {
  color: var(--veutel-deep);
  background: var(--veutel-soft);
  border-color: var(--veutel-border);
}
.profile-page .social-link:hover,
.profile-page .social-link.profile-hand-hover,
#mini-card .social-link:hover {
  color: #ffffff;
  background: var(--veutel-deep);
  border-color: var(--veutel-deep);
}
.profile-page .social-link.profile-hand-hover {
  transform: translateY(-2px);
}

/* Decorative hand: leaves every real link and touch gesture available. */
.profile-hand {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  width: 28px;
  height: 32px;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: transform 450ms cubic-bezier(.22, .61, .36, 1), opacity 120ms ease;
  filter: drop-shadow(0 2px 2px #201c4433);
}
.profile-hand svg { display: block; width: 100%; height: 100%; }
.profile-hand[hidden] { display: none; }
.profile-page .share-profile {
  color: var(--veutel-deep);
  font-weight: 600;
}
.profile-page .profile-loading > .icon {
  color: var(--veutel-brand);
}
.profile-page .loading-ring {
  border-color: var(--veutel-border);
  border-top-color: var(--veutel-deep);
}
.profile-page .button.secondary {
  color: var(--veutel-deep);
  border-color: var(--veutel-border);
}
.profile-page .button.secondary:hover {
  background: var(--veutel-soft);
}
.profile-page .toast {
  background: var(--veutel-ink);
  color: #ffffff;
  box-shadow: 0 5px 25px #201c4420;
}
.profile-page button:focus-visible,
.profile-page a:focus-visible,
#mini-card a:focus-visible {
  outline: 3px solid var(--veutel-ring);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .profile-page .profile-save:hover { filter: none; }
  .profile-hand { display: none; }
  .profile-page .social-link.profile-hand-hover { transform: none; }
}