/* meucartao.me — tokens do DESIGN.md. Só leitura: nada de JavaScript. */
:root {
  --brand: #1f5c63;
  --brand-strong: #154950;
  --brand-soft: #e1edee;
  --brand-subtle: #f0f6f6;
  --brand-deep: #0d2e33;
  --accent: #ff9e73;
  --accent-soft: #ffe8dc;
  --on-accent-soft: #9c4a1e;
  --page: #f4f6f5;
  --card: #ffffff;
  --border: #e2e8e7;
  --text: #15132b;
  --text-2: #4b4a63;
  --muted: #6a6982;
  --display: "General Sans", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible Next", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #0d2e33;
    --card: #123a40;
    --border: #22525a;
    --text: #f0f6f6;
    --text-2: #bfd7d9;
    --muted: #a9c6c8;
    --brand-strong: #a9c6c8;
    --brand-subtle: #154950;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--body);
}
main { max-width: 44rem; margin: 0 auto; padding: 2rem 1rem 4rem; }
a { color: var(--brand-strong); text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
h1, h2 { font-family: var(--display); font-weight: 600; line-height: 1.15; }
h1 { font-size: 2rem; margin: 1.5rem 0 0.5rem; }
h2 { font-size: 1.375rem; margin: 2.25rem 0 0.5rem; }
p, li { color: var(--text-2); }
strong { color: var(--text); }
.marca { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--text); }
.marca svg { width: 2.5rem; height: 2.5rem; border-radius: 22%; flex: none; }
.marca span { font: 600 1.25rem var(--display); }
.data { color: var(--muted); font-size: 0.9375rem; }
.servicos { display: grid; gap: 0.75rem; }
.servico { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 1rem 1.25rem; }
.servico h3 { font: 600 1.0625rem/1.3 var(--display); margin: 0 0 0.5rem; color: var(--text); }
.servico dl { margin: 0; }
.servico dt { font-weight: 600; color: var(--text); font-size: 0.9375rem; margin-top: 0.5rem; }
.servico dd { margin: 0.125rem 0 0; color: var(--text-2); }
.aviso {
  margin-top: 2.5rem; padding: 1rem 1.25rem; border-radius: 12px;
  background: var(--card); border: 1px solid var(--border);
}
footer { margin-top: 3rem; color: var(--muted); font-size: 0.875rem; }
/* Campos que dependem da empresa. Enquanto existir um, o site não vai ao ar (site/README.md). */
mark.pendente { background: var(--accent-soft); color: var(--on-accent-soft); padding: 0 0.25rem; border-radius: 4px; }
.nota-pendente {
  border-left: 4px solid var(--accent); background: var(--accent-soft); color: var(--on-accent-soft);
  padding: 0.75rem 1rem; border-radius: 0 8px 8px 0; font-size: 0.9375rem;
}
.rascunho {
  background: var(--accent); color: var(--brand-deep); text-align: center;
  padding: 0.5rem 1rem; font-weight: 600;
}