/* Tangerina: sistema de design v1, o mesmo do app do Gabinete Fácil
   (saas-gabinete/frontend/app/globals.css e components/ui.tsx, 02/11/2026).
   Mesmos nomes de token; o acento é o laranja da Tangerina no lugar da cor do
   gabinete. Auditoria e decisão: cerebro/10-tangerina/site-design-2026-11-02.md.
   Usada pela página inicial e pela landing do Gabinete. A Agenda segue no site.css. */

:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* superfícies (conteúdo claro) */
  --surface: #ffffff;
  --surface-2: #f4f4f5;
  --surface-3: #fafafa;
  --line: #e4e4e7;
  --line-2: #d4d4d8;

  /* texto */
  --ink: #18181b;
  --ink-2: #52525b;
  --ink-3: #71717a;
  --ink-4: #a1a1aa;

  /* faixas escuras (como a barra lateral do app) */
  --rail: #18181b;
  --rail-2: #27272a;
  --rail-3: #3f3f46;
  --rail-ink: #e4e4e7;
  --rail-ink-2: #a1a1aa;
  --rail-ink-3: #71717a;

  /* semânticos: sólido, fundo suave e texto sobre o suave */
  --ok: #059669;       --ok-soft: #ecfdf5;     --ok-ink: #047857;
  --warn: #d97706;     --warn-soft: #fffbeb;   --warn-ink: #b45309;
  --danger: #dc2626;   --danger-soft: #fef2f2; --danger-ink: #b91c1c;
  --info: #2563eb;     --info-soft: #eff6ff;   --info-ink: #1d4ed8;
  --violet-soft: #f5f3ff; --violet-ink: #6d28d9;

  /* acento: laranja da Tangerina, no lugar do acento do gabinete
     (texto escuro sobre o laranja, como o acento "amarelo" do app) */
  --accent: #f07a1a;
  --accent-hover: #d9620a;
  --accent-deep: #b4500a;
  --accent-soft: #fff1e6;
  --accent-ink: #b4500a;
  --accent-on: #1c1917;
  --accent-rail: #ffa65c;

  /* raio: controle (botão, campo, chip quadrado), cartão, cartão grande */
  --radius-ctl: 10px;
  --radius-card: 16px;
  --radius-card-lg: 22px;

  --shadow-card: 0 1px 2px rgb(24 24 27 / .04), 0 1px 3px rgb(24 24 27 / .06);
  --shadow-pop: 0 10px 30px -10px rgb(24 24 27 / .25), 0 2px 6px rgb(24 24 27 / .08);

  --largura: 1120px;
  color-scheme: light;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
h1 { font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
h2 { font-weight: 700; font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -.02em; line-height: 1.15; }
h3 { font-weight: 600; font-size: 17px; line-height: 1.3; }
p { margin: 0; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; }
.tnum { font-variant-numeric: tabular-nums; }
.ico { width: 16px; height: 16px; flex: none; }

.container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 16px; }
.secao { padding: 72px 0; }
.secao--cinza { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cabeca { max-width: 640px; margin-bottom: 32px; display: flex; flex-direction: column; gap: 10px; }
.cabeca p { color: var(--ink-2); }

/* rótulo de seção (SectionLabel do app) */
.rotulo { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.rotulo--acento { color: var(--accent-ink); }

/* ---------------------------------------------------------------- botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex: none; white-space: nowrap;
  height: 40px; padding: 0 16px; border: 0; border-radius: var(--radius-ctl);
  font: 600 14px/1 var(--font-sans); text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px rgb(240 122 26 / .4); }
.btn--primario { background: var(--accent); color: var(--accent-on); box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.btn--primario:hover { background: var(--accent-hover); }
.btn--secundario { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn--secundario:hover { background: var(--surface-3); border-color: var(--line-2); }
.btn--escuro { background: var(--ink); color: #fff; }
.btn--escuro:hover { background: var(--rail-2); }
.btn--contorno { background: transparent; color: var(--rail-ink); border: 1px solid var(--rail-3); }
.btn--contorno:hover { background: var(--rail-2); color: #fff; }
.btn--sm { height: 32px; padding: 0 12px; font-size: 12px; }
.btn--sm .ico { width: 14px; height: 14px; }
.btn--lg { height: 48px; padding: 0 20px; font-size: 15px; }
.btn--lg .ico { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- cartões */
.cartao {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 20px; box-shadow: var(--shadow-card);
}
.cartao--lg { border-radius: var(--radius-card-lg); padding: 28px; }
.cartao p { color: var(--ink-2); font-size: 14px; }
.cartao h3 { margin-top: 14px; }
.cartao h3 + p { margin-top: 6px; }

/* chip de ícone (o do Kpi e dos módulos) */
.chip {
  width: 36px; height: 36px; border-radius: var(--radius-ctl); flex: none;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink);
}
.chip .ico { width: 17px; height: 17px; }
.chip--ok { background: var(--ok-soft); color: var(--ok-ink); }
.chip--warn { background: var(--warn-soft); color: var(--warn-ink); }
.chip--info { background: var(--info-soft); color: var(--info-ink); }
.chip--danger { background: var(--danger-soft); color: var(--danger-ink); }
.chip--neutro { background: var(--surface-2); color: var(--ink-2); }
.chip--violeta { background: var(--violet-soft); color: var(--violet-ink); }

/* KPI (cartão de número) */
.kpi { display: flex; flex-direction: column; }
.kpi__linha { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.kpi__valor { font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -.02em; overflow-wrap: anywhere; }
.kpi__rotulo { margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.kpi__fonte { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-3); }

/* etiqueta de situação (StatusBadge) */
.status {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px;
  border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2);
}
.status--ok { background: var(--ok-soft); color: var(--ok-ink); }
.status--warn { background: var(--warn-soft); color: var(--warn-ink); }
.status--info { background: var(--info-soft); color: var(--info-ink); }
.status--danger { background: var(--danger-soft); color: var(--danger-ink); }
.status--acento { background: var(--accent-soft); color: var(--accent-ink); }
.status--rail { background: var(--rail-2); color: var(--rail-ink); }

/* etiqueta neutra (Tag) */
.tag {
  display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-3);
  font-size: 12px; font-weight: 500; color: var(--ink-2); white-space: nowrap;
}

/* lista com ✓ */
.checks { display: flex; flex-direction: column; gap: 8px; }
.checks li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--ink-2); }
.checks .ico { margin-top: 3px; color: var(--ok); }

/* tabela (TableWrap, Th, Td) */
.janela { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-pop); }
.janela__barra { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--surface-3); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.janela__barra i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.janela__barra i:last-of-type { margin-right: 6px; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { padding: 10px 12px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-3); border-bottom: 1px solid var(--line); }
.tabela td { padding: 10px 12px; font-size: 13px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela td:first-child, .tabela td.num { white-space: nowrap; }
.tabela th.num { text-align: right; }

/* painel com título (Panel) */
.painel__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.painel__titulo { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }

/* ------------------------------------------------------------------- topo */
.topo-wrap { position: sticky; top: 0; z-index: 20; background: rgb(255 255 255 / .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.topo { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; }
.marca__icone { width: 32px; height: 32px; border-radius: var(--radius-ctl); display: grid; place-items: center; background: var(--accent); color: var(--accent-on); }
.marca__icone .ico { width: 18px; height: 18px; }
.marca img { width: 30px; height: 30px; }
.topo nav { display: flex; align-items: center; gap: 4px; }
.topo nav .link { padding: 8px 10px; border-radius: var(--radius-ctl); font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.topo nav .link:hover { background: var(--surface-2); color: var(--ink); }
.topo nav .btn { margin-left: 8px; }

/* --------------------------------------------------------------- abertura */
.abertura { padding: 64px 0 56px; }
.abertura__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.abertura h1 { font-size: clamp(34px, 4.6vw, 58px); max-width: 16ch; }
.abertura__sub { max-width: 560px; font-size: 17px; color: var(--ink-2); }
.abertura__acoes { display: flex; flex-wrap: wrap; gap: 10px; }

/* ------------------------------------------------- faixa escura e rodapé */
.escuro { background: var(--rail); color: var(--rail-ink); }
.contato { padding: 72px 0 64px; }
.contato .container { display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: center; }
.contato h2 { color: #fff; }
.contato p { margin-top: 10px; color: var(--rail-ink-2); max-width: 520px; }
.contato__acoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

.rodape { padding: 40px 0 32px; border-top: 1px solid var(--rail-2); color: var(--rail-ink-2); font-size: 14px; }
.rodape__grade { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; }
.rodape .marca { color: #fff; }
.rodape__sobre { margin-top: 12px; max-width: 360px; font-size: 14px; }
.rodape h4 { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rail-ink-3); }
.rodape li + li { margin-top: 8px; }
.rodape a { color: var(--rail-ink); text-decoration: none; }
.rodape a:hover { color: #fff; text-decoration: underline; }
.rodape__base { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--rail-2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 12px; color: var(--rail-ink-3); }

/* ---------------------------------------------------------------- celular */
@media (max-width: 900px) {
  .contato .container { grid-template-columns: 1fr; }
  .contato__acoes { justify-content: flex-start; }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .secao { padding: 56px 0; }
  .abertura { padding: 40px 0 44px; }
  .abertura__acoes { width: 100%; flex-direction: column; }
  .abertura__acoes .btn { width: 100%; }
  .topo nav .link { display: none; }
  .topo nav .btn { margin-left: 0; }
  .cartao--lg { padding: 20px; }
  .contato { padding: 56px 0 48px; }
  .contato__acoes { flex-direction: column; }
  .contato__acoes .btn { width: 100%; }
  .rodape__grade { grid-template-columns: 1fr; gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}