/* ══════════════════════════════════════════════════════════════════════════
   BONONI · TOKENS
   Fonte unica de verdade do design system. Nenhum hex solto em outro arquivo.
   ─────────────────────────────────────────────────────────────────────────
   ORIGEM DA PALETA: amostragem de pixel da logo real (public/uploads/bononi/
   logo-h-navy.png) = #29425D. Toda a escala navy deriva dela. A marca tem UMA
   cor; o resto e superficie (papel, concreto, aco) ou funcao (disciplinas).

   CORES DE DISCIPLINA/TOPICO: validadas por script (skill dataviz, seis
   checagens) nos DOIS modos. Nao trocar hex sem revalidar:
     node scripts/validate_palette.js "#3B7FC9,#2E8B57,#8265B8,#D89B34,#C2454C" --mode light  --surface "#F4F2ED"
     node scripts/validate_palette.js "#3B7FC9,#2E8B57,#8265B8,#BE8A2C,#C2454C" --mode dark   --surface "#17222E"
   O ambar tem contraste 2.17:1 no papel: serve para preenchimento e filete,
   NUNCA para texto. Texto ambar usa --c4-ink (4.94:1). Mesma regra das outras.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── ESCALA NAVY (derivada de #29425D) ───────────────────────────── */
  --navy-950:#0B121A;   /* cockpit, o mais fundo               */
  --navy-900:#101A24;
  --navy-850:#17222E;   /* superficie escura padrao (validada) */
  --navy-800:#1B2836;
  --navy-700:#22334A;
  --navy-600:#29425D;   /* ★ A MARCA                           */
  --navy-500:#35526F;
  --navy-400:#4A6885;
  --navy-300:#6B849C;
  --navy-200:#9AACBE;
  --navy-100:#C6D1DC;
  --navy-050:#E4EAF0;

  /* ── SUPERFICIES CLARAS (o calor da paleta vive aqui) ────────────── */
  --paper:#FCFBF9;
  --cream:#F4F2ED;      /* superficie clara padrao (validada)  */
  --cream-2:#EAE7E0;
  --concrete:#DCD8D0;
  --concrete-2:#C9C4BA;

  /* ── INK (nunca #000) ────────────────────────────────────────────── */
  --ink:#16202B;        /* 14.7:1 no papel */
  --ink-2:#35526F;      /* 7.2:1  */
  --ink-3:#4A6885;      /* 5.2:1  */

  /* ── DISCIPLINAS / TOPICOS (categorico, ordem fixa, nunca ciclado) ─ */
  --c1:#3B7FC9;  --c1-ink:#2A5E99;   /* projeto / arquitetura   */
  --c2:#2E8B57;  --c2-ink:#1F6640;   /* aprovado / hidraulica   */
  --c3:#8265B8;  --c3-ink:#5F4590;   /* informacao / eletrica   */
  --c4:#D89B34;  --c4-ink:#8A6115;   /* atencao / climatizacao  */
  --c5:#C2454C;  --c5-ink:#9A2F36;   /* conflito / incendio     */
  /* steps do modo escuro: so o ambar muda (banda L 0.48-0.67) */
  --c4-dark:#BE8A2C;
  /* 09/08/2026 · O manual ja dizia que sobre fundo escuro o --c1 precisa de
     um tom mais claro (o proprio da 3,44:1 no ink, reprovado para texto) e
     apontava #8FBBEA. Estava so no texto: virou token para o rotulo de
     unidade dos numeros da home parar de repetir o hex na mao. */
  --c1-dark:#8FBBEA;

  /* ── STATUS (reservado, nunca reusado como "serie 6") ───────────── */
  --ok:var(--c2);  --ok-ink:var(--c2-ink);
  --warn:var(--c4);--warn-ink:var(--c4-ink);
  --crit:var(--c5);--crit-ink:var(--c5-ink);
  --info:var(--c1);--info-ink:var(--c1-ink);

  /* ── WHATSAPP (marca externa, hex fixo) ─────────────────────────── */
  --wa:#25D366; --wa-d:#128C7E;
  /* 29/07/2026 · --wa-grad existe porque o gradiente "de marca"
     (--wa -> --wa-d) com escrita BRANCA da so 1,98:1 de contraste na parada
     clara: ilegivel, reprovado em qualquer critério. Estes dois tons também
     são do WhatsApp (os que ele usa nos cabeçalhos do próprio app) e o branco
     sobre eles fica em 5,13:1 no pior ponto. Use --wa-grad sempre que o texto
     do botão for branco; --wa puro serve para ícone, fio e fundo tingido. */
  --wa-grad:linear-gradient(135deg,#0E7C6F,#075E54);

  /* ── TIPOGRAFIA ──────────────────────────────────────────────────── */
  --f-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-disp:'Space Grotesk','Inter',system-ui,sans-serif;   /* display  */
  --f-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace; /* cotas, rotulos tecnicos */

  /* escala fluida */
  --t-eyebrow:clamp(.68rem,.62rem + .18vw,.78rem);
  --t-micro:clamp(.72rem,.68rem + .18vw,.82rem);
  --t-sm:clamp(.86rem,.82rem + .2vw,.95rem);
  --t-body:clamp(1rem,.96rem + .22vw,1.09rem);
  --t-lead:clamp(1.1rem,1rem + .5vw,1.35rem);
  --t-h3:clamp(1.2rem,1.05rem + .7vw,1.6rem);
  --t-h2:clamp(1.75rem,1.35rem + 2vw,3.1rem);
  --t-h1:clamp(2.3rem,1.6rem + 3.6vw,4.6rem);
  --t-mega:clamp(3.4rem,2rem + 7vw,9rem);

  --lh-tight:1.06;
  --lh-head:1.14;
  --lh-body:1.68;
  --ls-h1:-.035em;
  --ls-h2:-.028em;
  --ls-eyebrow:.16em;
  --ls-mono:.06em;

  /* ── RITMO / MEDIDAS ─────────────────────────────────────────────── */
  --wrap:1240px;
  --wrap-narrow:820px;
  --gut:clamp(18px,4.4vw,44px);
  --sec-y:clamp(64px,9vw,132px);
  --gap:clamp(16px,2.2vw,28px);

  /* ── RAIO ────────────────────────────────────────────────────────── */
  --r-pill:999px;
  --r-lg:22px;
  --r-md:14px;
  --r-sm:9px;
  --r-xs:5px;

  /* ── SOMBRA (empilhada, nunca uma so) ───────────────────────────── */
  --sh-1:0 1px 2px rgba(11,18,26,.06), 0 2px 8px -2px rgba(11,18,26,.08);
  --sh-2:0 2px 4px rgba(11,18,26,.05), 0 12px 28px -10px rgba(11,18,26,.16);
  --sh-3:0 4px 8px rgba(11,18,26,.06), 0 28px 60px -20px rgba(11,18,26,.26);
  --sh-in:inset 0 1px 0 rgba(255,255,255,.6);
  --sh-in-d:inset 0 1px 0 rgba(255,255,255,.09);

  /* ── MOVIMENTO ───────────────────────────────────────────────────── */
  --e-out:cubic-bezier(.16,1,.3,1);       /* saida generosa       */
  --e-io:cubic-bezier(.5,0,.2,1);
  --e-bounce:cubic-bezier(.34,1.56,.64,1);
  --d-fast:.18s; --d-mid:.34s; --d-slow:.62s; --d-vslow:1.1s;

  /* ── GRID DE PRANCHA (do proprio material da marca) ───────────────
     10/08/2026 · --grid-step e a FONTE UNICA do tamanho do quadradinho, e
     usar valor fixo em qualquer malha e bug. Estavam em sete tamanhos
     diferentes espalhados pelo site (15, 22, 26, 30, 34, 48, 52 e 56px), e o
     Joao notou na home: a mesma textura mudava de escala de secao para secao,
     o que tira dela justamente o que ela deveria dar, a impressao de UMA
     prancha atras de tudo. Todas as oito malhas agora leem daqui. */
  --grid-step:34px;
  --grid-line:rgba(41,66,93,.075);
  --grid-line-strong:rgba(41,66,93,.14);

  /* ── CHROME (consumido por bononi-chrome.css) ───────────────────── */
  /* Chrome em duas faixas, como nos outros sites: barra de contato + barra
     principal. --head-h e a soma, e e o que hero e paginas internas reservam
     no topo. Ao rolar, a barra de contato recolhe e a principal encolhe. */
  /* 30/07/2026 · Header mais alto e mais arejado. A logo ocupava so 44% da
     altura da barra e sobrava ar demais em volta dela, o que fazia a marca
     parecer pequena. Medido: logo 28px numa barra de 64px.
     A logo natural tem 177x640, entao ha folga de sobra para ampliar sem
     borrar (a 48px ainda sao 3,7x de densidade). */
  /* 08/08/2026 · Cromo CLARO e maior, com as duas faixas andando juntas.
     Antes a barra de contato recolhia para cima (is-up) e a principal ia sozinha
     para o topo (is-top0): as duas se separavam ao rolar. Agora o conjunto e um
     objeto so e COMPACTA junto, dirigido por [data-head] no <html> (ver o fim
     deste arquivo). Como .bh usa top:var(--top-h) e --head-h e a soma, mudar
     essas duas variaveis arrasta tudo sem uma linha de JS a mais. */
  /* 08/08/2026 · 46 para 54: a faixa de contato usa ALTURA e nao padding, entao
     dar respiro aos itens e subir --top-h. Em 46 o texto de .79rem sobrava so
     14px em cima e embaixo, e a faixa lia como apertada contra a barra
     principal. A parada `solid` acompanha, de 38 para 44. */
  --top-h:54px;
  --bar-h:106px;
  --bar-h-sm:86px;
  --head-h:calc(var(--top-h) + var(--bar-h));
  --head-h-sm:calc(var(--top-h-sm, 38px) + var(--bar-h-sm));
  --nav-accent:var(--navy-600);
  --z-head:100; --z-dock:1075; --z-bd:1090; --z-drawer:1091; --z-modal:1200;
}

/* ══════════════════════════════════════════════════════════════════════
   TEMAS DE SECAO
   O site alterna superficie de secao em secao, nunca fica monocromatico.
   Uso: <section class="sec" data-sec="paper|steel|concrete|ink|deep|brand">
   Cada tema redefine as MESMAS variaveis, entao o componente interno nunca
   precisa saber em que fundo esta. Isso e o que permite reordenar secoes
   sem retrabalho de CSS.
   ══════════════════════════════════════════════════════════════════════ */

[data-sec]{
  background:var(--s-bg);
  color:var(--s-ink);
}

/* claro · papel de prancha (default) */
[data-sec="paper"]{
  --s-bg:var(--cream);
  --s-ink:var(--ink);
  --s-ink-2:var(--ink-2);
  --s-ink-3:var(--ink-3);
  --s-line:rgba(41,66,93,.13);
  --s-line-soft:rgba(41,66,93,.07);
  --s-card:var(--paper);
  --s-card-2:#fff;
  --s-accent:var(--navy-600);
  --s-grid:var(--grid-line);
  --s-shadow:var(--sh-2);
  --s-inset:var(--sh-in);
  --s-amber:var(--c4);
}
/* claro · aco (azulado frio) */
[data-sec="steel"]{
  --s-bg:linear-gradient(178deg,var(--navy-050),#EFF3F7 60%,var(--navy-050));
  --s-ink:var(--ink);
  --s-ink-2:var(--ink-2);
  --s-ink-3:var(--ink-3);
  --s-line:rgba(41,66,93,.16);
  --s-line-soft:rgba(41,66,93,.09);
  --s-card:#fff;
  --s-card-2:var(--paper);
  --s-accent:var(--navy-600);
  --s-grid:rgba(41,66,93,.09);
  --s-shadow:var(--sh-2);
  --s-inset:var(--sh-in);
  --s-amber:var(--c4);
}
/* ══ claro · CIMENTO FRIO ══════════════════════════════════════════════════
   08/08/2026 · Este tema usava `--concrete` (#DCD8D0) e nao combinava com o
   resto do site. O motivo e mensuravel, nao de gosto. Matiz e saturacao de cada
   superficie:

     --navy-600  A MARCA .... 211deg  55.9%    frio
     --navy-050 ............. 210deg   5.0%    frio, mesma familia
     steel (meio) ........... 210deg   3.2%    neutro
     --paper ................  40deg   1.2%    neutro (satura pouco demais
     --cream ................  43deg   2.9%    neutro  para o olho ver o calor)
     --cream-2 ..............  42deg   4.3%    QUENTE
     --concrete .............  40deg   5.5%    QUENTE

   A marca esta em 211 graus. O concrete esta em 40 com 5,5% de saturacao: era a
   unica superficie do site quente O SUFICIENTE para se notar, a 171 graus do
   matiz da marca, quase o complementar. Paper e cream tambem sao warm no papel,
   mas com 1,2% e 2,9% ninguem le calor ali.

   #DAE2EB e 212deg com 7,2%: mesma familia da marca, e 6 pontos de luminancia
   mais escuro que steel, entao os dois continuam distinguiveis.

   Corrigido no TEMA e nao no token: `--concrete` continua valendo como cor de
   MATERIAL (o concreto da cena 3D, o fundo da faixa dos cards). Trocar o token
   arrastaria essas outras usos. E como sao tres secoes usando este tema (bprob,
   besc, bfaq), uma mudanca aqui resolve as tres sem tocar em view nenhuma.
   ═════════════════════════════════════════════════════════════════════════ */
[data-sec="concrete"]{
  --s-bg:#DAE2EB;
  --s-ink:var(--ink);
  /* ink-2 e ink-3 eram #4A4740 e #6B675E, cinzas QUENTES, o mesmo erro do fundo.
     Passam aos tons padrao do sistema, que sao frios e ja validados. */
  --s-ink-2:var(--ink-2);
  --s-ink-3:var(--ink-3);
  --s-line:rgba(41,66,93,.18);
  --s-line-soft:rgba(41,66,93,.09);
  /* cartao BRANCO e nao cream: cream e warm (43deg) e sobre fundo frio o
     desencontro de matiz aparece justamente na borda do cartao. */
  --s-card:#fff;
  --s-card-2:var(--paper);
  --s-accent:var(--navy-600);
  --s-grid:rgba(41,66,93,.08);
  --s-shadow:var(--sh-2);
  --s-inset:var(--sh-in);
  --s-amber:var(--c4);
}
/* escuro · navy padrao */
[data-sec="ink"]{
  --s-bg:var(--navy-850);
  --s-ink:var(--paper);
  --s-ink-2:var(--navy-100);
  --s-ink-3:var(--navy-200);
  --s-line:rgba(198,209,220,.17);
  --s-line-soft:rgba(198,209,220,.09);
  --s-card:rgba(255,255,255,.045);
  --s-card-2:rgba(255,255,255,.075);
  --s-accent:var(--navy-100);
  --s-grid:rgba(198,209,220,.07);
  --s-shadow:0 24px 60px -22px rgba(0,0,0,.7);
  --s-inset:var(--sh-in-d);
  --s-amber:var(--c4-dark);
}
/* escuro · cockpit (o mais fundo, para os momentos 3D) */
[data-sec="deep"]{
  --s-bg:var(--navy-950);
  --s-ink:var(--paper);
  --s-ink-2:var(--navy-100);
  --s-ink-3:var(--navy-300);
  --s-line:rgba(198,209,220,.14);
  --s-line-soft:rgba(198,209,220,.07);
  --s-card:rgba(255,255,255,.04);
  --s-card-2:rgba(255,255,255,.07);
  --s-accent:var(--c1);
  --s-grid:rgba(155,180,210,.06);
  --s-shadow:0 30px 80px -24px rgba(0,0,0,.85);
  --s-inset:var(--sh-in-d);
  --s-amber:var(--c4-dark);
}
/* escuro · marca cheia (faixas de CTA) */
[data-sec="brand"]{
  --s-bg:linear-gradient(140deg,var(--navy-700),var(--navy-600) 52%,var(--navy-800));
  --s-ink:var(--paper);
  --s-ink-2:var(--navy-100);
  --s-ink-3:var(--navy-200);
  --s-line:rgba(255,255,255,.2);
  --s-line-soft:rgba(255,255,255,.1);
  --s-card:rgba(255,255,255,.08);
  --s-card-2:rgba(255,255,255,.12);
  --s-accent:#fff;
  --s-grid:rgba(255,255,255,.06);
  --s-shadow:0 24px 60px -22px rgba(0,0,0,.55);
  --s-inset:var(--sh-in-d);
  --s-amber:var(--c4-dark);
}

/* Fallback: secao sem data-sec herda papel */
.sec:not([data-sec]){
  --s-bg:var(--cream); --s-ink:var(--ink); --s-ink-2:var(--ink-2); --s-ink-3:var(--ink-3);
  --s-line:rgba(41,66,93,.13); --s-line-soft:rgba(41,66,93,.07);
  --s-card:var(--paper); --s-card-2:#fff; --s-accent:var(--navy-600);
  --s-grid:var(--grid-line); --s-shadow:var(--sh-2); --s-inset:var(--sh-in); --s-amber:var(--c4);
  background:var(--s-bg); color:var(--s-ink);
}

/* ══ ALTURA DO CROMO POR ESTADO ═══════════════════════════════════════════
   08/08/2026 · [data-head] e escrito no <html> por bononi-chrome.js. Reduzir
   --top-h aqui arrasta .bh (que usa top:var(--top-h)) e --head-h (que e a soma
   e e o que cada hero reserva). Uma variavel, tres consequencias, zero JS de
   layout. Antes cada faixa tinha a propria classe e elas se descolavam.        */
:root[data-head="solid"]{
  --top-h:44px;
  --top-h-sm:44px;
}