:root{
  --orange:#FF4B12;  --orange2:#FF7A45;
  --ink:#0B0B0B;     --ink2:#171613;
  --paper:#F1F0EC;   --paper2:#E4E3DC;
  --line:#C9C7BE;    --muted:#6E6B62;
  --ok:#166534;      --erro:#B3261E;   --alerta:#8A5A00;
}

<p class="eyebrow">Categoria</p>
<h1>Título de página</h1>
<p class="lede">Parágrafo de abertura.</p>
<p>Texto corrido.</p>
<p class="pequeno">Explicação de apoio.</p>

/* o eyebrow carrega a barrinha laranja no ::before —
   é ela que identifica a marca antes de qualquer logo */

<div class="acoes">
  <a class="btn forte" href="#">Ação principal</a>
  <a class="btn" href="#">Ação secundária</a>
</div>

<button type="submit">Gravar</button>
<button type="button" class="sec">Cancelar</button>
<button type="submit" class="peq sec">apagar</button>

/* no PHP, o botão de ação em tabela sai pronto: */
<?= adm_botao_post('sala_apagar', ['id' => $id], 'apagar', 'sec',
      'Apagar a sala? Não há desfazer.') ?>

<a class="btn forte" href="#">Ação principal</a>
<a class="btn claro" href="#">Contorno claro</a>

/* nunca use .btn sem modificador sobre preto:
   a borda escura desaparece no fundo */

<span class="tag on">aberta</span>
<span class="tag off">fechada</span>
<span class="tag o">link público ligado</span>
<span class="tag d">master</span>

<div class="campo">
  <label for="nome">Nome da sala</label>
  <input id="nome" name="nome" type="text" placeholder="Encontro da Turma 01">
  <p class="dica">Explicação curta do campo.</p>
</div>

<label class="marcar"><input type="checkbox">
  <span>Rótulo da opção</span></label>

/* o painel envolve tudo em .grade para virar coluna no celular */
<div class="grade" style="grid-template-columns:repeat(auto-fit,minmax(230px,1fr))">

<div class="caixa">
  <h2>Servidor</h2>
  …
  <p class="pequeno">Por que este campo existe.</p>
</div>
<div class="caixa escura">…</div>

<a class="card" href="/curso.php?c=harness">
  <span class="tag o">4 etapas</span>
  <h4>Harness de agentes</h4>
  <p class="pequeno">Descrição curta.</p>
  <span class="pe"><span>12 h</span><b>R$ 480</b></span>
</a>

<div class="plano destaque">
  <span class="nome">ONDA · Turma 01</span>
  <div class="preco">R$ 800</div>
  <ul><li>16 encontros de 3h</li></ul>
</div>

<div class="numero"><b>149</b><span>aulas publicadas</span></div>

<div class="destaque-cx"><h4>O que você precisa saber</h4>
  <ul><li>Item</li></ul></div>

<div class="pessoa"><span class="pessoa__av">SB</span>
  <div><div class="pessoa__nome">Nome</div>
    <div class="pessoa__papel">Papel</div></div></div>

<ul class="lista-ok"><li>Item com marca de conferido</li></ul>
<ul class="lista-tr"><li>Item com traço</li></ul>
<ol class="lista-n"><li>Passo numerado (01, 02…)</li></ol>

/* Não se escreve à mão: sai de topbar_html() em _topbar.php.
   Uma barra só para o site inteiro, 38px, só com sessão.
   Fundo preto, itens em mono/caixa alta, ponto laranja entre eles. */
<?= topbar_html() ?>

<div data-abas>
  <div class="abas__lista" role="tablist">
    <button class="abas__bt" role="tab" aria-selected="true" data-aba="a1">Aba</button>
  </div>
  <div class="abas__painel aberto" id="a1" role="tabpanel">…</div>
</div>

/* hoje o painel troca de aba por LINK (?t=…), não por JS —
   ver as abas de Divulgação. Este componente é a versão
   sem recarregar, para quando fizer sentido. */

<div class="sanfona" data-sanfona>
  <div class="sanfona__item">
    <button class="sanfona__bt" aria-expanded="false">Pergunta</button>
    <div class="sanfona__painel"><p>Resposta.</p></div>
  </div>
</div>

<div class="msg a">Deu certo.</div>
<div class="msg w">Atenção: falta configurar algo.</div>
<div class="msg e">Não deu, e este é o motivo.</div>

/* no PHP elas vêm de adm_voltar($msg, 'a'|'w'|'e') */

<div class="barra"><div class="barra__fill" style="width:15%"></div></div>
<span class="dica-tip" data-tip="Texto de apoio">termo</span>
<button data-modal-abrir="dlg">Abrir diálogo</button>

/* o painel já tem um diálogo de confirmação pronto:
   qualquer <form data-confirmar="…"> pergunta antes de enviar
   — ver adm_confirmar_js() em _admin.php */

<div class="rolar">
  <table>
    <thead><tr><th>Sala</th><th class="n">Usos</th></tr></thead>
    <tbody><tr><td>…</td><td class="n">12</td></tr></tbody>
  </table>
</div>

/* adm_fechar() copia o <th> para data-label de cada <td>:
   no celular a tabela vira cartão sem ninguém anotar nada */

<section class="hero"><div class="wrap">
  <p class="eyebrow">Turma 01 · início 06/10/2026</p>
  <h1>Sua equipe sai com um sistema <em>no ar</em>.</h1>
  <p class="lede">Subtítulo.</p>
  <div class="acoes"><a class="btn forte" href="#">Ação</a></div>
</div></section>

/* o <em> dentro do h1 pinta a palavra de laranja —
   é o único destaque tipográfico do sistema */

<div class="cta">
  <h2>Título da chamada</h2>
  <p>Texto de apoio.</p>
  <div class="cluster"><a class="btn forte" href="#">Ação</a></div>
</div>

/* regra do sistema: todo CTA de WhatsApp tem o par por e-mail —
   quem está no computador do trabalho não tem o app */

<body>
  <?= topbar_html() ?>              /* só com sessão */
  <nav class="topo">…</nav>
  <section class="hero">…</section>
  <section class="sec"><div class="wrap">
    <div class="grade g3">…</div>
  </div></section>
  <footer>…</footer>
</body>