/* ============================================================
   Conciliador Fiscal de Saídas — Onkei
   Design tokens (marca Onkei sobre foundations Nexa)
   ============================================================ */

:root {
  /* ───── MARCA ───── */
  --cf-teal:        #0D8198;  /* primária */
  --cf-teal-hover:  #0A6B7D;
  --cf-teal-bright: #12A0BB;  /* hover sobre escuro, listras de progresso */
  --cf-teal-deep:   #0D5F70;  /* texto sobre teal claro */
  --cf-teal-100:    #CFE7EA;  /* faixa decorativa, avatar */
  --cf-teal-050:    #EEF6F7;  /* zebra, cabeçalho de tabela, hover */
  --cf-teal-025:    #F7FBFB;  /* fundo de expansão */
  --cf-code-bg:     #EAF3F4;  /* dado técnico, trilha de progresso */

  /* ───── TINTA / NEUTROS ───── */
  --cf-ink:         #16262C;  /* texto principal, topbar */
  --cf-ink-bar:     #1E3238;  /* faixa de abas */
  --cf-ink-body:    #2A3D44;  /* parágrafos longos */
  --cf-gray:        #5C757C;  /* texto secundário, eyebrows */
  --cf-page:        #F3F8F9;  /* fundo de página */
  --cf-surface:     #FFFFFF;
  --cf-zebra:       #FBFDFD;
  --cf-line:        #E1E5EF;  /* borda de card */
  --cf-line-2:      #EEF0F7;  /* hairline de linha */
  --cf-line-teal:   #D6E4E7;  /* borda de input / botão secundário */
  --cf-line-focus:  #A9CBD2;

  /* sobre superfície escura */
  --cf-on-dark:        #FFFFFF;
  --cf-on-dark-2:      #B9CFD4;
  --cf-on-dark-3:      #7FB6C1;
  --cf-on-dark-mono:   #9DC3CC;
  --cf-on-dark-line:   rgba(255,255,255,.14);
  --cf-on-dark-chip:   rgba(255,255,255,.07);

  /* ───── SEMÂNTICO ───── */
  --cf-success:       #2E9E5B;
  --cf-success-bg:    #EAF6EE;
  --cf-success-line:  #BEE3CC;
  --cf-success-fg:    #1D5B36;
  --cf-success-fg-2:  #3E7A55;
  --cf-success-soft:  #7FC79B;  /* variante "sugerido" */

  --cf-warning:       #E8A13D;
  --cf-warning-bg:    #FFF6E8;
  --cf-warning-bg-2:  #FFFCF6;
  --cf-warning-line:  #E8C79A;
  --cf-warning-fg:    #7A4E0C;
  --cf-warning-fg-2:  #A4620C;
  --cf-warning-soft:  #EFCB93;

  --cf-danger:        #C2413A;
  --cf-danger-bg:     #FBEDEC;
  --cf-danger-line:   #DFA09B;
  --cf-danger-fg:     #8E2A22;

  --cf-neutral:       #8D9EA4;
  --cf-neutral-bg:    #F1F3F4;
  --cf-neutral-line:  #B6C2C6;
  --cf-neutral-fg:    #4A5B61;
  --cf-neutral-soft:  #C9D3D6;

  --cf-info:          #0D8198;
  --cf-info-bg:       #EAF3F4;
  --cf-info-line:     #7FB6C1;
  --cf-info-fg:       #0D5F70;

  /* ───── TIPOGRAFIA ───── */
  --cf-font-sans: "DM Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --cf-font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --cf-t-hero:      40px;  /* login headline  · 700 · -.028em · lh 1.12 */
  --cf-t-page:      28px;  /* título de página · 700 · -.02em */
  --cf-t-kpi:       30px;  /* KPI · 700 · -.025em */
  --cf-t-kpi-sm:    26px;
  --cf-t-h2:        20px;  /* título de card hero · 600 */
  --cf-t-h3:        17px;  /* título de card/seção · 600 · -.012em */
  --cf-t-body-lg:   15px;  /* leitura gerada · lh 1.62 */
  --cf-t-body:      14px;  /* corpo · lh 1.55 */
  --cf-t-cell:      13.5px;
  --cf-t-small:     12.5px;
  --cf-t-chip:      11.5px;
  --cf-t-micro:     10.5px; /* eyebrow · 600 · uppercase · .08em */
  --cf-t-nano:      10px;   /* selo de origem · 700 · mono */

  --cf-tr-hero:     -0.028em;
  --cf-tr-page:     -0.02em;
  --cf-tr-heading:  -0.012em;
  --cf-tr-eyebrow:   0.085em;

  /* ───── ESPAÇAMENTO ───── */
  --cf-sp-1: 4px;   --cf-sp-2: 8px;   --cf-sp-3: 12px;  --cf-sp-4: 16px;
  --cf-sp-5: 20px;  --cf-sp-6: 24px;  --cf-sp-7: 32px;  --cf-sp-8: 56px;
  --cf-gutter: 24px;
  --cf-content-max: 1320px;

  /* ───── RAIOS ───── */
  --cf-r-xs:   5px;   /* selo de origem */
  --cf-r-sm:   8px;   /* botão, input */
  --cf-r-md:   10px;  /* item de lista, linha de nota */
  --cf-r-lg:   14px;  /* card */
  --cf-r-xl:   16px;  /* card hero escuro */
  --cf-r-pill: 999px;

  /* ───── SOMBRAS ───── */
  --cf-sh-card:     0 1px 2px rgba(22,38,44,.06);
  --cf-sh-raised:   0 1px 2px rgba(22,38,44,.12);
  --cf-sh-dropdown: 0 18px 40px -12px rgba(22,38,44,.28);
  --cf-sh-drawer:   -24px 0 60px -16px rgba(22,38,44,.28);
  --cf-overlay:     rgba(22,38,44,.45);
  --cf-focus:       0 0 0 3px rgba(13,129,152,.18);

  /* ───── MOVIMENTO ───── */
  --cf-ease:       cubic-bezier(.22, 1, .36, 1);
  --cf-dur-fast:   150ms;
  --cf-dur-base:   200ms;
}

/* Base obrigatória do app */
body {
  margin: 0;
  background: var(--cf-page);
  color: var(--cf-ink);
  font: 400 var(--cf-t-body)/1.55 var(--cf-font-sans);
  font-variant-numeric: tabular-nums;  /* SEMPRE ligado */
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cf-teal); text-decoration: none; }
a:hover { color: var(--cf-teal-hover); text-decoration: underline; }
:focus-visible { outline: none; border-color: var(--cf-teal); box-shadow: var(--cf-focus); }

/* Progresso em andamento (rate-limited) */
@keyframes cf-stripe { from { background-position: 0 0; } to { background-position: 28px 0; } }
@keyframes cf-pulse  { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.cf-progress-running {
  background: repeating-linear-gradient(115deg, var(--cf-teal) 0 12px, var(--cf-teal-bright) 12px 24px);
  background-size: 28px 100%;
  animation: cf-stripe 900ms linear infinite;
}
.cf-dot-waiting { animation: cf-pulse 1.4s ease-in-out infinite; }