/* Base do CRM da Pharon: cores, tipografia, botões e campos.
   As cores e as fontes são as mesmas da landing (carvão + terracota, Space Grotesk). */

:root {
  --cor-fundo: #0f1014;
  --cor-fundo-alt: #15171c;
  --cor-superficie: #1a1c22;
  --cor-superficie-alta: #21242c;
  --cor-texto: #f3f1ed;
  --cor-texto-suave: #b4b1ab;
  --cor-primaria: #c9643c;
  --cor-primaria-clara: #e58a5f;
  --cor-primaria-hover: #d9774e;
  --cor-sinal: #58d6a8;
  --cor-alerta: #e5b45f;
  --cor-erro: #e07a7a;
  --cor-borda: #2a2d35;
  --cor-borda-forte: #3a3e48;
  --fonte-destaque: "Space Grotesk", system-ui, sans-serif;
  --fonte-corpo: system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --raio: 0.75rem;
  --raio-pequeno: 0.45rem;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: 0.95rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--fonte-destaque);
  font-weight: 600;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

p { margin: 0; }

a { color: inherit; }

[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--cor-primaria-clara);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

.texto-suave { color: var(--cor-texto-suave); }

.icone {
  width: 1.2rem;
  height: 1.2rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pular {
  position: absolute;
  left: -999px;
  top: 0.5rem;
  z-index: 30;
  padding: 0.5rem 0.9rem;
  background: var(--cor-primaria);
  color: #141519;
  border-radius: var(--raio-pequeno);
  font-weight: 700;
}

.pular:focus { left: 0.5rem; }

/* ---------- Botões ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.4rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pequeno);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.botao:hover { background: var(--cor-superficie-alta); }

.botao:disabled {
  opacity: 0.55;
  cursor: progress;
}

.botao--primario {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria);
  color: #141519;
}

.botao--primario:hover { background: var(--cor-primaria-hover); }

.botao--discreto {
  border-color: transparent;
  background: transparent;
  color: var(--cor-texto-suave);
}

.botao--discreto:hover { color: var(--cor-texto); }

.botao--perigo {
  border-color: rgba(224, 122, 122, 0.5);
  color: var(--cor-erro);
}

.botao--largo { width: 100%; }

.botao--pequeno {
  min-height: 2rem;
  padding: 0.25rem 0.65rem;
  font-size: 0.85rem;
}

/* ---------- Campos de formulário ---------- */

.campo {
  display: grid;
  gap: 0.3rem;
}

.campo-rotulo {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
}

.campo-dica {
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
}

input:not([type="checkbox"]),
select,
textarea {
  width: 100%;
  min-height: 2.4rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pequeno);
  background: var(--cor-fundo-alt);
  color: var(--cor-texto);
  font: inherit;
}

textarea {
  min-height: 6rem;
  resize: vertical;
  line-height: 1.5;
}

input:read-only { color: var(--cor-texto-suave); }

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-offset: 0;
  border-color: var(--cor-primaria-clara);
}

.form-erro {
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(224, 122, 122, 0.5);
  border-radius: var(--raio-pequeno);
  background: rgba(224, 122, 122, 0.1);
  color: var(--cor-erro);
  font-size: 0.9rem;
}

.form-ok {
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(88, 214, 168, 0.45);
  border-radius: var(--raio-pequeno);
  background: rgba(88, 214, 168, 0.1);
  color: var(--cor-sinal);
  font-size: 0.9rem;
}

.grade-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.9rem;
}

.campo--inteiro { grid-column: 1 / -1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}