/*
 * Tokens da marca JMBA -- fonte: manual de marca oficial
 * (.claude/assets-marca/manual-de-marca-jmba.pdf).
 *
 * REGRA DO PROJETO: nenhuma cor literal fora deste arquivo. Foi o que travou o
 * rebrand no site da NexTool, onde ~100 hexadecimais ficaram espalhados pelo CSS.
 * Se precisar de um tom novo, ele nasce aqui como token.
 */
:root {
  /* --- Paleta oficial --- */
  --brand-navy: #1a2f54;
  --brand-blue: #1181f0;
  --brand-steel: #3e6d9b;
  --brand-cyan: #00f9ff;
  --brand-gold: #f0c911;

  /* Tons derivados, para superfícies e gradientes */
  --navy-900: #101d35;
  --navy-800: #142544;
  --navy-700: #1a2f54;
  --blue-600: #0d6ccc;
  --gold-600: #d4b00c;
  --cyan-600: #00d8dd;   /* hover do CTA: ciano um passo mais escuro */

  /* --- Papéis semânticos: o resto do CSS usa SÓ estes --- */
  --background-color: #ffffff;
  --surface-color: #f5f8fc;
  --surface-raised: #ffffff;
  --default-color: #46536a;
  --muted-color: #5d6b81;
  --heading-color: var(--brand-navy);
  --accent-color: var(--brand-blue);
  --accent-hover: var(--blue-600);

  /*
   * O azul da marca (#1181f0) tem contraste 3,87 sobre branco -- reprova no
   * WCAG AA para texto normal, que exige 4,5. Ele continua sendo a cor de
   * MARCA (fundos, bordas, ícones); para TEXTO sobre fundo claro usamos um
   * tom mais escuro, medido em 5,21. O cinza de apoio subiu de 4,35 para 5,4
   * pelo mesmo motivo.
   */
  --link-color: #0d6ccc;
  /*
   * CTA e destaques usam o CIANO da marca (2026-08-26, pedido do owner: trocar
   * o amarelo por cor da marca). Contraste do texto navy sobre o ciano: 10,13
   * — melhor que os 8,28 do amarelo anterior; sobre o navy dos blocos escuros,
   * 12,8. O amarelo segue na paleta como token, sem uso ativo.
   */
  --cta-color: var(--brand-cyan);
  --cta-hover: var(--cyan-600);
  --cta-contrast: var(--brand-navy);

  /* Destaque de texto (palavra realçada no título, borda de lista, skip-link) */
  --highlight-color: var(--brand-cyan);
  --contrast-color: #ffffff;
  --border-color: #dde5f0;

  /* Cartão dos logos de parceiro: branco nos dois temas, porque vários logos
     trazem fundo branco embutido e some sobre superfície escura. */
  --partner-card-bg: #ffffff;

  --header-bg: rgba(255, 255, 255, .92);
  --header-color: var(--brand-navy);
  --header-border: rgba(26, 47, 84, .1);

  --footer-bg: var(--navy-900);
  --footer-color: #b9c7dd;
  --footer-heading: #ffffff;
  --footer-border: rgba(255, 255, 255, .12);

  --hero-bg: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 55%, #23477c 100%);
  --hero-color: #eaf1fb;

  /* Sobre fundo escuro o texto não pode usar os tokens claros (viram branco no branco):
     estes são fixos de propósito e valem em qualquer tema. */
  --on-dark: #ffffff;
  --on-dark-muted: #cfe0f5;
  --on-dark-soft: #c9d8ee;
  --on-dark-border: rgba(255, 255, 255, .22);
  --on-dark-surface: rgba(255, 255, 255, .06);
  --on-dark-line: rgba(255, 255, 255, .5);

  /* Luzes e véus do hero (gradientes só podem nascer aqui, como as cores) */
  --hero-blob-a: radial-gradient(circle at 30% 30%, rgba(17, 129, 240, .42), rgba(17, 129, 240, 0) 70%);
  --hero-blob-b: radial-gradient(circle at 60% 40%, rgba(0, 249, 255, .22), rgba(0, 249, 255, 0) 70%);
  --veu-modal: rgba(16, 29, 53, .55);

  /* X de fechar o balão: preto no tema claro. No escuro ele precisa clarear,
     senão fica invisível sobre o fundo da página. */
  --x-fechar: #000000;
  --x-fechar-hover: #444444;

  /* WhatsApp: cor da marca de terceiro, mantida de propósito pelo reconhecimento */
  --whatsapp-color: #25d366;
  --whatsapp-hover: #1fb955;
  --whatsapp-halo: rgba(37, 211, 102, .45);
  --shadow-whatsapp: 0 8px 22px rgba(37, 211, 102, .35);
  --shadow-whatsapp-forte: 0 12px 28px rgba(37, 211, 102, .45);

  /* Estado "no ar" do painel de operação */
  --status-ok: #3ddc97;
  --status-ok-halo: rgba(61, 220, 151, .55);

  --hero-foto-veu: linear-gradient(160deg, rgba(26, 47, 84, .55) 0%, rgba(16, 29, 53, .2) 55%, rgba(0, 249, 255, .12) 100%);

  /* --- Tipografia --- */
  /* Montserrat é a tipografia definida no manual de marca. Ela vale para títulos
     E para texto: o manual não define uma segunda família, e usar outra no corpo
     seria inventar identidade que a marca não tem. */
  --heading-font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --default-font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Espaçamento, raio e sombra --- */
  /* Ritmo vertical fluido: 3,5rem no desktop, 2,5rem no celular. O valor fixo de
     5rem deixava as seções soltas demais num site com pouco conteúdo por bloco. */
  --section-padding: clamp(2.5rem, 1.6rem + 3vw, 3.75rem) 0;
  --radius-sm: .4rem;
  --radius-md: .75rem;
  --radius-lg: 1.15rem;
  --radius-btn: .5rem;      /* 8px, como os botões da NexTool */
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16, 29, 53, .06), 0 2px 8px rgba(16, 29, 53, .05);
  --shadow-md: 0 10px 30px rgba(16, 29, 53, .1);
  --shadow-lg: 0 18px 48px rgba(16, 29, 53, .16);
  /* Sombra difusa e larga do card da NexTool: quase imperceptível de perto,
     mas é o que dá o descolamento do fundo. */
  --shadow-card: 0 5px 90px rgba(16, 29, 53, .1);
  --shadow-cta: 0 12px 26px rgba(0, 249, 255, .28);
  --shadow-accent: 0 12px 26px rgba(17, 129, 240, .22);
  --transition: .22s ease;

  /* Divisor do título de seção */
  --rule-color: rgba(70, 83, 106, .4);
}

/*
 * Tema escuro. O ciano da marca só aparece aqui: sobre branco ele não alcança
 * contraste suficiente para texto, mas no escuro funciona bem como acento.
 */
:root[data-theme="dark"] {
  --background-color: #0d1725;
  --surface-color: #131f31;
  --surface-raised: #172538;
  --default-color: #c2cee0;
  --muted-color: #94a3ba;
  --heading-color: #ffffff;
  --accent-color: #4ba6ff;
  --accent-hover: #7cc0ff;
  --link-color: #4ba6ff;   /* 7,03 sobre o fundo escuro: folgado */
  --border-color: #24354f;

  --header-bg: rgba(13, 23, 37, .92);
  --header-color: #ffffff;
  --header-border: rgba(255, 255, 255, .1);

  --footer-bg: #08111c;
  --footer-color: #9fb0c9;

  --hero-bg: linear-gradient(135deg, #08111c 0%, #0f1e35 55%, #16304f 100%);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .5);
  --shadow-card: 0 5px 60px rgba(0, 0, 0, .45);
  --rule-color: rgba(196, 210, 230, .3);
  --x-fechar: #e6edf7;
  --x-fechar-hover: #ffffff;
}

/* Presets de fundo por seção, para alternância clara/escura sem cor literal */
.light-background { background-color: var(--surface-color); }
.dark-background {
  background: var(--navy-900);
  --default-color: #c4d2e6;
  --heading-color: #ffffff;
  --muted-color: #9fb0c9;
  --border-color: rgba(255, 255, 255, .14);
  --surface-raised: rgba(255, 255, 255, .06);
}