/* ==========================================================================
   JOE REIS DESIGN SYSTEM — COMPONENTES  (v0.1)
   Depende de tokens/tokens.css. Nenhum valor de cor/medida "solto" aqui:
   tudo vem de variáveis. Prefixo "ds-" evita conflito com outros estilos.
   ========================================================================== */

/* ---------- Base ---------- */
.ds-base, .ds-base *, .ds-base *::before, .ds-base *::after { box-sizing: border-box; }
.ds-base {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-base);
  -webkit-font-smoothing: antialiased;
}
.ds-base h1, .ds-base h2, .ds-base h3 { margin: 0; font-family: var(--font-heading); letter-spacing: var(--tracking-tight); }
.ds-base :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); }

/* ---------- Tipografia utilitária ---------- */
.ds-display { font-family: var(--font-heading); font-weight: 700; font-size: clamp(var(--text-3xl), 7vw, var(--text-5xl)); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.ds-title   { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-xl); letter-spacing: -0.01em; }
.ds-muted   { color: var(--color-fg-muted); }
.ds-eyebrow {                       /* rótulo mono acima de títulos */
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-accent);
}
[data-theme="light"] .ds-eyebrow { color: var(--color-link); }   /* limão não lê no claro */

/* ---------- Botões ---------- */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: var(--space-3) var(--space-6);
  border: 1px solid transparent; border-radius: var(--radius);
  font: 600 var(--text-sm)/1 var(--font-body); text-decoration: none; cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard), filter var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.ds-btn:hover { transform: translateY(-1px); }
.ds-btn:active { transform: translateY(0); }
.ds-btn--primary { background: var(--color-action); color: var(--color-primary-foreground); box-shadow: var(--shadow-action); }
.ds-btn--primary:hover { filter: brightness(1.1); }
.ds-btn--accent  { background: var(--ds-lime); color: var(--ds-ink); }          /* CTA de máximo destaque */
.ds-btn--accent:hover { filter: brightness(0.95); }
.ds-btn--ghost   { background: transparent; border-color: var(--color-border-strong); color: var(--color-fg-muted); }
.ds-btn--ghost:hover { border-color: var(--color-focus); color: var(--color-fg); }
.ds-btn--sm { min-height: 44px; padding: var(--space-2) var(--space-4); }     /* 44px = alvo mínimo de toque */
.ds-btn[disabled], .ds-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* ---------- Botão social (link-na-bio) ---------- */
.ds-social-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius);
  color: var(--color-fg); font-size: var(--text-sm); font-weight: 500; text-decoration: none;
  transition: transform var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast);
}
.ds-social-btn:hover { border-color: var(--color-border-strong); background: var(--color-bg-elevated-2); transform: translateY(-1px); }

/* ---------- Badge (com ponto "ao vivo") ---------- */
.ds-badge {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem var(--space-3);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-fg-muted);
}
.ds-badge--live { color: var(--color-fg); }
.ds-badge__dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-lime); }
[data-theme="light"] .ds-badge__dot { background: var(--ds-blue-600); }
.ds-badge__dot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid currentColor;
  color: var(--ds-lime); animation: ds-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
[data-theme="light"] .ds-badge__dot::after { color: var(--ds-blue-600); }
@keyframes ds-ping { 0% { transform: scale(1); opacity: .7; } 75%, 100% { transform: scale(2.4); opacity: 0; } }

/* ---------- Chip e Tag ---------- */
.ds-chip {
  display: inline-block; padding: 0.3rem 0.6rem; border-radius: var(--radius-pill);
  background: var(--color-bg-elevated-2); border: 1px solid var(--color-border);
  color: var(--color-fg-muted); font-size: var(--text-xs);
}
.ds-tag {                           /* categorias técnicas, borda tracejada */
  display: inline-block; padding: 0.4rem 0.7rem; border-radius: var(--radius-pill);
  border: 1px dashed var(--color-border-strong); color: var(--color-fg-muted);
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.03em; text-transform: uppercase;
}

/* ---------- Card (com brilho verde na borda — assinatura) ---------- */
@property --ds-glow-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes ds-glow-spin { to { --ds-glow-angle: 360deg; } }

.ds-card {
  position: relative; display: block; padding: var(--space-5);
  background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  color: inherit; text-decoration: none;
  transition: translate var(--duration-base) var(--ease-out), scale var(--duration-base) var(--ease-out),
              border-color var(--duration-base), box-shadow var(--duration-base), background var(--duration-base);
}
.ds-card--interactive:hover, .ds-card--interactive:focus-visible {
  border-color: var(--color-border-strong); background: var(--color-bg-elevated-2);
  translate: 0 -8px; scale: 1.02; box-shadow: var(--shadow-card-hover);
}
.ds-card--glow::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--ds-glow-angle),
    var(--glow-clear) 0turn, var(--glow-clear) 0.5turn, var(--glow-soft) 0.72turn,
    var(--ds-lime) 0.86turn, var(--glow-clear) 0.97turn, var(--glow-clear) 1turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0; transition: opacity 0.5s; animation: ds-glow-spin 5s linear infinite paused;
}
.ds-card--glow:hover::before, .ds-card--glow:focus-visible::before { opacity: 1; animation-play-state: running; }
.ds-card__icon {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: var(--space-4);
  border-radius: var(--radius); background: var(--color-primary); color: var(--color-primary-foreground);
}
.ds-card__title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 600; }
.ds-card__text { margin: var(--space-2) 0 0; color: var(--color-fg-muted); font-size: var(--text-sm); }
.ds-card__cta {
  display: inline-flex; margin-top: var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 700; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--color-accent);
}
[data-theme="light"] .ds-card__cta { color: var(--color-link); }

/* ---------- Stat (número em destaque) ---------- */
.ds-stat {
  padding: var(--space-4) var(--space-3); text-align: center;
  background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius);
}
.ds-stat__value { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-lg); color: var(--color-accent); }
[data-theme="light"] .ds-stat__value { color: var(--color-fg); }
.ds-stat__label { margin-top: 0.35rem; font-size: var(--text-xs); line-height: 1.3; color: var(--color-fg-muted); }

/* ---------- Marcador (limão como FUNDO — único jeito de usar limão no claro) ---------- */
.ds-highlight { background: var(--ds-lime); color: var(--ds-ink); padding: 0 0.3em; border-radius: 0.2em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ---------- Campo de formulário ---------- */
.ds-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ds-field__label { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-fg-muted); }
.ds-input {
  min-height: 48px; padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated); color: var(--color-fg);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius);
  font: 400 var(--text-md)/1.4 var(--font-body);
  transition: border-color var(--duration-fast);
}
.ds-input::placeholder { color: var(--color-fg-muted); opacity: .7; }
.ds-input:hover { border-color: var(--color-fg-muted); }
.ds-input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-color: transparent; }
.ds-input[aria-invalid="true"] { border-color: #FF5A5F; }
.ds-field__error { font-size: var(--text-xs); color: #FF7A7F; }
[data-theme="light"] .ds-field__error { color: #C62828; }

/* ---------- Passo numerado ---------- */
.ds-step { display: flex; gap: var(--space-3); }
.ds-step__n {
  flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border-strong); border-radius: 50%;
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent);
}
[data-theme="light"] .ds-step__n { color: var(--color-link); }
.ds-step__title { font-weight: 600; font-size: 0.9375rem; }
.ds-step__text { margin: 0.15rem 0 0; font-size: var(--text-sm); color: var(--color-fg-muted); }

/* ---------- FAQ / Accordion (nativo <details>) ---------- */
.ds-faq { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.ds-faq > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 44px; padding: var(--space-4) 1.1rem; list-style: none; cursor: pointer; font-weight: 500; font-size: 0.9375rem;
}
.ds-faq > summary::-webkit-details-marker { display: none; }
.ds-faq > summary::after { content: "+"; font-family: var(--font-mono); font-size: var(--text-xl); line-height: 1; color: var(--color-fg-muted); transition: transform var(--duration-fast); }
.ds-faq[open] > summary::after { transform: rotate(45deg); color: var(--color-accent); }
[data-theme="light"] .ds-faq[open] > summary::after { color: var(--color-link); }
.ds-faq > div { padding: 0 1.1rem 1.1rem; color: var(--color-fg-muted); font-size: var(--text-sm); }

/* ---------- Ilustração ----------
   Personagens e ícones são SVG (assets/ilustracoes/*.svg e assets/icones/*.svg).
   • Com <img>: o SVG usa a cor gravada (#111111 personagem, #10243C ícones).
     No tema escuro, coloque sobre o painel "paper" abaixo.
   • Inline (colando o <svg> no HTML): lê --ds-line-color / --ds-icon-color,
     então o traço vira off-white no escuro e preto/azul-marinho no claro. */
.ds-illustration { display: block; max-width: 100%; height: auto; }
.ds-illustration-panel {
  display: flex; align-items: center; justify-content: center; padding: var(--space-6);
  background: var(--ds-paper); border-radius: var(--radius-lg); border: 1px solid var(--color-border);
}

/* ---------- Revelação ao rolar ---------- */
.ds-reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--duration-slow) ease, transform var(--duration-slow) ease; }
.ds-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ds-reveal { opacity: 1; transform: none; } .ds-card--glow::before { animation: none; } }