{
 "name": "bFlow",
 "version": 3,
 "color": {
  "themes": [
   {
    "id": "light",
    "name": "Claro Padrão"
   },
   {
    "id": "light-vibrant",
    "name": "Claro Vibrante"
   },
   {
    "id": "dark-vibrant",
    "name": "Escuro Vibrante"
   },
   {
    "id": "ameixa",
    "name": "Ameixa Moderno"
   },
   {
    "id": "high-contrast",
    "name": "Alto Contraste"
   }
  ],
  "tokens": [
   {
    "name": "azul-100",
    "value": "#dce5ff",
    "usage": "Céu. Fundo de seleção, aba ativa no claro, chips informativos."
   },
   {
    "name": "azul-200",
    "value": "#b8cbff",
    "usage": "Bordas de foco suaves, barras de progresso em fundo claro."
   },
   {
    "name": "azul-300",
    "value": "#8aa8fc",
    "usage": "Links e ícones de marca sobre fundos escuros."
   },
   {
    "name": "azul-400",
    "value": "#5c82fa",
    "usage": "Hover de links em fundo escuro, série secundária de gráficos."
   },
   {
    "name": "azul-500",
    "value": "#315cf6",
    "usage": "Azul bFlow. Botão primário, símbolo sobre claro, tile do ícone, theme-color no claro."
   },
   {
    "name": "azul-600",
    "value": "#1e3fbf",
    "usage": "Azul profundo. Hover/pressed do botão primário; aba ativa no tema Corrente."
   },
   {
    "name": "azul-700",
    "value": "#14298a",
    "usage": "Pressed em fundo claro, texto de link sobre azul-100."
   },
   {
    "name": "lima-100",
    "value": "#f1f9d2",
    "usage": "Lima claro. Fundo de aviso da IA e de destaque de ganho no claro."
   },
   {
    "name": "lima-200",
    "value": "#e3f39f",
    "usage": "Fundo de chip de meta batida."
   },
   {
    "name": "lima-300",
    "value": "#d2ec5e",
    "usage": "Hover do acento em fundo escuro."
   },
   {
    "name": "lima-400",
    "value": "#bae314",
    "usage": "Lima. Faixa de dentro do símbolo e traço de resultado SOBRE FUNDO ESCURO. Nunca texto, nunca sobre branco."
   },
   {
    "name": "lima-500",
    "value": "#8db000",
    "usage": "Lima tinta. Faixa do símbolo e traço de resultado sobre fundo claro (gráfico, não texto: 2,4:1 sobre branco)."
   },
   {
    "name": "lima-600",
    "value": "#5c7400",
    "usage": "Texto de destaque lima sobre fundo claro (5,2:1 sobre branco). Rótulo \"IA do bFlow\" no claro."
   },
   {
    "name": "lima-700",
    "value": "#3c4c00",
    "usage": "Texto pequeno em lima sobre lima-100/lima-200."
   },
   {
    "name": "noite-100",
    "value": "#f4f6fb",
    "usage": "Névoa. Fundo de página no tema claro."
   },
   {
    "name": "noite-200",
    "value": "#dde2f1",
    "usage": "Bordas de card e de input no claro; divisores."
   },
   {
    "name": "noite-300",
    "value": "#c9cfea",
    "usage": "Texto corrido sobre fundo escuro; série de comparação em gráficos."
   },
   {
    "name": "noite-400",
    "value": "#9ba3c7",
    "usage": "Texto desabilitado, legendas sobre escuro, rodapés."
   },
   {
    "name": "noite-500",
    "value": "#5a6185",
    "usage": "Neutro. Texto secundário sobre claro (5,8:1 sobre névoa), ícones inativos."
   },
   {
    "name": "noite-600",
    "value": "#1f2440",
    "usage": "Grafite. Texto corrido sobre claro."
   },
   {
    "name": "noite-700",
    "value": "#0a0f2c",
    "usage": "Meia-noite. Títulos sobre claro; fundo de página do tema Corrente; capas."
   },
   {
    "name": "sucesso",
    "value": {
     "light": "#1e8e4e",
     "light-vibrant": "#1e8e4e",
     "dark-vibrant": "#3dbb75",
     "ameixa": "#4f7a00",
     "high-contrast": "#4ade80"
    },
    "usage": "Recebido, pago, concluído. Sempre com ícone ou palavra junto, nunca só a cor."
   },
   {
    "name": "atencao",
    "value": {
     "light": "#b8760a",
     "light-vibrant": "#b8760a",
     "dark-vibrant": "#f0b13a",
     "ameixa": "#7a4a00",
     "high-contrast": "#fbbf24"
    },
    "usage": "Vence hoje, pendente de revisão. Texto em atencao só em 14px+ sobre fundo neutro."
   },
   {
    "name": "erro",
    "value": {
     "light": "#d7263d",
     "light-vibrant": "#d7263d",
     "dark-vibrant": "#f2607a",
     "ameixa": "#b42a35",
     "high-contrast": "#f87171"
    },
    "usage": "Vencido, falha, campo inválido. Difere de sucesso em luminosidade, não só em matiz."
   },
   {
    "name": "bg",
    "value": {
     "light": "#f4f6fb",
     "light-vibrant": "#ffffff",
     "dark-vibrant": "#0a0f2c",
     "ameixa": "#f6f3fa",
     "high-contrast": "#000000"
    },
    "usage": "Fundo de página. Proposta 3.0: névoa no Claro Padrão (hoje #ffffff); branco no Vibrante; meia-noite no Escuro (hoje #0B0D1A). Mapeia `--background`."
   },
   {
    "name": "bg-elevado",
    "value": {
     "light": "#ffffff",
     "light-vibrant": "#ffffff",
     "dark-vibrant": "#141a3c",
     "ameixa": "#ffffff",
     "high-contrast": "#0f0f0f"
    },
    "usage": "Cards, modais, inputs, menus. Mapeia `--foreground`."
   },
   {
    "name": "bg-sutil",
    "value": {
     "light": "#eef0f8",
     "light-vibrant": "#e8edff",
     "dark-vibrant": "#1c2350",
     "ameixa": "#efe8f7",
     "high-contrast": "#1a1a1a"
    },
    "usage": "Hover de linhas, chips neutros, trilha de progresso. Mapeia `--shaded`."
   },
   {
    "name": "borda",
    "value": {
     "light": "#dde2f1",
     "light-vibrant": "#dde2f1",
     "dark-vibrant": "#262d58",
     "ameixa": "#e6ddf2",
     "high-contrast": "#555555"
    },
    "usage": "Borda de card e divisor. Mapeia `--border`."
   },
   {
    "name": "borda-forte",
    "value": {
     "light": "#9ba3c7",
     "light-vibrant": "#9ba3c7",
     "dark-vibrant": "#5a6185",
     "ameixa": "#8a7ba3",
     "high-contrast": "#e0e0e0"
    },
    "usage": "Borda de input (componente: ≥3:1 sobre `bg`) e contorno de botão secundário. Mapeia `--input`."
   },
   {
    "name": "texto",
    "value": {
     "light": "#0a0f2c",
     "light-vibrant": "#0a0f2c",
     "dark-vibrant": "#ffffff",
     "ameixa": "#241246",
     "high-contrast": "#ffffff"
    },
    "usage": "Títulos e texto principal. Mapeia `--text`."
   },
   {
    "name": "texto-corpo",
    "value": {
     "light": "#1f2440",
     "light-vibrant": "#1f2440",
     "dark-vibrant": "#c9cfea",
     "ameixa": "#4a3d5e",
     "high-contrast": "#ffffff"
    },
    "usage": "Texto corrido sobre `bg` e `bg-elevado`. Nunca branco puro no escuro."
   },
   {
    "name": "texto-suave",
    "value": {
     "light": "#5a6185",
     "light-vibrant": "#5a6185",
     "dark-vibrant": "#9ba3c7",
     "ameixa": "#6b5c80",
     "high-contrast": "#e0e0e0"
    },
    "usage": "Legendas e rótulos (≥4,5:1 sobre `bg` e `bg-elevado` nos 5 temas). Mapeia `--label`."
   },
   {
    "name": "marca",
    "value": {
     "light": "#315cf6",
     "light-vibrant": "#315cf6",
     "dark-vibrant": "#315cf6",
     "ameixa": "#43075d",
     "high-contrast": "#fbbf24"
    },
    "usage": "Botão primário, switch ligado, progresso. Azul bFlow; ameixa #43075D no tema Ameixa; âmbar no Alto Contraste. Mapeia `--primary` e `--cta-bg`."
   },
   {
    "name": "marca-hover",
    "value": {
     "light": "#1e3fbf",
     "light-vibrant": "#1e3fbf",
     "dark-vibrant": "#5c82fa",
     "ameixa": "#241246",
     "high-contrast": "#d97706"
    },
    "usage": "Hover e pressed do botão primário."
   },
   {
    "name": "sobre-marca",
    "value": {
     "light": "#ffffff",
     "light-vibrant": "#ffffff",
     "dark-vibrant": "#ffffff",
     "ameixa": "#ffffff",
     "high-contrast": "#000000"
    },
    "usage": "Texto sobre `marca`: branco, exceto preto sobre o âmbar do Alto Contraste. Mapeia `--on-primary` e `--cta-ink`."
   },
   {
    "name": "link",
    "value": {
     "light": "#1e3fbf",
     "light-vibrant": "#1e3fbf",
     "dark-vibrant": "#8aa8fc",
     "ameixa": "#43075d",
     "high-contrast": "#fbbf24"
    },
    "usage": "Links em texto corrido. Mapeia `--primary-text` (o azul clareado nos temas escuros)."
   },
   {
    "name": "acento",
    "value": {
     "light": "#8db000",
     "light-vibrant": "#8db000",
     "dark-vibrant": "#bae314",
     "ameixa": "#b2d300",
     "high-contrast": "#ffffff"
    },
    "usage": "Faixa de dentro do símbolo e traço de resultado. Gráfico, nunca texto. Ameixa usa o seu lima #B2D300 (já `--module-accent` lá); Alto Contraste não tem lima: branco."
   },
   {
    "name": "acento-texto",
    "value": {
     "light": "#5c7400",
     "light-vibrant": "#5c7400",
     "dark-vibrant": "#bae314",
     "ameixa": "#4f5e00",
     "high-contrast": "#ffffff"
    },
    "usage": "Texto curto de ganho/IA (≥4,5:1 em todos os temas). Nunca parágrafos."
   },
   {
    "name": "acento-fundo",
    "value": {
     "light": "#f1f9d2",
     "light-vibrant": "#f1f9d2",
     "dark-vibrant": "#1f2a12",
     "ameixa": "#eaf4c4",
     "high-contrast": "#1a1a1a"
    },
    "usage": "Fundo da faixa \"IA do bFlow\" e chips de meta batida; texto em `acento-texto`. Ameixa: `--module-accent-soft` #EAF4C4."
   },
   {
    "name": "foco",
    "value": {
     "light": "#315cf6",
     "light-vibrant": "#315cf6",
     "dark-vibrant": "#bae314",
     "ameixa": "#14b5bd",
     "high-contrast": "#fbbf24"
    },
    "usage": "Anel de foco, 2px sólido + 2px de afastamento. Ameixa mantém o ciano #14B5BD já aprovado."
   },
   {
    "name": "nav-bg",
    "value": {
     "light": "#ffffff",
     "light-vibrant": "#ffffff",
     "dark-vibrant": "#0f1538",
     "ameixa": "#241246",
     "high-contrast": "#000000"
    },
    "usage": "Barra lateral L1/L2 e cabeçalho mobile. Ameixa: `--sb-l1` #241246."
   },
   {
    "name": "nav-texto",
    "value": {
     "light": "#1f2440",
     "light-vibrant": "#1f2440",
     "dark-vibrant": "#c9cfea",
     "ameixa": "#d9cdeb",
     "high-contrast": "#ffffff"
    },
    "usage": "Itens de navegação inativos sobre `nav-bg`."
   },
   {
    "name": "nav-ativo-bg",
    "value": {
     "light": "#dce5ff",
     "light-vibrant": "#315cf6",
     "dark-vibrant": "#1e3fbf",
     "ameixa": "#b2d300",
     "high-contrast": "#fbbf24"
    },
    "usage": "Fundo do item ativo. No Claro Padrão é céu; no Vibrante, azul cheio; no Ameixa, lima com tinta ameixa."
   },
   {
    "name": "nav-ativo-texto",
    "value": {
     "light": "#14298a",
     "light-vibrant": "#ffffff",
     "dark-vibrant": "#ffffff",
     "ameixa": "#241246",
     "high-contrast": "#000000"
    },
    "usage": "Texto do item ativo sobre `nav-ativo-bg`."
   },
   {
    "name": "logo-ink",
    "value": {
     "light": "#315cf6",
     "light-vibrant": "#315cf6",
     "dark-vibrant": "#ffffff",
     "ameixa": "#43075d",
     "high-contrast": "#ffffff"
    },
    "usage": "Faixas de fora do símbolo e nome do logotipo sobre `bg`/`bg-elevado` (login, documentos, cards). Azul; ameixa no tema Ameixa; branco nos temas escuros e no Alto Contraste (P&B)."
   },
   {
    "name": "logo-acento",
    "value": {
     "light": "#8db000",
     "light-vibrant": "#8db000",
     "dark-vibrant": "#bae314",
     "ameixa": "#8db000",
     "high-contrast": "#ffffff"
    },
    "usage": "Faixa de dentro do símbolo sobre `bg`/`bg-elevado`. Lima tinta sobre claro, lima puro sobre escuro, branco no Alto Contraste."
   },
   {
    "name": "overlay",
    "value": {
     "light": "#0a0f2cb3",
     "light-vibrant": "#0a0f2cb3",
     "dark-vibrant": "#000000b3",
     "ameixa": "#241246b3",
     "high-contrast": "#000000cc"
    },
    "usage": "Véu atrás de modais e drawers (70%)."
   },
   {
    "name": "logo-ink-nav",
    "value": {
     "light": "#315cf6",
     "light-vibrant": "#315cf6",
     "dark-vibrant": "#ffffff",
     "ameixa": "#ffffff",
     "high-contrast": "#ffffff"
    },
    "usage": "Faixas de fora e nome na barra lateral (`nav-bg`). Branco sempre que a barra é escura (Escuro Vibrante, Ameixa, Alto Contraste)."
   },
   {
    "name": "logo-acento-nav",
    "value": {
     "light": "#8db000",
     "light-vibrant": "#8db000",
     "dark-vibrant": "#bae314",
     "ameixa": "#b2d300",
     "high-contrast": "#ffffff"
    },
    "usage": "Faixa de dentro do símbolo na barra lateral. Ameixa usa o seu lima #B2D300."
   },
   {
    "name": "branco",
    "value": "#ffffff",
    "usage": "Branco fixo, igual em todos os temas: logo e texto sobre azul bFlow ou meia-noite em peças de marca (capas, posts, cards de destaque). Não usar para texto de interface."
   }
  ]
 },
 "type": {
  "fonts": [],
  "families": {
   "display": "Sora, Inter, system-ui, sans-serif",
   "sans": "Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
   "mono": "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace"
  },
  "groups": [
   {
    "name": "Display e títulos (Sora)",
    "family": "display",
    "styles": [
     {
      "name": "display",
      "fontSize": "56px",
      "lineHeight": "58px",
      "fontWeight": 800,
      "letterSpacing": "-0.04em",
      "sample": "Decida vendo. Cresça andando.",
      "usage": "Hero do site, capas. Mobile: 40px."
     },
     {
      "name": "titulo-1",
      "fontSize": "40px",
      "lineHeight": "44px",
      "fontWeight": 800,
      "letterSpacing": "-0.03em",
      "sample": "Financeiro",
      "usage": "Título de página. Mobile: 30px."
     },
     {
      "name": "titulo-2",
      "fontSize": "28px",
      "lineHeight": "34px",
      "fontWeight": 700,
      "letterSpacing": "-0.02em",
      "sample": "Contas a receber",
      "usage": "Seções, títulos de card grandes. Mobile: 24px."
     },
     {
      "name": "titulo-3",
      "fontSize": "20px",
      "lineHeight": "26px",
      "fontWeight": 700,
      "letterSpacing": "-0.01em",
      "sample": "Vencidos há mais de 30 dias",
      "usage": "Títulos de bloco, modais, drawers. Mobile: 18px."
     },
     {
      "name": "numero-heroi",
      "fontSize": "32px",
      "lineHeight": "36px",
      "fontWeight": 800,
      "letterSpacing": "-0.03em",
      "sample": "R$ 84,3 mil",
      "usage": "Indicadores e dashboards, com `font-variant-numeric: tabular-nums`. Precedido do traço de resultado quando for ganho."
     },
     {
      "name": "logotipo",
      "fontSize": "24px",
      "lineHeight": "24px",
      "fontWeight": 700,
      "letterSpacing": "-0.05em",
      "sample": "bFlow",
      "usage": "Só o nome no logotipo. Não usar para texto."
     }
    ]
   },
   {
    "name": "Texto e interface (Inter)",
    "family": "sans",
    "styles": [
     {
      "name": "corpo",
      "fontSize": "16px",
      "lineHeight": "25px",
      "fontWeight": 400,
      "sample": "O vencido aparece primeiro, por cliente e por dias de atraso.",
      "usage": "Texto corrido, descrições. Mobile: 15px."
     },
     {
      "name": "corpo-pequeno",
      "fontSize": "14px",
      "lineHeight": "21px",
      "fontWeight": 400,
      "sample": "Legendas, tabelas, descrições de campo.",
      "usage": "Tabelas, listas densas, descrições de campo. Mobile: 13px."
     },
     {
      "name": "corpo-forte",
      "fontSize": "14px",
      "lineHeight": "21px",
      "fontWeight": 600,
      "sample": "Nome do cliente",
      "usage": "Nome em linha de tabela, título de card pequeno."
     },
     {
      "name": "rotulo",
      "fontSize": "12px",
      "lineHeight": "16px",
      "fontWeight": 600,
      "letterSpacing": "0.12em",
      "sample": "FINANCEIRO › HOJE",
      "usage": "Rótulos em caixa alta (aplicar text-transform no CSS), breadcrumbs, eyebrows. Cor `texto-suave` ou `marca`."
     },
     {
      "name": "legenda",
      "fontSize": "12px",
      "lineHeight": "16px",
      "fontWeight": 400,
      "sample": "Atualizado há 2 min",
      "usage": "Timestamps, ajuda de campo, rodapés. Cor `texto-suave`."
     },
     {
      "name": "botao",
      "fontSize": "15px",
      "lineHeight": "20px",
      "fontWeight": 600,
      "sample": "Enviar cobrança",
      "usage": "Texto de botões. Sem caixa alta."
     },
     {
      "name": "botao-pequeno",
      "fontSize": "13px",
      "lineHeight": "18px",
      "fontWeight": 600,
      "sample": "Ver detalhes",
      "usage": "Botões compactos em tabelas e cards."
     }
    ]
   },
   {
    "name": "Dados (mono)",
    "family": "mono",
    "styles": [
     {
      "name": "codigo",
      "fontSize": "13px",
      "lineHeight": "20px",
      "fontWeight": 400,
      "sample": "NFS-e 2026/000412",
      "usage": "Chaves, IDs, números de documento, webhooks."
     }
    ]
   }
  ]
 },
 "spacing": {
  "note": "Grade de 8px com meio passo. Margens de página: 24px no mobile, 32px no desktop; conteúdo máximo 1280px.",
  "tokens": [
   {
    "name": "space-1",
    "value": "4px",
    "usage": "Entre ícone e texto, entre chips."
   },
   {
    "name": "space-2",
    "value": "8px",
    "usage": "Entre rótulo e campo; gap de botões agrupados."
   },
   {
    "name": "space-3",
    "value": "12px",
    "usage": "Padding vertical de input e botão médio; gap entre linhas de lista."
   },
   {
    "name": "space-4",
    "value": "16px",
    "usage": "Padding de card compacto; gap entre cards no mobile."
   },
   {
    "name": "space-5",
    "value": "20px",
    "usage": "Padding de card padrão."
   },
   {
    "name": "space-6",
    "value": "24px",
    "usage": "Padding de modal e drawer; gap entre cards no desktop; margem de página mobile."
   },
   {
    "name": "space-8",
    "value": "32px",
    "usage": "Entre seções de uma página; margem de página desktop."
   },
   {
    "name": "space-12",
    "value": "48px",
    "usage": "Entre blocos de landing page."
   },
   {
    "name": "space-16",
    "value": "64px",
    "usage": "Respiro de hero e de capas."
   }
  ]
 },
 "radius": {
  "tokens": [
   {
    "name": "radius-sm",
    "value": "6px",
    "usage": "Chips, badges, checkboxes."
   },
   {
    "name": "radius-md",
    "value": "8px",
    "usage": "Botões, inputs, itens de menu."
   },
   {
    "name": "radius-lg",
    "value": "12px",
    "usage": "Cards pequenos, toasts, popovers."
   },
   {
    "name": "radius-xl",
    "value": "16px",
    "usage": "Cards padrão, modais, drawers."
   },
   {
    "name": "radius-2xl",
    "value": "18px",
    "usage": "Cards de destaque e blocos de marketing."
   },
   {
    "name": "radius-icone",
    "value": "22.5%",
    "usage": "Tile do ícone de app (27 em 120). Não usar em UI."
   },
   {
    "name": "radius-pill",
    "value": "999px",
    "usage": "Avatares, switch, chips de filtro."
   }
  ]
 },
 "shadow": {
  "note": "Profundidade vem de camadas de cor (`bg` → `bg-elevado`), não de blur. Sombra só em elementos flutuantes.",
  "tokens": [
   {
    "name": "sombra-flutuante",
    "value": {
     "light": "0 8px 24px rgba(10,15,44,0.10)",
     "light-vibrant": "0 8px 24px rgba(10,15,44,0.10)",
     "dark-vibrant": "0 8px 24px rgba(0,0,0,0.45)",
     "ameixa": "0 8px 24px rgba(10,15,44,0.10)",
     "high-contrast": "0 8px 24px rgba(0,0,0,0.5)"
    },
    "usage": "Popover, menu, toast."
   },
   {
    "name": "sombra-modal",
    "value": {
     "light": "0 24px 64px rgba(10,15,44,0.18)",
     "light-vibrant": "0 24px 64px rgba(10,15,44,0.18)",
     "dark-vibrant": "0 24px 64px rgba(0,0,0,0.6)",
     "ameixa": "0 24px 64px rgba(10,15,44,0.18)",
     "high-contrast": "0 24px 64px rgba(0,0,0,0.65)"
    },
    "usage": "Modal e drawer."
   }
  ]
 },
 "motion": {
  "tokens": [
   {
    "name": "duracao-rapida",
    "value": "120ms",
    "usage": "Hover, foco, troca de cor."
   },
   {
    "name": "duracao-media",
    "value": "200ms",
    "usage": "Abrir menu, expandir card, trocar aba."
   },
   {
    "name": "duracao-lenta",
    "value": "240ms",
    "usage": "Modal, drawer, toast entrando."
   },
   {
    "name": "easing-saida",
    "value": "cubic-bezier(0.2, 0.8, 0.2, 1)",
    "usage": "Padrão para tudo que entra. Nada pulsa, nada gira."
   }
  ]
 }
}