/* =====================================================================
   NUBOT — tokens.css  (design system "Nubot by Nusan", v1 · 30/10/2026)
   Um conjunto só de nomes para site, painel, páginas de conta, link e gestão.
   Escuro ("Laca") é o padrão, em :root.  Claro ("Washi") em html[data-theme="claro"].
   O seletor [data-theme="claro"] sozinho existe só para o catálogo mostrar os dois
   temas lado a lado; no produto basta o atributo no <html>.
   Vitrine do Telegram NÃO usa estas cores (usa --tg-theme-*), só medidas e raios.
   Fontes (Google Fonts):
   https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,600..800&family=Figtree:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap
   ===================================================================== */

:root,
[data-theme="escuro"] {
  color-scheme: dark;

  /* ---- Superfícies ---- */
  --fundo: #141211;          /* fundo da página (preto laqueado, quente) */
  --superficie: #1c1918;     /* cartões, menu lateral, barra do celular */
  --superficie-2: #252120;   /* item ativo, chips, segmento escolhido, janelas */
  --superficie-3: #2c2726;   /* passar o mouse */
  --fundo-campo: #0f0d0d;    /* campos, poço de código, trilho do segmentado */

  /* ---- Bordas ---- */
  --borda: #2f2928;          /* divisórias e contorno de cartão (decorativo) */
  --borda-forte: #433b39;    /* contorno de cartão em destaque, linhas de tabela */
  --borda-campo: #7a6e6a;    /* contorno de campo, caixa, interruptor (3:1 ou mais) */

  /* ---- Texto ---- */
  --texto: #fbede4;          /* títulos e texto principal (13:1+) */
  --texto-2: #c2b6af;        /* texto secundário, descrições (8:1+) */
  --texto-3: #9b908a;        /* legendas, horários, placeholder (5:1+) */

  /* ---- Marca (Bordô Profundo #A0110A) ---- */
  --marca: #a0110a;          /* preenchimento: botão principal, item ativo forte */
  --marca-viva: #b8170f;     /* passar o mouse no botão principal */
  --marca-escura: #870e08;   /* botão principal apertado */
  --sobre-marca: #ffffff;    /* texto e ícone sobre --marca (7,6:1) */
  --marca-texto: #ff7d6e;    /* texto/ícone vermelho sobre fundo escuro (6,4:1+) */
  --marca-suave: #3a1512;    /* fundo tingido: item ativo do menu, aviso de pendência */

  /* ---- Destaque (Pêssego Suave #FEE3D2) ---- */
  --destaque: #fee3d2;       /* faixas e blocos de destaque */
  --sobre-destaque: #222222; /* texto sobre --destaque (13:1) */

  /* ---- Estados ---- */
  --ok: #5fcf8f;             /* pago, dinheiro recebido, conectado */
  --ok-suave: #13281c;
  --alerta: #f2b85a;         /* pendente, PIX gerado, atenção */
  --alerta-suave: #2d2210;
  --erro: #ff9175;           /* erro, recusado, excluir (sempre com ícone/palavra) */
  --erro-suave: #3a1810;
  --info: #7dbdf5;           /* aviso neutro, dica */
  --info-suave: #13233a;
  --foco: #fee3d2;           /* contorno de foco 2px */

  /* ---- Telegram (só na prévia de conversa) ---- */
  --telegram: #2aabee;
  --sobre-telegram: #0b1a26;
  --balao-bot: #252120;

  /* ---- Gráficos ---- */
  --grafico-1: #ff7d6e;
  --grafico-2: #fee3d2;
  --grafico-3: #8b898e;      /* Cinza Lunar */
  --grafico-grade: #2f2928;

  /* ---- Véu atrás de janelas ---- */
  --veu: rgba(8, 6, 6, .72);

  /* ---- Fontes ---- */
  --f-titulo: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --f-corpo: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-titulo-largura: 78%;   /* font-stretch dos títulos (eixo wdth) */

  /* ---- Escala de texto (tamanho / altura de linha) ---- */
  --t-hero: 88px;            /* site, título principal (celular: --t-hero-celular) */
  --t-hero-celular: 48px;
  --t-secao: 56px;           /* site, título de seção (celular 38px) */
  --t-secao-celular: 38px;
  --t-pagina: 32px;          /* título de página do painel (celular 26px) */
  --t-pagina-celular: 26px;
  --t-numero: 32px;          /* número grande (KPI) (celular 24px) */
  --t-numero-celular: 24px;
  --t-cartao: 17px;          /* título de cartão */
  --t-corpo: 15px;
  --t-pequeno: 13px;         /* ajuda, células de tabela */
  --t-legenda: 12px;
  --t-rotulo: 11px;          /* rótulo em maiúsculas (/SEÇÃO, grupo do menu, KPI) */
  --lh-titulo: 1.02;
  --lh-corpo: 1.5;

  /* ---- Espaçamento (base 4) ---- */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 20px;
  --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px; --e-16: 64px; --e-24: 96px;

  /* ---- Raios ---- */
  --r-1: 6px;      /* selo, chip, caixa de marcar */
  --r-2: 10px;     /* botão, campo, item de menu, segmento */
  --r-3: 14px;     /* cartão, aviso, balão */
  --r-4: 22px;     /* janela, hero, faixa pêssego, celular da prévia */
  --r-pilula: 999px;

  /* ---- Sombras ---- */
  --s-1: 0 1px 2px rgba(0, 0, 0, .5);
  --s-2: 0 10px 28px rgba(0, 0, 0, .55);
  --s-3: 0 28px 72px rgba(0, 0, 0, .65);
  --s-carimbo: inset 0 -2px 0 rgba(0, 0, 0, .28);  /* borda de carimbo do botão principal */

  /* ---- Movimento ---- */
  --m-rapido: 120ms;
  --m-medio: 200ms;

  /* ---- Medidas do layout ---- */
  --menu-largura: 248px;
  --conteudo-max: 1240px;
  --barra-celular: 64px;
  --alvo: 44px;              /* altura mínima de toque */
  --campo-altura: 46px;
}

html[data-theme="claro"],
[data-theme="claro"] {
  color-scheme: light;

  --fundo: #faf1ea;          /* papel de arroz pêssego */
  --superficie: #ffffff;
  --superficie-2: #f6eae1;
  --superficie-3: #efdfd3;
  --fundo-campo: #ffffff;

  --borda: #ebdcd1;
  --borda-forte: #dcc8ba;
  --borda-campo: #8f786c;

  --texto: #221e1d;
  --texto-2: #5c524e;
  --texto-3: #706460;

  --marca: #a0110a;
  --marca-viva: #870e08;
  --marca-escura: #6e0c07;
  --sobre-marca: #ffffff;
  --marca-texto: #a0110a;
  --marca-suave: #fbe1d9;

  --destaque: #fee3d2;
  --sobre-destaque: #222222;

  --ok: #16774a;
  --ok-suave: #ddf1e5;
  --alerta: #875800;
  --alerta-suave: #fbebcb;
  --erro: #b33a12;
  --erro-suave: #fce3d9;
  --info: #1f62a6;
  --info-suave: #ddebf8;
  --foco: #a0110a;

  --balao-bot: #ffffff;

  --grafico-1: #a0110a;
  --grafico-2: #b87552;
  --grafico-3: #8b898e;
  --grafico-grade: #ebdcd1;

  --veu: rgba(34, 30, 29, .45);

  --s-1: 0 1px 2px rgba(74, 40, 30, .08);
  --s-2: 0 10px 28px rgba(74, 40, 30, .12);
  --s-3: 0 28px 72px rgba(74, 40, 30, .18);
}

@media (prefers-reduced-motion: reduce) {
  :root { --m-rapido: 0ms; --m-medio: 0ms; }
}