/* ============================================================
   TOKENS
   Extraidos literalmente do mockup aprovado no Claude Design.
   Nenhum valor foi reinterpretado: cada cor, fonte, raio e
   espacamento abaixo aparece no arquivo original.

   Toda funcao clamp() foi calculada para render EXATAMENTE o
   valor do mockup no viewport de 1440px, que e a largura do
   design aprovado. Abaixo disso a peca encolhe; acima, o
   maximo trava. O desktop e identico ao design.
   ============================================================ */

:root {
  /* --- superficies --- */
  --bg:            #f4f2ee;  /* fundo base da pagina */
  --bg-alt:        #eceae4;  /* faixa alternada (blocos 2 e 7) */
  --surface:       #ffffff;  /* cards e blocos claros */
  --surface-form:  #fffdf9;  /* card do formulario, levemente quente */
  --navy:          #10233c;  /* azul institucional, blocos escuros */

  /* --- marca --- */
  --green:         #0e8a4f;  /* verde primario */
  --green-deep:    #0e6f45;  /* verde de texto e links */
  --green-darker:  #0a6f3e;  /* hover do botao de envio */
  --green-link-hv: #0a4f31;  /* hover de link */
  --yellow:        #f5b324;  /* amarelo destaque */
  --yellow-hover:  #ffc949;
  --yellow-soft:   #f5d79a;  /* texto da pilula amarela */
  --alert:         #a1341f;  /* etiqueta BLOQUEADO */

  /* --- texto --- */
  --ink:           #141a22;  /* corpo padrao do body */
  --ink-strong:    #10233c;  /* titulos */
  --ink-soft:      #1b232e;  /* abertura do bloco 1 */
  --ink-body:      #2b3440;  /* paragrafos */
  --ink-muted:     #4a525c;  /* apoio */
  --ink-mute-2:    #5b6470;  /* secundario */
  --ink-faint:     #6c6759;  /* terciario.
                                No mockup era #8a8578, que da 3.1:1 e
                                REPROVA no WCAG AA em texto pequeno.
                                Escurecido dentro da mesma familia de
                                cor. Passa em AA sobre as tres
                                superficies claras da pagina: 4.69:1
                                sobre bg-alt, 5.05:1 sobre bg e
                                5.64:1 sobre branco. Diferenca visual
                                minima, legibilidade legal garantida. */
  --ink-faint-lg:  #8a8578;  /* valor original do mockup, mantido onde
                                o texto e grande o bastante para
                                passar em AA mesmo assim */

  /* --- linhas e veus sobre fundo claro --- */
  --line:          rgba(16, 35, 60, .10);
  --line-2:        rgba(16, 35, 60, .12);
  --line-3:        rgba(16, 35, 60, .14);
  --line-4:        rgba(16, 35, 60, .16);
  --line-5:        rgba(16, 35, 60, .18);
  --line-6:        rgba(16, 35, 60, .22);
  --line-7:        rgba(16, 35, 60, .35);

  /* --- veus sobre fundo escuro --- */
  --on-navy-90:    rgba(255, 255, 255, .90);
  --on-navy-80:    rgba(255, 255, 255, .80);
  --on-navy-78:    rgba(255, 255, 255, .78);
  --on-navy-72:    rgba(255, 255, 255, .72);
  --on-navy-70:    rgba(255, 255, 255, .70);
  --on-navy-62:    rgba(255, 255, 255, .62);
  --on-navy-60:    rgba(255, 255, 255, .60);
  --on-navy-50:    rgba(255, 255, 255, .50);
  --navy-line:     rgba(255, 255, 255, .14);
  --navy-line-2:   rgba(255, 255, 255, .16);
  --navy-line-3:   rgba(255, 255, 255, .28);
  --navy-glass:    rgba(255, 255, 255, .06);

  /* --- tipografia --- */
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Source Sans 3", system-ui, -apple-system, sans-serif;
  /* pilha idêntica à do mockup. Acrescentar Consolas aqui parece
     inofensivo mas muda a largura das etiquetas no Windows, e o
     bloco 6 deixa de bater com o design. */
  --font-mono:    ui-monospace, Menlo, monospace;

  /* Cada par (rem + vw) foi resolvido por interpolação linear entre
     375px (mínimo) e 1440px (máximo), de modo que em 1440px o valor
     bate EXATAMENTE o do mockup. Conferido elemento a elemento contra
     o arquivo original. Não alterar sem refazer a conta. */

  /* display, os grandes */
  --t-hero:    clamp(40px, 1.70775rem + 3.38028vw, 76px);
  --t-numero:  clamp(70px, 3.14263rem + 5.25822vw, 126px);  /* "220 mil" */
  --t-por-ela: clamp(56px, 2.79575rem + 3.00469vw, 88px);   /* "E por ela." */
  --t-h2-lg:   clamp(36px, 1.67781rem + 2.44131vw, 62px);
  --t-h2:      clamp(34px, 1.59688rem + 2.25352vw, 58px);
  --t-h2-sm:   clamp(32px, 1.47188rem + 2.25352vw, 56px);
  --t-h2-xs:   clamp(32px, 1.60387rem + 1.69014vw, 50px);   /* "Nao acredite" */
  --t-display: clamp(30px, 1.39088rem + 2.06573vw, 52px);
  --t-card-tt: clamp(28px, 1.52988rem + 0.93897vw, 38px);   /* card recebido */
  --t-cta:     clamp(26px, 1.44894rem + 0.75117vw, 34px);   /* faixa CTA */
  --t-bandeira:clamp(26px, 1.49295rem + 0.56338vw, 32px);   /* card bloco 5 */
  --t-form-tt: clamp(26px, 1.53694rem + 0.37559vw, 30px);   /* "Conta comigo" */
  --t-cargo:   clamp(22px, 1.28694rem + 0.37559vw, 26px);   /* AGUA, DRENAGEM */

  /* corpo */
  --t-29: clamp(22px,   1.22094rem + 0.65728vw, 29px);
  --t-24: clamp(20px,   1.16194rem + 0.37559vw, 24px);
  --t-23: clamp(19px,   1.09944rem + 0.37559vw, 23px);
  --t-22: clamp(18.5px, 1.07925rem + 0.32864vw, 22px);
  --t-21: clamp(18px,   1.05900rem + 0.28169vw, 21px);
  --t-20: clamp(17.5px, 1.03875rem + 0.23474vw, 20px);
  --t-19: clamp(17px,   1.01850rem + 0.18779vw, 19px);
  --t-18:   18px;
  --t-17:   17px;
  --t-165:  16.5px;
  --t-eyebrow: 11.5px;
  --t-mono:    11px;

  /* --- raios --- */
  --r-bloco:  44px;  /* blocos escuros de largura total */
  --r-card:   32px;  /* cards internos */
  --r-card-2: 28px;  /* cards de grade */
  --r-input:  14px;
  --r-pill:   999px;
  --r-hard:   2px;   /* botoes e etiquetas de canto duro */

  /* --- ritmo vertical e gutter --- */
  --pad-sec:   clamp(56px, 3.50vw + 3.50rem, 104px);
  --pad-sec-l: clamp(64px, 4.00vw + 4.00rem, 120px);  /* bloco 3 */
  --pad-sec-m: clamp(56px, 3.60vw + 3.00rem, 96px);
  --gutter:    clamp(20px, 3.90vw, 56px);   /* 56px em 1440 */
  --gutter-xs: clamp(12px, 1.15vw, 16px);   /* blocos escuros soltos */
  --gap-col:   clamp(32px, 4.50vw, 64px);   /* entre as duas colunas */
  --gap-card:  20px;
  --maxw:        1440px;
  --maxw-mid:    1120px;
  --maxw-narrow: 1040px;

  /* --- sombra --- */
  --shadow-card: 0 24px 60px rgba(5, 12, 24, .28);
}