/* =============================================================================
   Ares: tokens de design e peças de base

   A estética vem da apresentação do curso "Advocacia do Zero à Primeira
   Campanha": fundo quase preto, título em Libre Caslon Display, corpo em Inter,
   rótulo em JetBrains Mono caixa alta, o dourado como único acento e o vinho
   guardado para o momento de ênfase.

   O PDF da apresentação traz o texto em curva, sem o nome das fontes. A
   Libre Caslon Display foi escolhida comparando a proporção e o desenho das
   letras com o título renderizado do PDF. A primeira versão usou Playfair,
   tirada do histórico de outra sessão sem essa comparação, e estava errada.

   Este arquivo é compartilhado de propósito. Hoje só a casca o usa; as telas
   que existem antes dela (inbox, sombra, passagem, acervo) passam a importá-lo
   quando forem vestidas, e aí a cor de uma decisão só muda num lugar.

   O serifado fica em título e em número grande. Lista, conversa e formulário
   ficam no Inter: serifado de display em corpo pequeno cansa quem atende o dia
   inteiro.
   ============================================================================= */

:root {
  /* escuro, o padrão */
  --chao: #141418;
  --lateral: #101013;
  --superficie: #1B1A20;
  --superficie-alta: #23222A;
  --linha: #2A2930;
  --linha-firme: #3A3842;
  --tinta: #D8D6DC;
  --tinta-forte: #F4F2F6;
  --tinta-suave: #A8A2B0;
  --apagada: #8E8798;
  --fraca: #6E6878;
  --ouro: #ECCB83;
  --ouro-texto: #ECCB83;
  --ouro-fundo: rgba(236, 203, 131, .10);
  --ouro-borda: rgba(236, 203, 131, .28);
  --creme: #F4E9C8;
  --vinho: #7F273D;
  --vinho-fundo: #500B1E;
  --verde: #9BC089;
  --vermelho: #C75464;
  --sobre-ouro: #1A1719;
  --sombra: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px rgba(0, 0, 0, .28);
  --veu: rgba(6, 6, 8, .6);
  color-scheme: dark;

  --serif: "Libre Caslon Display", "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  --raio: 10px;
  --raio-grande: 16px;
  --raio-pilula: 999px;

  /* Curvas fortes: as nativas do CSS são fracas demais para parecer intenção. */
  --saida: cubic-bezier(0.23, 1, 0.32, 1);
  --movimento: cubic-bezier(0.77, 0, 0.175, 1);
  --gaveta: cubic-bezier(0.32, 0.72, 0, 1);
}

:root[data-theme="light"] {
  --chao: #F5F4F2;
  --lateral: #EFEDE9;
  --superficie: #FFFFFF;
  --superficie-alta: #F8F6F2;
  --linha: #E4E1DB;
  --linha-firme: #D3CFC7;
  --tinta: #2B282B;
  --tinta-forte: #1A1719;
  --tinta-suave: #57544F;
  --apagada: #6E6A66;
  --fraca: #9A958F;
  /* O dourado da apresentação some em fundo claro. Para texto, um ouro mais
     escuro que passa contraste; para preenchimento, o mesmo tom da marca. */
  --ouro: #D4B273;
  --ouro-texto: #8A6524;
  --ouro-fundo: rgba(180, 140, 60, .12);
  --ouro-borda: rgba(160, 120, 50, .35);
  --creme: #6B4E1C;
  --vinho: #7F273D;
  --vinho-fundo: #7F273D;
  --verde: #3D7A2F;
  --vermelho: #A8202F;
  --sobre-ouro: #1A1719;
  --sombra: 0 1px 2px rgba(26, 23, 25, .06), 0 8px 24px rgba(26, 23, 25, .06);
  --veu: rgba(26, 23, 25, .35);
  color-scheme: light;
}

/* O tema vinho (27/09), pedido do David para "pegar a nossa vibe vermelha". Os
   tons são os do tema vinho do painel da Altos, para as duas ferramentas
   combinarem. O dourado cede lugar a um rosado claro, como lá: o dourado quente
   e o fundo vinho puxam para o mesmo lado e brigam. O vermelho de alerta sobe de
   brilho para não sumir no fundo, que já é avermelhado. */
:root[data-theme="vinho"] {
  --chao: #180A0E;
  --lateral: #12070A;
  --superficie: #260E15;
  --superficie-alta: #31131B;
  --linha: #3A1620;
  --linha-firme: #52222F;
  --tinta: #DCD3D5;
  --tinta-forte: #F6EEF0;
  --tinta-suave: #AB9CA0;
  --apagada: #9A8188;
  --fraca: #75636A;
  --ouro: #E8B9BE;
  --ouro-texto: #E8B9BE;
  --ouro-fundo: rgba(232, 185, 190, .10);
  --ouro-borda: rgba(232, 185, 190, .30);
  --creme: #F4DDE0;
  --vinho: #A8395A;
  --vinho-fundo: #500B1E;
  --verde: #9BC089;
  --vermelho: #E6737F;
  --sobre-ouro: #2A0E16;
  --sombra: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px rgba(0, 0, 0, .35);
  --veu: rgba(10, 3, 6, .62);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  background: var(--chao);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
  /* Nenhuma palavra sozinha na última linha de um bloco de texto, regra do
     David para o projeto inteiro (27/09). O navegador redistribui as últimas
     linhas; herda para tudo que está dentro. */
  text-wrap: pretty;
}

/* Título curto se equilibra entre as linhas, em vez de deixar uma palavra
   pendurada embaixo. */
h1, h2, h3, h4 { text-wrap: balance; }

button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }

/* ---------- tipografia ---------- */

.rotulo {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ouro-texto);
}

.titulo {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--tinta-forte);
  letter-spacing: -.005em;
  line-height: 1.12;
}

.filete { width: 40px; height: 2px; background: var(--ouro); border: 0; }

/* ---------- botões ---------- */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px;
  border: 0; border-radius: var(--raio-pilula);
  background: var(--ouro); color: var(--sobre-ouro);
  font-weight: 600; font-size: 14px;
  cursor: pointer; user-select: none;
  transition: transform 160ms var(--saida), opacity 160ms ease;
}
.botao:active { transform: scale(.97); }
.botao:disabled { opacity: .5; cursor: default; transform: none; }

.botao-fantasma {
  background: transparent; color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--linha-firme);
}

/* ---------- campos ---------- */

.campo {
  width: 100%; height: 44px; padding: 0 14px;
  background: var(--chao); color: var(--tinta-forte);
  border: 1px solid var(--linha-firme); border-radius: var(--raio);
  font-size: 16px; /* abaixo de 16px o iPhone amplia a página ao focar */
  transition: border-color 160ms ease;
}
.campo::placeholder { color: var(--fraca); }
.campo:focus { outline: none; border-color: var(--ouro); }

/* ---------- etiquetas ---------- */

.etiqueta {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 8px;
  border-radius: var(--raio-pilula);
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--apagada);
  box-shadow: inset 0 0 0 1px var(--linha-firme);
  white-space: nowrap;
}
.etiqueta-ouro { color: var(--ouro-texto); box-shadow: inset 0 0 0 1px var(--ouro-borda); background: var(--ouro-fundo); }

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