/* ============================================================
 * _tokens.css — GERADO por scripts/gen-mockup-tokens.mjs · NÃO EDITAR À MÃO.
 * Espelho fiel do bloco :root de app/globals-v2.css (rode o script de novo
 * quando os tokens mudarem). É a peça que mata o drift de cor na origem.
 *
 * USO no mockup novo:
 *   <link rel="stylesheet" href="./_tokens.css" />
 *   ...e use SÓ var(--token). NUNCA declare :root local, hex cravado, nem
 *   token inventado (--plum/--dep/etc NÃO existem — use os nomes reais).
 * ============================================================ */
:root{

  /* Surfaces — Magus 2.0 ousado: creme Marfim (sem branco puro) */
  --bg: #FBF8F2;
  --surface: #FEFCFA;
  --surface-elev: #FEFCFA;
  --surface-muted: #FAF7FC;
  --border: #ECE6F0;
  --border-hover: #D8CFE0;
  --border-soft: #F2EDE4;   /* divisória de tabela/seção — creme-quente (Bené 30/06); sidebar usa --hairline-v2 #E9E2D5 */

  /* Text — ousado (tinta sobre creme) */
  --fg: #16121F;
  --fg-2: #5B5468;
  --fg-3: #8A8398;

  /* Paleta Magus — protagonistas (cores do mascote) */
  --magus-purple-dark: #1A1A2E;   /* manto à noite (KPI hero BG) — mantido */
  --magus-purple-deep: #3b1d6e;   /* roxo profundo (hover/gradiente) */
  --magus-purple:      #7C3AED;   /* roxo VIBRANTE ousado (primário) */
  --magus-purple-2:    #9333EA;   /* violet highlight */
  --plum:              #3D2F66;   /* plum escuro (faixa de tabela / KPI / título) — base do --plum-v2 */
  --plum-deep:         #2A1F4F;   /* plum profundo (gradiente) — base do --plum-deep-v2 */
  --magus-gold-deep:   #A88C3E;   /* dourado escuro */
  --magus-gold:        #E7B43B;   /* gold ousado (acento/CTA) */
  --magus-gold-soft:   #E4D29A;   /* dourado claro */
  --magus-crystal:     #8DC9E5;   /* bola de cristal (info) */
  --magus-crystal-2:   #6BB0D6;   /* azul cristal escuro */
  --magus-ivory:       #F6F1E7;   /* marfim ousado (texto sobre roxo) */
  --magus-silver:      #B8B5AA;   /* cabelo / barba */

  /* Acentos legacy (compatibilidade durante migração) */
  --warm: var(--magus-gold-deep);     /* era #A16207 (50+ usos em prod) */
  --warm-soft: rgba(168, 140, 62, 0.10);
  --cool: var(--magus-crystal-2);     /* era #A78BFA */

  /* Cor por módulo (cores reais do hub atual — lib/nav/modules.ts) */
  --mod-magus: #7C3AED;
  --mod-ops:   #10B981;
  --mod-est:   #F97316;
  --mod-fin:   #16A34A;
  --mod-pess:  #F59E0B;
  --mod-com:   #EC4899;
  --mod-bi:    #6366F1;
  --mod-ti:    #64748B;

  /* Default do módulo ativo (sobrescrito por body.ctx-*) */
  --mod-active: var(--magus-purple);

  /* Integrações externas — cor de marca */
  --inter: #FF7A00;          /* laranja Inter (banco 077) — token legado, mantido */
  --brand-inter: var(--inter); /* alias canônico: use --brand-inter no código novo */

  /* KPI hero — usa o roxo profundo Magus */
  --kpi-hero-bg:     var(--magus-purple-dark);
  --kpi-hero-fg:     var(--magus-ivory);
  --kpi-hero-accent: var(--magus-gold);

  /* Semantic — mantém compatibilidade visual com globals.css atual */
  --success:    #15803D;
  --success-bg: #DCFCE7;
  --warning:    #A16207;
  --warning-bg: #FEF3C7;
  --danger:     #B91C1C;
  --danger-bg:  #FEE2E2;
  --info:       #1D4ED8;
  --info-bg:    #DBEAFE;

  /* Status tokens canônicos (Lei das Cores — Aceitar NFe + demais telas) */
  --st-ok-fg:      #15803D;
  --st-ok-bg:      #DCFCE7;
  --st-warn-fg:    #B45309;
  --st-warn-bg:    #FEF3C7;
  --st-info-fg:    #2563EB;
  --st-info-bg:    #DBEAFE;
  --st-bad-fg:     #B91C1C;
  --st-bad-bg:     #FEE2E2;
  --st-neutral-fg: #5A4F6E;
  --st-neutral-bg: #F1F3F6;

  /* Marca boleto (roxo distinto do Magus — não confundir com primary) */
  --brand-boleto:    #534AB7;
  --brand-boleto-bg: #EEEDFE;

  /* Chips de meio de pagamento — contas a pagar (light) */
  --pay-pix:         #00A88E; --pay-pix-bg:     rgba(0,184,148,0.12);
  --pay-boleto:      #3B6FB0; --pay-boleto-bg:  rgba(59,111,176,0.12);
  --pay-cartao:      #8B5CF6; --pay-cartao-bg:  rgba(139,92,246,0.13);
  --pay-dinheiro:    #15803D; --pay-dinheiro-bg:rgba(21,128,61,0.12);
  --pay-transf:      #0E8FBF; --pay-transf-bg:  rgba(14,143,191,0.12);

  /* --cat-* removidos em migration 0261 (categorias editáveis por loja no banco).
   * Cor agora vem de cor_hex da tabela categorias_fornecedor via color-mix inline.
   * Mantido comentário como tombstone pra facilitar busca futura. */

  /* ============================================================
   * Paleta do refactor Extrato bancário (2026-05 — design reference
   * extrato-design-reference.html). Escalas namespaced `--ext-*` pra
   * não conflitar com nada do app. Tons crus são theme-independent;
   * os mapeamentos semânticos abaixo flipam por tema. Reutilizados em
   * células do calendário, chips de tipo, avatares, botão "conciliado",
   * card de match e ring de %.
   * ============================================================ */
  --ext-green-50: #EAF3DE; --ext-green-100: #C0DD97; --ext-green-400: #639922; --ext-green-600: #3B6D11; --ext-green-800: #27500A;
  --ext-amber-50: #FAEEDA; --ext-amber-100: #FAC775; --ext-amber-400: #EF9F27; --ext-amber-600: #BA7517; --ext-amber-800: #633806;
  --ext-red-50:   #FCEBEB; --ext-red-100:   #F7C1C1; --ext-red-400:   #E24B4A; --ext-red-600:   #A32D2D; --ext-red-800:   #791F1F;
  --ext-teal-50:  #E1F5EE; --ext-teal-400:  #1D9E75; --ext-teal-600:  #0F6E56; --ext-teal-800:  #085041;
  --ext-purple-50:#EEEDFE; --ext-purple-400:#7F77DD; --ext-purple-600:#534AB7; --ext-purple-800:#3C3489;
  --ext-gray-100: #D3D1C7; --ext-gray-400:  #888780; --ext-gray-600:  #5F5E5A;

  /* Semânticos theme-aware (light) */
  --ext-saldo-pos:     var(--ext-green-800);
  --ext-saldo-neg:     var(--ext-red-800);
  --ext-ok-fg:         var(--ext-green-800);
  --ext-pend-amber-bg: var(--ext-amber-50);
  --ext-pend-amber-fg: var(--ext-amber-800);
  --ext-pend-red-bg:   var(--ext-red-50);
  --ext-pend-red-fg:   var(--ext-red-800);

  /* Chips de tipo (PIX / Débito conv. / Boleto / neutro) — Magus 2.0 */
  --ext-chip-pix-bg:     #E7F6F1;             --ext-chip-pix-fg:     #0E7C6B;
  --ext-chip-deb-bg:     #F1EAFB;             --ext-chip-deb-fg:     #6D28D9;
  --ext-chip-bol-bg:     #FBF2DF;             --ext-chip-bol-fg:     #9A7B1E;
  --ext-chip-neutral-bg: #F1EFEC;             --ext-chip-neutral-fg: #6B6478;

  /* Avatares de linha (iniciais pessoa / ícone empresa) — Magus 2.0 */
  --ext-av-teal-bg:   #E7F6F1;  --ext-av-teal-fg:   #0E7C6B;
  --ext-av-purple-bg: #F1EAFB;  --ext-av-purple-fg: #6D28D9;
  --ext-av-amber-bg:  #FBF2DF;  --ext-av-amber-fg:  #9A7B1E;
  --ext-av-gray-bg:   #F1EFEC;  --ext-av-gray-fg:   #6B6478;

  /* Botão "conciliado a" (tied) + primário verde (Aceitar match) */
  --ext-tied-bg:      var(--ext-green-50);
  --ext-tied-border:  var(--ext-green-100);
  --ext-tied-fg:      var(--ext-green-800);
  --ext-primary:      var(--ext-teal-600);

  /* Shadows — paleta roxa (vs preto puro atual) */
  --shadow:       0 1px 2px rgba(58, 47, 102, 0.04), 0 4px 12px rgba(58, 47, 102, 0.06);
  --shadow-hover: 0 1px 2px rgba(58, 47, 102, 0.05), 0 8px 24px rgba(58, 47, 102, 0.08);
  --shadow-lg:    0 12px 32px rgba(26, 26, 46, 0.18);

  /* Radii — escala ousado (DESIGN.md): 10 / 14 / 18 / 22 */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 18px;
  --r-xl: 22px;

  /* ============================================================
   * MAGUS 2.0 — "ousado" — tokens ADITIVOS (2026-06-23)
   * Fonte de verdade: DESIGN.md (raiz). NÃO substituem os tokens v1
   * acima — só são CONSUMIDOS dentro do escopo `.magus2` (bloco abaixo).
   * Adicioná-los aqui tem custo visual ZERO: nada muda até uma tela
   * usar a classe `.magus2`. Migração tela a tela (não big bang).
   * Quando o v2 virar 100% da base, estes viram os tokens-padrão e o
   * sufixo -v2 sai. As fontes --font-anton/--font-archivo já vêm do
   * next/font em app/layout.tsx.
   * ============================================================ */
  --bg-v2:        #FBF8F2;   /* Marfim — fundo de página */
  --surface-v2:   #FEFCFA;   /* card creme-meio */
  --surface-2-v2: #FAF7FC;   /* surface alternativa */
  --sidebar-v2:   #FEFCFA;
  --line-v2:      #ECE6F0;   /* hairline frio (bordas internas) */
  --hairline-v2:  #E9E2D5;   /* hairline quente (costura sidebar/seção) */

  --fg-v2:        #16121F;
  --fg-2-v2:      #5B5468;
  --fg-3-v2:      #8A8398;

  --purple-v2:    #7C3AED;   /* foco / CTA roxo */
  --violet-v2:    #9333EA;
  --plum-v2:      #3D2F66;
  --plum-deep-v2: #2A1F4F;
  --gold-v2:      #E7B43B;   /* acento / ouro vibrante */
  --gold-2-v2:    #F4C84B;

  /* Semânticos Magus 2.0 — valores EXATOS do DESIGN.md (a lei das cores).
   * Os --success/--warning/--danger/--info "globais" (bloco :root v1 acima)
   * são legado e DIVERGEM da lei em warning (#B45309≠#A16207) e info
   * (cristal≠#1D4ED8). Toda tela v2 deve beber DESTES, não dos v1. */
  --success-v2:    #15803D;
  --success-bg-v2: #DCFCE7;
  --warning-v2:    #A16207;
  --warning-bg-v2: #FEF3C7;
  --danger-v2:     #B91C1C;
  --danger-bg-v2:  #FEE2E2;
  --info-v2:       #1D4ED8;
  --info-bg-v2:    #DBEAFE;

  --radius-sm-v2:   10px;
  --radius-base-v2: 14px;
  --radius-card-v2: 18px;
  --radius-lg-v2:   20px;
  --radius-xl-v2:   22px;

  --font-display-v2: var(--font-anton), "Anton", sans-serif;
  --font-body-v2:    var(--font-archivo), "Archivo", system-ui, sans-serif;

  /* Compat: Geist foi REMOVIDO (big bang). Estes 2 tokens viraram ALIAS de
   * Archivo pra que os ~106 usos legados de var(--font-geist-*) renderizem a
   * fonte nova sem caçar arquivo por arquivo. check-magus2 barra Geist novo. */
  --font-geist-sans: var(--font-archivo), "Archivo", system-ui, sans-serif;
  --font-geist-mono: var(--font-archivo), "Archivo", system-ui, sans-serif;

  /* Tooltip — bolha escura Magus (alto contraste em qualquer tema) */
  --tip-bg: #241B3A;   /* roxo profundo — escuro o suficiente pra ter contraste sobre qualquer fundo */
  --tip-fg: #F4EBD0;   /* marfim Magus */
  /* fontes — carregar Anton + Archivo via Google Fonts no <head> do mockup */
  --font-anton: "Anton", sans-serif;
  --font-archivo: "Archivo", system-ui, sans-serif;
}
