/* Tokens visuais do portal (landing, entrar, painel, em construção). Mesma paleta "argila pastel" do app
   (public/estilo.css), para quem sai da landing e entra no escritório sentir que é o mesmo produto.
   Cada página importa este arquivo e escreve o próprio CSS só com estas variáveis. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Instrument+Sans:wght@400;500;600&display=swap');

:root {
  --fundo: #F6F1EA; --painel: #FFFFFF; --lateral: #EEE7F7; --linha: #E4DCEC;
  --tinta: #1F1B2D; --suave: #6A6480; --acento: #6B4EE6; --acento-forte: #5537D6; --acento-suave: #ECE7FD; --no-acento: #FFFFFF;
  --bom: #1B9A5C; --ruim: #C9333A; --alerta: #A86A12; --premium: #C8901A; --premium-suave: #FFF3D6;
  /* cores dos bonecos e móveis de argila, para ilustrações e detalhes */
  --argila-rosa: #F4A7A0; --argila-menta: #A9D8C4; --argila-ceu: #A8C8F0; --argila-sol: #F6D488; --argila-lilas: #CDBDF4;
  --titulo: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --corpo: "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --raio: 14px; --raio-grande: 24px; --raio-pilula: 999px;
  --sombra: 0 1px 2px rgba(31, 27, 45, .06), 0 8px 24px rgba(31, 27, 45, .08);
  --sombra-alta: 0 2px 6px rgba(31, 27, 45, .08), 0 24px 60px rgba(31, 27, 45, .16);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #14121B; --painel: #1C1926; --lateral: #19162299; --linha: #2B2738;
    --tinta: #EEEAF6; --suave: #A39DB8; --acento: #A796FF; --acento-forte: #BBAEFF; --acento-suave: #2A2444; --no-acento: #14121B;
    --bom: #48C98A; --ruim: #FF7A80; --alerta: #F0B35A; --premium: #F0C25A; --premium-suave: #3A3220;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fundo: #14121B; --painel: #1C1926; --lateral: #19162299; --linha: #2B2738;
  --tinta: #EEEAF6; --suave: #A39DB8; --acento: #A796FF; --acento-forte: #BBAEFF; --acento-suave: #2A2444; --no-acento: #14121B;
  --bom: #48C98A; --ruim: #FF7A80; --alerta: #F0B35A; --premium: #F0C25A; --premium-suave: #3A3220;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fundo); color: var(--tinta); font: 16px/1.55 var(--corpo); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
/* selo dos recursos pagos: o mesmo dourado do botão de câmera trancado no app (public/chamadas.css, .premium) */
.selo-premium { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--raio-pilula);
  background: var(--premium-suave); color: var(--premium); font-size: 12px; font-weight: 600; letter-spacing: .02em; }