/* Reset básico + fundamentos do tema escuro único (sem light mode). */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;
  margin: 0;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Fundo ambiente — bolhas de cor flutuando devagar atrás do conteúdo,
   fixas ao viewport (não rolam com a página), presentes em todas as
   telas. Mesmo espírito do `_AmbientGlow` da splash do app, com um
   pouco de movimento próprio pra reforçar a identidade "viva" da marca
   (ver `.sc-mark`, o logo animado). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle 70px at 8% 10%, color-mix(in srgb, var(--color-teal) 55%, transparent), transparent 72%),
    radial-gradient(circle 130px at 92% 6%, color-mix(in srgb, var(--color-teal) 38%, transparent), transparent 70%),
    radial-gradient(circle 55px at 95% 32%, color-mix(in srgb, var(--color-coral) 55%, transparent), transparent 72%),
    radial-gradient(circle 90px at 4% 52%, color-mix(in srgb, var(--color-violet) 42%, transparent), transparent 70%),
    radial-gradient(circle 45px at 14% 88%, color-mix(in srgb, var(--color-coral) 48%, transparent), transparent 72%),
    radial-gradient(circle 65px at 88% 86%, color-mix(in srgb, var(--color-violet) 40%, transparent), transparent 70%);
  animation: sc-bg-drift 26s ease-in-out infinite alternate;
}

@keyframes sc-bg-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-1.5%, 1.5%, 0) scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* Escala tipográfica — mesma ideia de AppTypography.display/eyebrow/ui,
   traduzida pra web (tamanhos em rem, ajustados pra leitura em desktop
   além do tamanho de tela de celular que o Flutter mira). */

.eyebrow {
  font-family: var(--font-family);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-teal);
}

.eyebrow-coral {
  color: var(--color-coral);
}

.display-xl {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* Título "cartaz" da hero — caixa alta, bem espaçado, peso máximo do
   Sora (800). Estilo emprestado da apresentação feita pra usuários. */
.display-billboard {
  font-family: var(--font-family);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(2.5rem, 8vw, 5rem);
  line-height: 1.05;
}

.display-lg {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.15;
}

.display-md {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  line-height: 1.2;
}

.text-lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.text-body {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.text-small {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-dim);
}

.text-primary {
  color: var(--color-text-primary);
}

/* Gradiente do wordmark — mesmo par de cores de _GradientChanceText em
   lib/features/auth/splash_screen.dart (ShaderMask com
   LinearGradient(colors: [AppColors.coral, Color(0xFFB94DFF)])). */
.gradient-text {
  background: linear-gradient(90deg, var(--color-coral), var(--color-magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.container-narrow {
  width: 100%;
  max-width: var(--content-narrow-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  .container,
  .container-narrow {
    padding: 0 var(--space-4);
  }
}