/*
 * Finance OS · identidade visual — FONTE ÚNICA
 *
 * Usado por: landing (inicio.html), termos/privacidade, login e páginas de acesso,
 * painel do cliente e administração. Para mudar uma cor ou a fonte do site inteiro,
 * mude aqui. No build, este arquivo também é publicado como /landing-assets/brand.css
 * (para as páginas estáticas) e entra no CSS do aplicativo.
 *
 * Contraste conferido (WCAG AA, texto normal ≥ 4,5:1):
 *   branco sobre esmeralda #047857 ............ 5,5:1
 *   branco sobre esmeralda escuro #065F46 ...... 7,7:1
 *   azul profundo #0F172A sobre menta #6EE7B7 .. 11,7:1
 *   menta #6EE7B7 sobre azul profundo .......... 11,7:1
 *   texto #172033 sobre fundo #F5F7FA .......... 15,2:1
 *   texto secundário #5C687A sobre branco ...... 5,6:1 (sobre #F5F7FA: 5,3:1)
 *   esmeralda #047857 sobre branco ............. 5,5:1
 *   aviso #B45309 sobre branco ................. 5,0:1
 *   erro #B91C1C sobre branco .................. 6,5:1
 *   esmeralda #047857 sobre #ECFDF5 ............ 5,2:1
 */
@font-face {
  font-family: "FOS Inter";
  src: url(/fonts/inter-latin.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Paleta oficial */
  --brand-navy: #0f172a;          /* azul profundo da marca */
  --brand-emerald: #047857;       /* botões principais */
  --brand-emerald-hover: #065f46; /* interação dos botões */
  --brand-mint: #6ee7b7;          /* destaques sobre fundo escuro */
  --brand-bg: #f5f7fa;            /* fundo claro principal */
  --brand-surface: #ffffff;       /* cards e formulários */
  --brand-text: #172033;          /* texto principal */
  --brand-text-2: #5c687a;        /* texto secundário */
  --brand-line: #dee5ec;          /* bordas e divisórias */
  --brand-ok-bg: #ecfdf5;         /* fundo de confirmações */
  --brand-warn: #b45309;          /* avisos que exigem atenção */
  --brand-danger: #b91c1c;        /* erros, atrasos e ações destrutivas */

  /* Derivadas (áreas em azul profundo) */
  --brand-navy-2: #16213a;        /* cartões sobre o azul profundo */
  --brand-navy-line: #27344b;     /* divisórias sobre o azul profundo */
  --brand-on-navy: #e8edf4;       /* texto sobre o azul profundo */
  --brand-on-navy-2: #a3afbf;     /* texto secundário sobre o azul profundo (8,0:1) */
  --brand-warn-bg: #fffbeb;
  --brand-danger-bg: #fef2f2;

  /* Tipografia */
  --brand-font: "FOS Inter", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --brand-fs-xs: 12px;
  --brand-fs-sm: 14px;
  --brand-fs-md: 16px;
  --brand-fs-lg: 18px;
  --brand-fs-h3: 20px;
  --brand-fs-h2: clamp(28px, 3.6vw, 40px);
  --brand-fs-h1: clamp(36px, 5.2vw, 60px);

  /* Espaço, cantos e sombras */
  --brand-space-1: 4px;
  --brand-space-2: 8px;
  --brand-space-3: 12px;
  --brand-space-4: 16px;
  --brand-space-5: 24px;
  --brand-space-6: 32px;
  --brand-space-7: 48px;
  --brand-space-8: 72px;
  --brand-radius-sm: 8px;
  --brand-radius: 12px;
  --brand-radius-lg: 16px;
  --brand-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 2px 8px rgba(15, 23, 42, 0.04);
  --brand-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 32px rgba(15, 23, 42, 0.08);
  --brand-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Componentes compartilhados (landing, login e páginas de acesso) ---------- */
.b-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: var(--brand-radius);
  border: 1px solid transparent;
  font: 600 var(--brand-fs-md) / 1.2 var(--brand-font);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.b-btn:disabled { cursor: not-allowed; opacity: 0.6; }
.b-btn-sm { min-height: 40px; padding: 0 14px; font-size: var(--brand-fs-sm); }
.b-btn-primary { background: var(--brand-emerald); color: #fff; }
.b-btn-primary:hover:not(:disabled) { background: var(--brand-emerald-hover); color: #fff; }
.b-btn-ghost { background: var(--brand-surface); border-color: var(--brand-line); color: var(--brand-text); }
.b-btn-ghost:hover:not(:disabled) { border-color: #b8c3cf; }
.b-btn-mint { background: var(--brand-mint); color: var(--brand-navy); }
.b-btn-mint:hover:not(:disabled) { background: #a7f3d0; color: var(--brand-navy); }
.b-btn-outline-light { background: transparent; border-color: var(--brand-navy-line); color: var(--brand-on-navy); }
.b-btn-outline-light:hover:not(:disabled) { border-color: var(--brand-on-navy-2); }

.b-field { display: flex; flex-direction: column; gap: 6px; }
.b-label { font: 600 var(--brand-fs-sm) / 1.3 var(--brand-font); color: var(--brand-text); }
.b-input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border-radius: var(--brand-radius);
  border: 1px solid #c9d3de;
  background: var(--brand-surface);
  color: var(--brand-text);
  font: 400 var(--brand-fs-md) / 1.3 var(--brand-font);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.b-input:hover { border-color: #aab6c3; }
.b-input:focus { outline: none; border-color: var(--brand-emerald); box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.18); }
.b-input[aria-invalid="true"] { border-color: var(--brand-danger); }

.b-card {
  background: var(--brand-surface);
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius-lg);
  box-shadow: var(--brand-shadow-sm);
}
.b-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font: 600 var(--brand-fs-xs) / 1.5 var(--brand-font);
  background: var(--brand-ok-bg);
  color: var(--brand-emerald);
}
.b-badge.warn { background: var(--brand-warn-bg); color: var(--brand-warn); }
.b-badge.danger { background: var(--brand-danger-bg); color: var(--brand-danger); }
.b-badge.neutral { background: #eef2f6; color: var(--brand-text-2); }
.b-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

@media (prefers-reduced-motion: reduce) {
  .b-btn, .b-input { transition: none; }
}