/* ============================================================
   TOKENS.CSS — a Constituição visual do Financap (fonte única)
   ============================================================
   Regra de ouro: TELA NOVA NÃO INVENTA COR, TIPO NEM ESPAÇO.
   Tudo vem daqui. Mudou aqui -> mudou no produto inteiro.

   As duas cores de marca vêm do próprio ícone do app
   (gradiente azul->verde), então nada aqui é arbitrário:
   - AZUL FINANCAP  = Meu Financeiro (pessoal) e a marca-mãe
   - VERDE NEGÓCIO  = Meu Negócio (empresa)
   ============================================================ */
:root {
  /* ---- AZUL FINANCAP (marca-mãe / app Pessoal) ---- */
  --fin-50:  #eef3ff;
  --fin-100: #dbe6ff;
  --fin-200: #bcd0ff;
  --fin-300: #92b1ff;
  --fin-400: #618bff;
  --fin-500: #2f6bff;   /* a cor da marca (a MESMA do ícone) */
  --fin-600: #1f53e6;
  --fin-700: #1a41ba;
  --fin-800: #193795;
  --fin-900: #1a3276;

  /* ---- VERDE NEGÓCIO (app Meu Negócio / comércio) ---- */
  --neg-50:  #ecfdf8;
  --neg-100: #d0faee;
  --neg-200: #a5f3e0;
  --neg-300: #6ce7cd;
  --neg-400: #34d3b6;
  --neg-500: #14b8a6;   /* a cor do Meu Negócio (a MESMA do ícone) */
  --neg-600: #0d9488;
  --neg-700: #0f766e;
  --neg-800: #115e59;
  --neg-900: #134e4a;

  /* ---- NEUTROS (cinza com leve puxada pro azul da marca,
          nunca cinza puro de máquina) ---- */
  --cz-50:  #f7f9fc;
  --cz-100: #eef1f7;
  --cz-200: #dde3ee;
  --cz-300: #c3ccdd;
  --cz-400: #97a3bb;
  --cz-500: #6b7893;
  --cz-600: #4d5a75;
  --cz-700: #38445c;
  --cz-800: #232d42;
  --cz-900: #131b2e;
  --cz-950: #0a0f1d;   /* fundo escuro oficial (já é o do app) */

  /* ---- SEMÂNTICAS (estado, não decoração) ---- */
  --ok:     #16a34a;
  --alerta: #d97706;
  --erro:   #dc2626;

  /* ---- TIPOGRAFIA ---- */
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  ui-monospace, "Cascadia Code", Consolas, monospace;
  --t-xs: 11px;  --t-sm: 12.5px;  --t-md: 14px;
  --t-lg: 16px;  --t-xl: 20px;    --t-2xl: 26px;  --t-3xl: 34px;

  /* ---- ESPAÇAMENTO (escala de 4px — não usar valores fora dela) ---- */
  --e-1: 4px;  --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-5: 20px; --e-6: 24px;  --e-8: 32px;  --e-12: 48px; --e-16: 64px;

  /* ---- BORDAS ---- */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-full: 999px;

  /* ---- SOMBRAS ---- */
  --sombra-1: 0 1px 3px rgba(10, 15, 29, .10);
  --sombra-2: 0 4px 14px rgba(10, 15, 29, .14);
  --sombra-3: 0 12px 34px rgba(10, 15, 29, .22);

  /* ---- PAPÉIS (o que as telas realmente usam) ----
     Por padrão o produto veste AZUL (marca-mãe). */
  --marca:       var(--fin-500);
  --marca-forte: var(--fin-600);
  --marca-suave: var(--fin-100);
}

/* O app Meu Negócio (negocio.financap.com.br, ou body.marca-negocio)
   veste VERDE — mesma família, irmão reconhecível num relance. */
body.marca-negocio {
  --marca:       var(--neg-500);
  --marca-forte: var(--neg-600);
  --marca-suave: var(--neg-100);
}