/* =============================================================
   ConnectVia · tokens · fonte da verdade do site
   -------------------------------------------------------------
   Duas camadas, e a distinção é a regra mais importante do arquivo:

   1. MARCA      (--cv-*)  constantes, nunca mudam.
   2. SEMÂNTICA  (--ground, --ink, --line, --cta-*)  mudam conforme
      a superfície em que o componente está.

   Componente nenhum consome um token de marca diretamente. Cada
   seção declara data-surface e tudo dentro dela se resolve — e é
   isso que impede o erro mais provável do projeto: botão Champagne
   sobre fundo Areia (1,5:1).

   O site não acompanha o tema do sistema operacional: as
   superfícies da marca são absolutas. Ver design/direction.html.
   ============================================================= */

/* ---------- fontes ---------- */
@font-face{
  font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('../fonts/nr-rm-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('../fonts/nr-rm-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;
  src:url('../fonts/nr-it-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;
  src:url('../fonts/nr-it-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/is-rm-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/is-rm-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Sans';font-style:italic;font-weight:400 700;font-display:swap;
  src:url('../fonts/is-it-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';font-style:italic;font-weight:400 700;font-display:swap;
  src:url('../fonts/is-it-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* ---------- marca: constantes ---------- */
  --cv-espresso:#1E1815;
  --cv-grafite:#2E2622;
  --cv-fumo:#6E6259;
  --cv-areia:#F6F2EC;
  --cv-papel:#EBE3D6;
  --cv-champagne:#DCC8A4;
  --cv-bronze:#B99B63;
  --cv-verde:#23453A;
  --cv-ember:#E2542A;
  /* Ember para fundo claro. Não é cor nova da paleta: é a mesma matiz
     aprofundada porque o Ember original reprova sobre Areia (3,4:1) e
     sobre Papel (3,0:1). Assim o sinal de dado e o estado de erro
     passam AA nos dois fundos claros — 5,4:1 e 4,7:1. */
  --cv-ember-ink:#B03A15;

  /* ---------- tipografia ---------- */
  --font-display:'Newsreader',Georgia,'Times New Roman',serif;
  --font-ui:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --fs-hero:clamp(44px,8.4vw,116px);
  --fs-h1:clamp(38px,5.8vw,80px);
  --fs-h2:clamp(34px,4.6vw,62px);
  --fs-h3:clamp(21px,2.1vw,26px);
  --fs-metric:clamp(40px,5.4vw,88px);
  --fs-lede:clamp(17px,1.75vw,21px);
  --fs-body:16.5px;
  --fs-read:18.5px;
  --fs-small:14.5px;
  --fs-label:11.5px;

  --lh-display:.96;
  --lh-lede:1.55;
  --lh-body:1.68;

  --ls-hero:-.028em;
  --ls-h2:-.023em;
  --ls-h3:-.014em;
  --ls-label:.16em;

  --fw-body:400;
  --fw-medium:500;
  --fw-strong:600;
  --opsz-display:72;
  --opsz-read:16;

  --measure:64ch;
  --measure-read:58ch;
  --measure-display:15ch;

  /* ---------- espaço ---------- */
  --s1:4px;   --s2:8px;    --s3:12px;   --s4:16px;
  --s5:24px;  --s6:32px;   --s7:48px;   --s8:64px;
  --s9:96px;  --s10:128px; --s11:160px; --s12:200px;

  --pad-x:clamp(24px,5vw,80px);
  --sec-y:clamp(72px,8.5vw,140px);
  --col-gap:clamp(16px,1.9vw,28px);
  --container:1440px;
  --content:1240px;
  --header-h:72px;
  --header-h-scrolled:60px;

  /* ---------- forma ---------- */
  --r-sm:2px; --r-md:3px; --r-lg:4px;

  /* ---------- sombra: um token, só sobreposição real ---------- */
  --sh-overlay:0 24px 60px -30px rgba(30,24,21,.55);

  /* ---------- tempo ---------- */
  --t-fast:140ms; --t-base:220ms; --t-slow:420ms;
  --ease:cubic-bezier(.16,.84,.44,1);
}

/* =============================================================
   SUPERFÍCIES
   Contrastes verificados; os que reprovam AA estão anotados com a
   restrição de uso que os torna válidos.
   ============================================================= */

[data-surface="espresso"]{
  --ground:var(--cv-espresso);
  --ground-2:#241D19;
  --ink:#F1EBE1;                 /* 14.6:1 */
  --ink-2:#B3A79B;               /*  7.4:1 */
  --ink-3:#8C8078;               /*  4.5:1 */
  --line:rgba(246,242,236,.14);
  --line-2:rgba(246,242,236,.28);
  --accent:var(--cv-champagne);  /* 10.5:1 */
  --accent-gfx:var(--cv-champagne);
  --cta-bg:var(--cv-champagne);
  --cta-ink:var(--cv-espresso);
  --cta-bg-hover:#E9DCC1;
  --focus:var(--cv-champagne);
  --signal:var(--cv-ember);      /*  4.6:1 */
  --danger:var(--cv-ember);      /*  4.6:1 */
  --hover-ground:#241D19;
}

[data-surface="areia"]{
  --ground:var(--cv-areia);
  --ground-2:var(--cv-papel);
  --ink:#241D19;                 /* 13.1:1 */
  --ink-2:#5B5049;               /*  7.0:1 */
  --ink-3:var(--cv-fumo);        /*  5.4:1 */
  --line:rgba(46,38,34,.15);
  --line-2:rgba(46,38,34,.30);
  --accent:var(--cv-verde);      /*  9.5:1 */
  --accent-gfx:var(--cv-bronze); /*  2.4:1 — só grafismo, nunca texto */
  --cta-bg:var(--cv-espresso);
  --cta-ink:var(--cv-areia);
  --cta-bg-hover:#2E2622;
  --focus:var(--cv-verde);
  --signal:var(--cv-ember-ink);  /*  5.4:1 */
  --danger:var(--cv-ember-ink);  /*  5.4:1 */
  --hover-ground:var(--cv-papel);
}

[data-surface="papel"]{
  --ground:var(--cv-papel);
  --ground-2:#E3DACB;
  --ink:#241D19;
  --ink-2:#5B5049;
  --ink-3:var(--cv-fumo);
  --line:rgba(46,38,34,.16);
  --line-2:rgba(46,38,34,.32);
  --accent:var(--cv-verde);
  --accent-gfx:var(--cv-bronze);
  --cta-bg:var(--cv-espresso);
  --cta-ink:var(--cv-areia);
  --cta-bg-hover:#2E2622;
  --focus:var(--cv-verde);
  --signal:var(--cv-ember-ink);  /*  4.7:1 */
  --danger:var(--cv-ember-ink);  /*  4.7:1 */
  --hover-ground:#E3DACB;
}

[data-surface="verde"]{
  --ground:var(--cv-verde);
  --ground-2:#1E3A31;
  --ink:var(--cv-areia);         /*  9.5:1 */
  --ink-2:#BFCCC5;               /*  6.5:1 */
  --ink-3:#9DAFA7;               /*  4.6:1 */
  --line:rgba(246,242,236,.16);
  --line-2:rgba(246,242,236,.30);
  --accent:var(--cv-champagne);  /*  6.4:1 */
  --accent-gfx:var(--cv-champagne);
  --cta-bg:var(--cv-champagne);
  --cta-ink:var(--cv-espresso);
  --cta-bg-hover:#E9DCC1;
  --focus:var(--cv-champagne);
  /* Ember reprova sobre Verde (2,8:1) — seção verde não carrega dado,
     e formulário não vive aqui: --danger cai para a cor de texto. */
  --signal:var(--cv-champagne);
  --danger:var(--cv-areia);
  --hover-ground:#1E3A31;
}

[data-surface="champagne"]{
  --ground:var(--cv-champagne);
  --ground-2:#D3BC93;
  --ink:var(--cv-espresso);      /* 10.5:1 */
  --ink-2:#3A2E27;
  --ink-3:#4A3B32;
  --line:rgba(30,24,21,.22);
  --line-2:rgba(30,24,21,.40);
  --accent:var(--cv-verde);
  --accent-gfx:var(--cv-espresso);
  --cta-bg:var(--cv-espresso);
  --cta-ink:var(--cv-areia);
  --cta-bg-hover:#2E2622;
  --focus:var(--cv-verde);
  /* Ember reprova sobre Champagne (2,3:1) */
  --signal:var(--cv-espresso);
  --danger:var(--cv-espresso);
  --hover-ground:#D3BC93;
}