/* style.css - TOKENS do Black Send. É o ÚNICO arquivo com o hex da marca. Tema: só claro. */

:root {
  color-scheme: light;

  /* marca (paleta.py para #234AF7): 6,19:1 sobre branco, serve para letra, ícone e fundo com letra branca */
  --cor-primaria: #234AF7;
  --cor-primaria-hover: #234AF7;        /* fundo sólido com letra branca: botão primário, toggle de duas opções, botão Início */
  --cor-primaria-escura: #0727B8;       /* hover do botão primário, letra do item ativo */
  --cor-primaria-suave: #E7EAF8;
  --cor-primaria-soft: rgba(35, 74, 247, 0.12);
  --cor-primaria-sombra: rgba(35, 74, 247, 0.15);
  --cor-primaria-texto: #234AF7;
  --texto-sobre-cor-primaria: #FFFFFF;

  /* neutros: brancos e cinzas (decisão do dono, 06/11/2026) */
  --bg: #F3F4F6;
  --bg-elev: #ECEEF1;
  --superficie: #FFFFFF;
  --borda: #E5E7EB;
  --texto: #111827;
  --texto-2: #4B5563;
  --texto-suave: #5C6370;
  --texto-fraco: #666C7A;
  --fundo-escuro-acao: #1F2937;
  --texto-sobre-escuro: #F9FAFB;
  --texto-inverso: #FFFFFF;
  --borda-forte: #6B7280;

  /* estados */
  --ok: #16a34a;
  --ok-texto: #147C3B;
  --ok-suave: #E6F6EC;
  --erro: #dc2626;
  --erro-hover: #b91c1c;
  --erro-texto: #b91c1c;
  --erro-suave: #FEF2F2;
  --aviso: #d97706;
  --aviso-texto: #9B5E07;
  --aviso-suave: #FEF3C7;
  --aviso-escuro: #5B3A04;
  --info: #4B5563;
  --info-texto: #374151;
  --info-suave: #F3F4F6;

  /* raios: nenhum canto vivo (decisão do dono, 06/11/2026) */
  --raio-xs: 6px;
  --raio-sm: 10px;
  --raio: 14px;
  --raio-lg: 20px;
  --raio-full: 9999px;

  --sombra-sm: 0 1px 3px rgba(17, 24, 39, 0.06);
  --sombra: 0 6px 18px rgba(17, 24, 39, 0.09);
  --sombra-lg: 0 16px 40px rgba(17, 24, 39, 0.14);

  /* espaçamento: 24 entre blocos, 16 em grade, 12 dentro do card */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* tipografia: Poppins em tudo, títulos e números de KPI inclusive (decisão do dono em 07/11) */
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-titulo: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 26px;
  --fs-titulo-grande: 34px;

  /* casca */
  --sidebar-width: 248px;
  --topbar-h: 58px;
  --fu-h: 38px;
  --h-controle-sm: 36px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --faixa-h: 0px;
  --topbar-safe: var(--safe-top);

  /* camadas */
  --z-base: 0;
  --z-sidebar: 100;
  --z-sticky: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  /* movimento */
  --transicao: .15s ease;
  --curva: cubic-bezier(.22, 1, .36, 1);
  --curva-origem: cubic-bezier(.2, .9, .3, 1);

  /* vidro: barra de abas, topbar ao rolar, sheet parcial e menu */
  --vidro-fundo: rgba(255, 255, 255, 0.72);
  --vidro-fundo-forte: rgba(255, 255, 255, 0.86);
  --vidro-blur: blur(24px) saturate(180%);
  --vidro-borda: rgba(17, 24, 39, 0.08);

  /* fundo de camada: todo modal, popover e menu suspenso escurece e desfoca a página atrás (como no BLACK FINANCAS) */
  --camada-fundo: rgba(15, 23, 42, 0.5);
  --camada-fundo-leve: rgba(15, 23, 42, 0.32);
  --camada-blur: blur(2px);
  --tabbar-fundo: var(--vidro-fundo-forte);
  --tabbar-borda: var(--vidro-borda);
  --tabbar-sombra: 0 10px 30px rgba(17, 24, 39, 0.14);
  --tabbar-texto: var(--texto-2);
  --tabbar-ativo-texto: var(--cor-primaria-escura);
  --tabbar-ativo-fundo: var(--cor-primaria-soft);
  --tabbar-ponto: var(--cor-primaria);

  --branco: var(--superficie);
  --fundo: var(--bg);
  --texto-secundario: var(--texto-2);
}

@media (max-width: 1100px) {
  :root { --sidebar-width: 220px; }
}

html.com-suporte {
  --faixa-h: calc(36px + var(--safe-top));
  --topbar-safe: 0px;
}
@media (max-width: 720px) {
  html.com-suporte { --faixa-h: calc(52px + var(--safe-top)); }
}