/* Suíte Propósito v4.1 · tokens.css · gerado do tokens.json (30/09/2026)
   Fonte de verdade: design system 'Suíte Propósito v4'. Não edite valores aqui; edite lá e gere de novo.
   Claro é o padrão; escuro entra por .dark ou [data-theme="dark"] no <html>.
   Tokens em HEX: use var(--x), nunca hsl(var(--x)). */

:root, [data-theme="light"] {
  --navy-950: #030914;  /* Navy mais profundo */
  --navy-900: #061A33;  /* Navy da marca */
  --navy-800: #0B2545;  /* Hover do botão primário no claro */
  --navy-700: #123563;  /* Só dentro das logos e do gráfico de marca */
  --gold-500: #C9972E;  /* Ouro da marca, valor fixo */
  --gold-300: #F6D77A;  /* Ouro claro, valor fixo */
  --gold-700: #8A5A16;  /* Ouro escuro, valor fixo */
  --indigo-suite: #253C79;  /* Índigo da suíte, valor fixo */
  --canvas: #FFFFFF;  /* Fundo da página e de toda tela interna */
  --superficie-2: #FAF8F3;  /* Segunda superfície: cabeçalho de tabela, hover de linha, item ativo do menu, fundo de aviso */
  --superficie-3: #F4F1EA;  /* Terceira superfície: fundo do botão secundário no escuro, trilho do segmentado, fundo de campo desabilitado */
  --menu-fundo: #FFFFFF;  /* Fundo de menu suspenso, popover e barra de lote */
  --fio: #ECE8DE;  /* Fio de 1px que separa tudo: colunas de KPI, seções, topo */
  --fio-forte: #D3CDBF;  /* Fio de tabela externa, menu, modal e divisor de grupo */
  --fio-controle: #8F887A;  /* Borda de botão secundário, campo, filtro e estrela vazia */
  --fio-sutil: #F1EEE6;  /* Linha entre linhas de tabela e de lista */
  --tinta: #101827;  /* Texto principal sobre `canvas`, `superficie-2` e `superficie-3` (17 */
  --tinta-2: #3D4759;  /* Nome de campo, item de menu, breadcrumb */
  --suave: #6B7280;  /* Texto secundário: meta, hora, descrição curta */
  --apagado: #6A7383;  /* Rótulo de seção 10 */
  --inverso: #FFFFFF;  /* Texto sobre `acao` */
  --sobre-ouro: #061A33;  /* Texto e ícone sobre qualquer fundo `ouro`: sempre navy, nos dois temas */
  --acao: #061A33;  /* Botão primário: navy no claro, marfim no escuro */
  --acao-hover: #0B2545;  /* Hover do primário */
  --acao-ativo: #030914;  /* Pressionado do primário */
  --acao-texto: #FFFFFF;  /* Texto e ícone do primário */
  --secundario-fundo: #FFFFFF;  /* Fundo do botão secundário */
  --secundario-fundo-hover: #FAF8F3;  /* Hover do secundário */
  --secundario-fio: #8F887A;  /* Borda do secundário */
  --secundario-texto: #101827;  /* Texto do secundário */
  --ghost-hover: #FAF8F3;  /* Hover do botão fantasma e do item de menu */
  --desabilitado-fundo: #F1EEE6;  /* Fundo de botão e campo desabilitados */
  --desabilitado-texto: #857F71;  /* Texto desabilitado: 3 */
  --desabilitado-fio: #E3DFD3;  /* Borda desabilitada */
  --ouro: #C9972E;  /* Marca, não ação: aba ativa, ponto de não lida, barra atual do gráfico, anel de foco */
  --ouro-texto: #8A5A16;  /* Ouro como texto: contagem no menu, badge, filtro ligado */
  --ouro-fundo: #FBF3E3;  /* Fundo do chip de destaque, do item ativo em menu suspenso e do filtro ligado, com `ouro-texto` por cima */
  --foco: #B08320;  /* Anel de foco sólido de 2px em todo controle */
  --foco-halo: rgba(201,151,46,0.25);  /* Halo de 3px fora do anel de foco em campos */
  --sucesso: #1F7A4D;  /* Texto e ponto de sucesso */
  --sucesso-fundo: #E8F4EE;  /* Fundo do estado Pago, Entregue, Ativo */
  --atencao: #B7791F;  /* Ponto e fio de atenção */
  --atencao-texto: #8A5E0C;  /* Texto de atenção */
  --atencao-fundo: #FBF3E3;  /* Fundo do estado Pendente, Atrasado */
  --erro: #B42318;  /* Texto destrutivo, borda de campo com erro, ponto de erro */
  --erro-fundo: #FBEDEB;  /* Fundo do estado Cancelado e hover do botão destrutivo em texto */
  --erro-solido: #B42318;  /* Fundo do botão destrutivo preenchido */
  --inverso-erro: #FFFFFF;  /* Texto sobre `erro-solido` */
  --info: #253C79;  /* Texto e ponto de informação */
  --info-fundo: #ECEFF8;  /* Fundo do estado Em preparo, Agendado */
  --topo-fundo: #FFFFFF;  /* Fundo da barra de topo */
  --topo-fio: #ECE8DE;  /* Fio abaixo das duas linhas do topo */
  --aba-texto: #3D4759;  /* Aba inativa e grupo do menu */
  --aba-texto-ativa: #061A33;  /* Aba ativa: texto peso 600 + sublinhado 2px em `ouro` */
  --cabecalho-fundo: #FAF8F3;  /* Cabeçalho de tabela */
  --linha-hover: #FAF8F3;  /* Hover de linha de tabela e de lista */
  --grafico-base: #ECE8DE;  /* Barra de período passado */
  --grafico-base-2: #DDD8CC;  /* Barra em hover */
  --grafico-atual: #C9972E;  /* Barra do período atual e ponto do valor atual numa linha: o único dado em ouro */
  --grafico-linha: #253C79;  /* Linha da série principal, 2px */
  --grafico-area: rgba(37,60,121,0.08);  /* Preenchimento sob a linha principal */
  --grafico-comparacao: #6B7280;  /* Linha de comparação (semana passada, meta), 1 */
  --grafico-grade: #F1EEE6;  /* Linhas horizontais de grade, 1px */
  --modal-fundo: #FFFFFF;  /* Fundo do modal e da folha lateral */
  --modal-fio: #E3DFD3;  /* Borda do modal */
  --veu: rgba(3,9,20,0.45);  /* Véu atrás do modal */
  --destaque-fundo: #061A33;  /* Bloco de saldo do Stargram: um por tela, só no celular */
  --destaque-texto: #F1EDE4;  /* Texto sobre `destaque-fundo` */
  --destaque-suave: #A9B4C6;  /* Rótulo e meta sobre `destaque-fundo` */
  --destaque-ouro: #F6D77A;  /* Número em destaque sobre `destaque-fundo` */
  --texto-fixo-claro: #FFFFFF;  /* Texto sobre foto ou sobre cor fixa escura (cor de setor, avatar) */
  --texto-fixo-escuro: #061A33;  /* Texto sobre cor fixa clara (setor amarelo, pizza grande) */
  --veu-foto: rgba(3,9,20,0.60);  /* Faixa sólida atrás de texto sobre foto */
  --estrela: #B08320;  /* Estrela cheia da avaliação */
  --progresso-trilho: #F4F1EA;  /* Trilho da barra de progresso */
  --progresso: #061A33;  /* Preenchimento da barra de progresso */
  --selecao-fundo: #FBF3E3;  /* Célula selecionada em matriz (preço, escala), com anel interno de 2px `foco` */
  --alarme-fundo: #B42318;  /* Faixa de alarme global (cliente esperando no Aliança) */
  --alarme-texto: #FFFFFF;  /* Texto da faixa de alarme */
  --canal-ifood: #EA1D2C;  /* Só no chip identificador do pedido (ponto 6px + número em mono) */
  --canal-whatsapp: #169C47;  /* Só no ponto do chip identificador */
  --canal-instagram: #D62D52;  /* Só no ponto do chip identificador */
  --canal-luci: #253C79;  /* Atendimento da Luci (IA do Provisão) */
  --canal-balcao: #3D4759;  /* Balcão, telefone, mesa e todo canal sem marca própria */
  --canal-outro: #6A7383;  /* Canal sem cor definida (Brendi até ter a cor oficial) */
  --estrela-terracota: #B5533A;  /* Marca da Pizzaria Estrela da Ilha */
  --sombra-zero: none;
  --sombra-menu: 0 8px 24px rgba(3,9,20,0.10);
  --sombra-modal: 0 20px 50px rgba(3,9,20,0.16);
}

.dark, [data-theme="dark"] {
  --navy-950: #030914;  /* Navy mais profundo */
  --navy-900: #061A33;  /* Navy da marca */
  --navy-800: #0B2545;  /* Hover do botão primário no claro */
  --navy-700: #123563;  /* Só dentro das logos e do gráfico de marca */
  --gold-500: #C9972E;  /* Ouro da marca, valor fixo */
  --gold-300: #F6D77A;  /* Ouro claro, valor fixo */
  --gold-700: #8A5A16;  /* Ouro escuro, valor fixo */
  --indigo-suite: #253C79;  /* Índigo da suíte, valor fixo */
  --canvas: #030914;  /* Fundo da página e de toda tela interna */
  --superficie-2: #0A1830;  /* Segunda superfície: cabeçalho de tabela, hover de linha, item ativo do menu, fundo de aviso */
  --superficie-3: #122443;  /* Terceira superfície: fundo do botão secundário no escuro, trilho do segmentado, fundo de campo desabilitado */
  --menu-fundo: #0E1D38;  /* Fundo de menu suspenso, popover e barra de lote */
  --fio: #1B2A47;  /* Fio de 1px que separa tudo: colunas de KPI, seções, topo */
  --fio-forte: #2E3F5F;  /* Fio de tabela externa, menu, modal e divisor de grupo */
  --fio-controle: #566A90;  /* Borda de botão secundário, campo, filtro e estrela vazia */
  --fio-sutil: #131F38;  /* Linha entre linhas de tabela e de lista */
  --tinta: #F1EDE4;  /* Texto principal sobre `canvas`, `superficie-2` e `superficie-3` (17 */
  --tinta-2: #C9CFDC;  /* Nome de campo, item de menu, breadcrumb */
  --suave: #8A97AD;  /* Texto secundário: meta, hora, descrição curta */
  --apagado: #7A879C;  /* Rótulo de seção 10 */
  --inverso: #061A33;  /* Texto sobre `acao` */
  --sobre-ouro: #061A33;  /* Texto e ícone sobre qualquer fundo `ouro`: sempre navy, nos dois temas */
  --acao: #F1EDE4;  /* Botão primário: navy no claro, marfim no escuro */
  --acao-hover: #FFFFFF;  /* Hover do primário */
  --acao-ativo: #DCD6C9;  /* Pressionado do primário */
  --acao-texto: #061A33;  /* Texto e ícone do primário */
  --secundario-fundo: #122443;  /* Fundo do botão secundário */
  --secundario-fundo-hover: #183259;  /* Hover do secundário */
  --secundario-fio: #566A90;  /* Borda do secundário */
  --secundario-texto: #F1EDE4;  /* Texto do secundário */
  --ghost-hover: #0A1830;  /* Hover do botão fantasma e do item de menu */
  --desabilitado-fundo: #0B172B;  /* Fundo de botão e campo desabilitados */
  --desabilitado-texto: #6B7789;  /* Texto desabilitado: 3 */
  --desabilitado-fio: #1B2A47;  /* Borda desabilitada */
  --ouro: #F6D77A;  /* Marca, não ação: aba ativa, ponto de não lida, barra atual do gráfico, anel de foco */
  --ouro-texto: #F6D77A;  /* Ouro como texto: contagem no menu, badge, filtro ligado */
  --ouro-fundo: #2A2210;  /* Fundo do chip de destaque, do item ativo em menu suspenso e do filtro ligado, com `ouro-texto` por cima */
  --foco: #F6D77A;  /* Anel de foco sólido de 2px em todo controle */
  --foco-halo: rgba(246,215,122,0.30);  /* Halo de 3px fora do anel de foco em campos */
  --sucesso: #5FCB96;  /* Texto e ponto de sucesso */
  --sucesso-fundo: #0B2A1E;  /* Fundo do estado Pago, Entregue, Ativo */
  --atencao: #E5B455;  /* Ponto e fio de atenção */
  --atencao-texto: #E5B455;  /* Texto de atenção */
  --atencao-fundo: #2B2010;  /* Fundo do estado Pendente, Atrasado */
  --erro: #F08C82;  /* Texto destrutivo, borda de campo com erro, ponto de erro */
  --erro-fundo: #2A1211;  /* Fundo do estado Cancelado e hover do botão destrutivo em texto */
  --erro-solido: #CC3A2A;  /* Fundo do botão destrutivo preenchido */
  --inverso-erro: #FFFFFF;  /* Texto sobre `erro-solido` */
  --info: #8A9DDC;  /* Texto e ponto de informação */
  --info-fundo: #14203F;  /* Fundo do estado Em preparo, Agendado */
  --topo-fundo: #030914;  /* Fundo da barra de topo */
  --topo-fio: #1B2A47;  /* Fio abaixo das duas linhas do topo */
  --aba-texto: #C9CFDC;  /* Aba inativa e grupo do menu */
  --aba-texto-ativa: #F1EDE4;  /* Aba ativa: texto peso 600 + sublinhado 2px em `ouro` */
  --cabecalho-fundo: #0A1830;  /* Cabeçalho de tabela */
  --linha-hover: #0A1830;  /* Hover de linha de tabela e de lista */
  --grafico-base: #1B2A47;  /* Barra de período passado */
  --grafico-base-2: #2E3F5F;  /* Barra em hover */
  --grafico-atual: #F6D77A;  /* Barra do período atual e ponto do valor atual numa linha: o único dado em ouro */
  --grafico-linha: #8A9DDC;  /* Linha da série principal, 2px */
  --grafico-area: rgba(138,157,220,0.14);  /* Preenchimento sob a linha principal */
  --grafico-comparacao: #8A97AD;  /* Linha de comparação (semana passada, meta), 1 */
  --grafico-grade: #131F38;  /* Linhas horizontais de grade, 1px */
  --modal-fundo: #0A1830;  /* Fundo do modal e da folha lateral */
  --modal-fio: #2E3F5F;  /* Borda do modal */
  --veu: rgba(0,0,0,0.62);  /* Véu atrás do modal */
  --destaque-fundo: #122443;  /* Bloco de saldo do Stargram: um por tela, só no celular */
  --destaque-texto: #F1EDE4;  /* Texto sobre `destaque-fundo` */
  --destaque-suave: #A9B4C6;  /* Rótulo e meta sobre `destaque-fundo` */
  --destaque-ouro: #F6D77A;  /* Número em destaque sobre `destaque-fundo` */
  --texto-fixo-claro: #FFFFFF;  /* Texto sobre foto ou sobre cor fixa escura (cor de setor, avatar) */
  --texto-fixo-escuro: #061A33;  /* Texto sobre cor fixa clara (setor amarelo, pizza grande) */
  --veu-foto: rgba(3,9,20,0.60);  /* Faixa sólida atrás de texto sobre foto */
  --estrela: #F6D77A;  /* Estrela cheia da avaliação */
  --progresso-trilho: #122443;  /* Trilho da barra de progresso */
  --progresso: #F1EDE4;  /* Preenchimento da barra de progresso */
  --selecao-fundo: #2A2210;  /* Célula selecionada em matriz (preço, escala), com anel interno de 2px `foco` */
  --alarme-fundo: #CC3A2A;  /* Faixa de alarme global (cliente esperando no Aliança) */
  --alarme-texto: #FFFFFF;  /* Texto da faixa de alarme */
  --canal-ifood: #EA1D2C;  /* Só no chip identificador do pedido (ponto 6px + número em mono) */
  --canal-whatsapp: #25D366;  /* Só no ponto do chip identificador */
  --canal-instagram: #E4405F;  /* Só no ponto do chip identificador */
  --canal-luci: #8A9DDC;  /* Atendimento da Luci (IA do Provisão) */
  --canal-balcao: #C9CFDC;  /* Balcão, telefone, mesa e todo canal sem marca própria */
  --canal-outro: #7A879C;  /* Canal sem cor definida (Brendi até ter a cor oficial) */
  --estrela-terracota: #B5533A;  /* Marca da Pizzaria Estrela da Ilha */
  --sombra-zero: none;
  --sombra-menu: 0 8px 24px rgba(0,0,0,0.55);
  --sombra-modal: 0 20px 50px rgba(0,0,0,0.6);
}

:root {
  --space-1: 4px;  /* Entre ponto e texto; entre rótulo e campo */
  --space-2: 8px;  /* Entre botões; entre linhas de um mesmo grupo */
  --space-3: 12px;  /* Padding interno de célula e de chip; gap de coluna curta */
  --space-4: 16px;  /* Padding horizontal de botão largo; entre campos */
  --space-5: 20px;  /* Padding de coluna de KPI e de modal no celular */
  --space-6: 24px;  /* Padding de página no celular; padding do modal */
  --space-8: 32px;  /* Entre seções; padding de página no desktop */
  --space-12: 48px;  /* Abaixo do título de página; entre blocos do login */
  --space-16: 64px;  /* Respiro acima do login */
  --radius-sm: 4px;  /* Chip, estado, checkbox */
  --radius-md: 6px;  /* Botão, campo, avatar, vazio */
  --radius-lg: 8px;  /* Modal, menu suspenso, trilho do segmentado */
  --altura-botao: 34px;  /* Botão no desktop */
  --altura-botao-toque: 44px;  /* Botão no celular e no Stargram */
  --altura-campo: 36px;  /* Campo de texto, seleção, data */
  --altura-topo: 48px;  /* Linha 1 do topo (logo, grupos, usuário) */
  --altura-abas: 40px;  /* Linha 2 do topo (abas da tela) */
  --altura-linha: 44px;  /* Linha de tabela e de lista */
  --avatar: 26px;  /* Avatar quadrado com iniciais */
  --logo-topo: 28px;  /* Logo do produto no topo */
  --logo-login: 150px;  /* Logo na tela de login */
  --largura-login: 320px;  /* Coluna do formulário de login */
  --fio-1: 1px;  /* Todo fio */
  --fio-marca: 2px;  /* Sublinhado da aba ativa, anel de foco, fio esquerdo de aviso */
  --altura-filtro: 28px;  /* Filtro de ligar e desligar */
  --altura-alarme: 40px;  /* Faixa de alarme global */
  --altura-tecla: 56px;  /* Tecla do teclado de telefone e de PDV */
  --altura-atalho: 76px;  /* Atalho da grade do Stargram */
  --altura-progresso: 4px;  /* Barra de progresso */
  --largura-kpi-valor: 10ch;  /* Acima disso o valor do indicador desce de `kpi` para `total` */
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* Mapa shadcn → v4.1. Nenhuma linha aponta para si mesma. */
:root, .dark, [data-theme="dark"] {
  --background: var(--canvas); --foreground: var(--tinta);
  --card: var(--canvas); --card-foreground: var(--tinta);
  --popover: var(--menu-fundo); --popover-foreground: var(--tinta);
  --primary: var(--acao); --primary-foreground: var(--acao-texto);
  --secondary: var(--secundario-fundo); --secondary-foreground: var(--secundario-texto);
  --muted: var(--superficie-2); --muted-foreground: var(--suave);
  --accent: var(--ghost-hover); --accent-foreground: var(--tinta);
  --destructive: var(--erro); --destructive-foreground: var(--inverso-erro);
  --border: var(--fio); --input: var(--fio-controle); --ring: var(--foco);
  --radius: var(--radius-md);
}

/* Logo por tema: coloque as duas imagens, o CSS mostra uma.
   <img class="logo-claro" src="/logos/vigia.png"> <img class="logo-escuro" src="/logos/vigia-escuro.png"> */
.logo-escuro { display: none; }
.dark .logo-claro, [data-theme="dark"] .logo-claro { display: none; }
.dark .logo-escuro, [data-theme="dark"] .logo-escuro { display: inline-block; }

/* Tailwind v3 (vigia, mana, dons, visao): theme.extend.colors = { canvas: 'var(--canvas)', acao: 'var(--acao)', ... } sem hsl().
   Tailwind v4 (provisao, alianca): @theme inline { --color-canvas: var(--canvas); --color-acao: var(--acao); ... } */