/* Inter + Montserrat — self-hosted (Fontsource 5.2.5). */

:root {
  --font-heading: "Montserrat", system-ui, sans-serif;
  --font-primary: "Inter", system-ui, sans-serif;
  --font-secondary: "Inter", system-ui, sans-serif;

  --fd-content-pad: clamp(1rem, 4vw, 2.5rem);

  --color-brand: #6366f1;
  --color-brand-mid: #8b5cf6;
  --color-brand-hover: #4f46e5;
  --color-page: #f8fafc;
  --color-page-accent: #eef2ff;
  --color-charcoal: #121212;
  --color-gray: #64748b;

  --gradient-cta: linear-gradient(90deg, #6366f1 0%, #a855f7 100%);
  --gradient-brand-wordmark: linear-gradient(
    100deg,
    #4c1d95 0%,
    #6d28d9 22%,
    #a855f7 48%,
    #e879f9 65%,
    #f59e0b 92%,
    #d97706 100%
  );

  /* Fundo página — mesma paleta dopme.io do Roadmap */
  --fd-page-bg:
    radial-gradient(ellipse 90% 58% at 50% -4%, rgba(165, 180, 252, 0.52) 0%, transparent 58%),
    radial-gradient(ellipse 68% 48% at 6% 10%, rgba(196, 181, 253, 0.36) 0%, transparent 52%),
    radial-gradient(ellipse 68% 52% at 94% 6%, rgba(196, 181, 253, 0.32) 0%, transparent 50%),
    radial-gradient(ellipse 78% 62% at 4% 94%, rgba(165, 180, 252, 0.34) 0%, transparent 52%),
    radial-gradient(ellipse 58% 48% at 84% 82%, rgba(217, 70, 239, 0.16) 0%, transparent 58%),
    radial-gradient(ellipse 52% 42% at 14% 55%, rgba(124, 58, 237, 0.12) 0%, transparent 55%),
    linear-gradient(165deg, #eef2ff 0%, #eef2ff 14%, #f5f3ff 46%, #faf5ff 72%, #fdf2f8 100%);
  --fd-page-bg-dark:
    radial-gradient(ellipse 90% 58% at 50% -4%, rgba(76, 29, 149, 0.28) 0%, transparent 58%),
    radial-gradient(ellipse 68% 48% at 6% 10%, rgba(49, 46, 129, 0.22) 0%, transparent 52%),
    radial-gradient(ellipse 68% 52% at 94% 6%, rgba(76, 29, 149, 0.18) 0%, transparent 50%),
    linear-gradient(165deg, #1a1628 0%, #14101f 46%, #12101c 100%);
}

.font-primary-bold {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
}

.font-secondary {
  font-family: var(--font-secondary) !important;
  font-weight: 400 !important;
}

.font-secondary-bold {
  font-family: var(--font-secondary) !important;
  font-weight: 700 !important;
}

html {
  scroll-behavior: smooth;
  overflow: hidden;
  width: 100%;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  background-color: #eef2ff;
  background-image: var(--fd-page-bg);
  background-repeat: no-repeat;
  background-size: cover;
}

html,
body {
  height: 100dvh;
  max-height: 100dvh;
  overscroll-behavior: none;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100vw;
  font-family: var(--font-primary);
  background: transparent;
  color: var(--color-charcoal);
  overflow: hidden;
}

#app {
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  width: 100%;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
}

#app > * {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}

.fd-main:focus,
.fd-main:focus-visible {
  outline: none;
}

.fd-brand-wordmark {
  font-family: var(--font-primary);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  background: var(--gradient-brand-wordmark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.fd-page--not-found {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 2rem var(--fd-content-pad);
}

.fd-not-found {
  max-width: 28rem;
  text-align: center;
}

.fd-pill {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand);
  background: rgba(99, 102, 241, 0.1);
}

.fd-not-found-title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.fd-not-found-text {
  margin: 0 0 1.25rem;
  color: var(--color-gray);
}

.fd-not-found-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-brand);
  text-decoration: none;
}

.fd-not-found-link:hover {
  color: var(--color-brand-hover);
}

.fd-inline-icon {
  flex-shrink: 0;
}

html[data-theme="dark"] {
  background-color: #12101c;
  background-image: var(--fd-page-bg-dark);
}

/* Acessibilidade — não deve expandir o documento nem gerar scroll */
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: fixed !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  top: 0 !important;
  left: 0 !important;
  pointer-events: none !important;
}