/* SteerFlow: base do painel. Valores do design system (design-system/tokens.json):
   tema Marfim, ou Verde profundo quando o sistema do usuário está escuro. */

@font-face { font-family: "Inclusive Sans"; src: url(/fontes/inclusive-sans.woff2) format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inclusive Sans"; src: url(/fontes/inclusive-sans-italico.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  color-scheme: light dark;
  --fundo: #f7f5ef; --superficie: #ffffff; --superficie-suave: #dde7de;
  --borda: #dde7de; --borda-campo: #53766b; --texto: #202725; --texto-apagado: #53766b;
  --destaque: #123c36; --sobre-destaque: #d4f36a; --foco: #123c36; --marca: #202725;
  --vermelho: #b3261e; --aviso-fundo: #dde7de; --aviso-texto: #123c36;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #123c36; --superficie: #1b4a43; --superficie-suave: #23554d;
    --borda: #2b5c54; --borda-campo: #7a9f95; --texto: #f7f5ef; --texto-apagado: #a9c1b6;
    --destaque: #d4f36a; --sobre-destaque: #123c36; --foco: #d4f36a; --marca: #d4f36a;
    --vermelho: #ff8f80; --aviso-fundo: #23554d; --aviso-texto: #d4f36a;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 400 16px/1.55 "Inclusive Sans", system-ui, sans-serif; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

.pagina { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--borda); }
.assinatura { display: inline-flex; align-items: center; gap: 10px; color: var(--marca); text-decoration: none; }
.assinatura svg { width: 30px; height: 27px; fill: currentColor; flex: none; }
.assinatura span { font: italic 700 22px/1 "Inclusive Sans", system-ui, sans-serif; letter-spacing: -0.01em; }
.conta { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--texto-apagado); min-width: 0; }
.conta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

main { padding: 40px 0 64px; }
h1 { font-weight: 700; font-size: clamp(28px, 5vw, 40px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 8px; }
h2 { font-weight: 700; font-size: 20px; line-height: 1.3; margin: 0 0 8px; }
p { margin: 0; max-width: 65ch; }
.apagado { color: var(--texto-apagado); }
.rotulo { font-weight: 500; font-size: 12px; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-apagado); }

.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 16px; }
.entrada { max-width: 420px; margin: 48px auto 0; display: grid; gap: 16px; padding: 24px; }
.lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.lista li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; }
.grade { display: grid; gap: 16px; margin-top: 32px; }

.botao { display: inline-block; justify-self: start; padding: 12px 20px; border: 1px solid transparent; border-radius: 8px; background: var(--destaque); color: var(--sobre-destaque); font: 500 15px/1 "Inclusive Sans", system-ui, sans-serif; cursor: pointer; text-decoration: none; }
.botao:hover { filter: brightness(1.12); }
.botao.secundario { background: transparent; border-color: var(--borda-campo); color: var(--texto); padding: 8px 14px; font-size: 14px; }
.botao.secundario:hover { filter: none; background: var(--superficie-suave); }

.aviso { padding: 10px 12px; border-radius: 8px; background: var(--aviso-fundo); color: var(--aviso-texto); font-size: 14px; line-height: 1.45; }
.falha { color: var(--vermelho); font-size: 14px; font-weight: 500; }