/* Paxy — Design System v1.0 (2026)
   Fundo, tipografia, cores, cards e tags aplicados por cima do template RiteFlow. */

:root, :host {
  /* tokens do template remapeados para os valores exatos do design system */
  --color-secondary: #0A0A0F;   /* Ink — fundo primário */
  --color-offWhite: #F1EDE9;    /* Bone — texto sobre fundo escuro */
  --color-paragraph: #F1EDE9CC; /* Bone 80% — texto de apoio */
  --color-primary: #8062E0;     /* Violet — ação primária */
  --color-tertiary: #B39CF5;    /* Aurora clara — badges, ícones, estado "info" */
  --color-blue: #14122B;        /* Midnight — cards, painéis, seções alternadas */

  /* paleta completa do design system, para uso pontual */
  --ds-ink: #0A0A0F;
  --ds-midnight: #14122B;
  --ds-bone: #F1EDE9;
  --ds-violet: #8062E0;
  --ds-indigo: #3B2FD0;
  --ds-magenta: #A72BB8;
  --ds-coral: #D2705C;
  --ds-coral-onlight: #B4523D;
  --ds-success: #7BC49A;
  --ds-warning: #E0B15C;
  --ds-info: #B39CF5;
}

/* Tipografia — Display (Playfair, tracking -2%) para títulos */
h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display", serif;
  letter-spacing: -0.02em;
}

/* Gradiente do título do hero (.gradient-text) — Bone → Violet, cor real do design system */
.gradient-text {
  background-image: linear-gradient(180deg, #F1EDE9 62.71%, #8062E0 90.4%);
}

/* Texto branco sólido dentro de um heading .gradient-text (que herda -webkit-text-fill-color: transparent) */
.text-fill-white {
  -webkit-text-fill-color: #fff;
  text-fill-color: #fff;
  color: #fff;
}

/* Cores pontuais da paleta, para aplicar onde precisar.
   -webkit-text-fill-color também é setado porque, dentro de um heading .gradient-text,
   o filho herda -webkit-text-fill-color: transparent do pai e isso vence o "color". */
.text-violet { color: var(--ds-violet); -webkit-text-fill-color: var(--ds-violet); }
.text-indigo { color: var(--ds-indigo); -webkit-text-fill-color: var(--ds-indigo); }
.text-magenta { color: var(--ds-magenta); -webkit-text-fill-color: var(--ds-magenta); }
.text-coral { color: var(--ds-coral); -webkit-text-fill-color: var(--ds-coral); }
.bg-midnight { background-color: var(--ds-midnight); }
.bg-ink { background-color: var(--ds-ink); }

/* Cartão de recurso — raio 16px, fundo midnight, borda 8% bone, padding 28px, sem sombra (elev-0) */
.ds-card {
  border-radius: 16px;
  background-color: var(--ds-midnight);
  border: 1px solid rgba(241, 237, 233, 0.08);
  padding: 28px;
  box-shadow: none;
}

/* Pílula / tag — mono, caixa alta, tracking 0.12em, raio full */
.ds-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: 9999px;
  padding: 6px 14px;
  background-color: rgba(128, 98, 224, 0.15);
  color: var(--ds-violet);
  border: none;
}

/* Variantes de status da tag — contorno + preenchimento leve na cor, mesmo formato de pílula.
   Uso: <span class="ds-tag ds-tag--violet">Novo</span> */
.ds-tag--violet {
  background-color: rgba(128, 98, 224, 0.12);
  color: var(--ds-violet);
  border: 1px solid rgba(128, 98, 224, 0.4);
}
.ds-tag--coral {
  background-color: rgba(210, 112, 92, 0.12);
  color: var(--ds-coral);
  border: 1px solid rgba(210, 112, 92, 0.4);
}
.ds-tag--neutral {
  background-color: transparent;
  color: rgba(241, 237, 233, 0.7);
  border: 1px solid rgba(241, 237, 233, 0.16);
}
.ds-tag--bone {
  background-color: rgba(241, 237, 233, 0.12);
  color: var(--ds-bone);
  border: 1px solid rgba(241, 237, 233, 0.4);
}

/* Aurora — gradiente de marca (Indigo → Violet → Magenta → Ink).
   Uso: login, primeira dobra, capas. */
.bg-aurora {
  background-image: linear-gradient(135deg, var(--ds-indigo) 0%, var(--ds-violet) 38%, var(--ds-magenta) 68%, var(--ds-ink) 100%);
}

/* Título do hero — maior em telas grandes */
.hero-title {
  font-size: 44px;
}
@media (min-width: 1024px) {
  .hero-title {
    font-size: 68px;
  }
}
@media (min-width: 1280px) {
  .hero-title {
    font-size: 84px;
  }
}
@media (min-width: 1536px) {
  .hero-title {
    font-size: 100px;
  }
}

/* Bloco de intro do hero — precisa crescer junto com .hero-title, senão o texto
   quebra em mais linhas do que o previsto (o max-w-[700px] do template era fixo). */
.hero-intro {
  max-width: 700px;
}
@media (min-width: 1024px) {
  .hero-intro {
    max-width: 1000px;
  }
}
@media (min-width: 1280px) {
  .hero-intro {
    max-width: 1200px;
  }
}
@media (min-width: 1536px) {
  .hero-intro {
    max-width: 1450px;
  }
}

/* Eyebrow — 12px, tracking 0.18em, caixa alta, mono */
.badge-button {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}