/* ============================================================
   DS padrão · preto, cinza e offwhite · Poppins
   Versão de aprovação, aplicada no acervo SAV26.
   Vira o DS formal em ~/dev/design/ depois do OK do Ramon.
   ============================================================ */

/* ---------- fonte, servida local para funcionar sem internet ---------- */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fontes/poppins-400-latin.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fontes/poppins-400-latin-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:Poppins;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fontes/poppins-500-latin.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fontes/poppins-500-latin-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:Poppins;font-style:normal;font-weight:600;font-display:swap;
  src:url(../fontes/poppins-600-latin.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;
  src:url(../fontes/poppins-600-latin-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:Poppins;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fontes/poppins-700-latin.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fontes/poppins-700-latin-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}

/* ---------- camada 1: primitivos ---------- */
:root{
  /* escala neutra: cinza, com um toque mínimo de frio para não ficar morto */
  --n-0:#ffffff;  --n-25:#fafafa; --n-50:#f4f5f6;  --n-100:#eaebed;
  --n-200:#dcdee0; --n-300:#c4c7cb; --n-400:#979ba1; --n-500:#62666d;
  --n-600:#4b4f55; --n-700:#35383d; --n-800:#232529; --n-900:#141619;
  --n-950:#0a0b0d;

  /* Estados existem como token, mas a interface base é monocromática:
     hierarquia sai de peso, barra e superfície, nunca de cor.
     Só use estes quando o estado for de fato semântico (erro de formulário,
     confirmação de envio), e um por tela. */
  --fx-erro:#8a2f2f;   --fx-ok:#2f6146;   --fx-aviso:#8a5a2a;

  /* tipografia */
  --fonte:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --t-display:2.75rem; --t-h1:2rem;   --t-h2:1.375rem; --t-h3:1.0625rem;
  --t-corpo:0.9375rem;  --t-peq:0.8125rem; --t-micro:0.75rem;
  --p-regular:400; --p-medio:500; --p-forte:600; --p-bold:700;

  /* espaço, escala 4 */
  --e-2xs:4px; --e-xs:8px; --e-sm:12px; --e-md:16px;
  --e-lg:24px; --e-xl:32px; --e-2xl:48px; --e-3xl:72px;

  /* ---------- ritmo vertical ----------
     A escala acima é matéria-prima. Estes são os tokens de PAPEL: é neles que
     se mexe para apertar ou soltar a página inteira, sem caçar número solto.

       faixa        respiro de topo e base de cada seção
       faixa-densa  seção curta, tipo um par de blocos só
       cabecalho    do fim do cabeçalho até o conteúdo dele
       bloco        entre blocos irmãos dentro da mesma seção
       titulo       do título até a linha de apoio logo abaixo            */
  --ritmo-faixa:var(--e-3xl);
  --ritmo-faixa-densa:var(--e-2xl);
  --ritmo-cabecalho:var(--e-lg);
  --ritmo-bloco:var(--e-lg);
  --ritmo-titulo:var(--e-xs);

  /* raio */
  --r-sutil:4px; --r-base:8px; --r-medio:12px; --r-grande:20px; --r-pill:999px;

  /* movimento */
  --m-rapido:120ms; --m-base:200ms;
  --m-entra:cubic-bezier(0,0,0.2,1);

  /* ---------- camada 2: semânticos, tema claro ---------- */
  --bg:var(--n-25);
  --superficie:var(--n-0);
  --superficie-2:var(--n-50);
  --superficie-3:var(--n-100);
  --texto:var(--n-900);
  --texto-2:var(--n-600);
  --texto-3:var(--n-500);   /* n-500 era #686c73 até 27/09/2026: dava 4,42:1 na faixa cinza (n-100) */
  --borda:var(--n-200);
  --borda-forte:var(--n-300);
  --primaria:var(--n-950);
  --sobre-primaria:var(--n-0);
  --foco:var(--n-900);
  --faixa-clara:var(--n-0);
  --faixa-cinza:var(--n-100);
  --sombra:0 1px 2px rgba(10,11,13,.05);
  --sombra-2:0 4px 14px rgba(10,11,13,.07);
}

:root[data-theme="dark"]{
  --bg:var(--n-950);
  --superficie:var(--n-900);
  --superficie-2:var(--n-800);
  --superficie-3:var(--n-700);
  --texto:var(--n-50);
  --texto-2:var(--n-300);
  --texto-3:var(--n-400);
  --borda:var(--n-800);
  --borda-forte:var(--n-700);
  --primaria:var(--n-50);
  --sobre-primaria:var(--n-950);
  --foco:var(--n-100);
  --fx-erro:#e08585; --fx-ok:#7fbb9c; --fx-aviso:#d8a86f;
  /* no escuro a luminância comprime: n-900 sobre n-950 dá dL* 3.9 e a divisão
     some. Um degrau acima (n-800 sobre n-900) dá 7.5, o mesmo salto do claro. */
  --faixa-clara:var(--n-800);
  --faixa-cinza:var(--n-900);
  --sombra:0 1px 2px rgba(0,0,0,.4);
  --sombra-2:0 4px 14px rgba(0,0,0,.5);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--texto);
  font-family:var(--fonte);font-size:var(--t-corpo);font-weight:var(--p-regular);
  line-height:1.65;-webkit-font-smoothing:antialiased;
}

/* Poppins é geométrica: títulos pedem tracking negativo para não abrir demais */
h1,h2,h3{margin:0;font-weight:var(--p-forte);line-height:1.18;letter-spacing:-.021em}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2);letter-spacing:-.018em}
h3{font-size:var(--t-h3);letter-spacing:-.01em}
p{margin:0;text-wrap:pretty}
a{color:inherit}

/* rótulo de apoio: sans em caixa alta, nunca mono em interface */
.rotulo{
  font-size:var(--t-micro);font-weight:var(--p-forte);
  text-transform:uppercase;letter-spacing:.085em;color:var(--texto-3);
}

.envelope{max-width:1080px;margin:0 auto;padding:0 var(--e-lg)}

/* ---------- faixas de seção ----------
   Alternam SUPERFÍCIE dentro do mesmo tema (offwhite, branco, cinza claro).
   Não é inverter tema: claro continua claro do topo ao rodapé, e no tema
   escuro as três variantes viram três níveis de escuro. Inverter no meio da
   página é o tell que o gate bane; alternar tonal é o layering do DS.        */
.faixa{padding:var(--ritmo-faixa) 0}
.faixa--densa{padding:var(--ritmo-faixa-densa) 0}
/* Duas superfícies alternadas, escolhidas por diferença VISÍVEL: offwhite e
   branco ficam a 2% de luminância e a divisão some. Clara e cinza separam. */
.faixa--clara{background:var(--faixa-clara)}
.faixa--cinza{background:var(--faixa-cinza);border-block:1px solid var(--borda)}
/* faixa vizinha da mesma cor ganha fio, senão as duas viram uma só */
.faixa--clara + .faixa--clara{border-top:1px solid var(--borda)}

/* dentro da faixa, o ritmo é sempre o mesmo, venha de onde vier o conteúdo */
.faixa > .envelope > .cab{margin-bottom:var(--ritmo-cabecalho)}
.faixa > .envelope > * + *:not(.cab){margin-top:var(--ritmo-bloco)}
.cab > h2{margin-bottom:var(--ritmo-titulo)}

/* ---------- primitivas ---------- */
.ds-cartao{
  background:var(--superficie);border:1px solid var(--borda);
  border-radius:var(--r-medio);box-shadow:var(--sombra);
}
/* O cartão se separa da faixa onde está: branco sobre faixa branca some, então
   ali ele recua um tom; sobre a faixa cinza ele avança para o branco. Assim o
   layering funciona nas duas faixas sem cada peça escolher cor na mão. */
.faixa--clara .ds-cartao{background:var(--superficie-2)}
.faixa--cinza .ds-cartao{background:var(--superficie)}
.ds-badge{
  display:inline-block;font-size:var(--t-micro);font-weight:var(--p-forte);
  letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3);
  border:1px solid var(--borda-forte);border-radius:var(--r-sutil);
  padding:3px 7px;line-height:1.35;white-space:nowrap;
}
.ds-campo{
  font:inherit;width:100%;padding:11px 14px;color:var(--texto);
  background:var(--superficie);border:1px solid var(--borda-forte);
  border-radius:var(--r-base);transition:border-color var(--m-rapido) var(--m-entra);
}
.ds-campo::placeholder{color:var(--texto-3)}
.ds-campo:focus{outline:2px solid var(--foco);outline-offset:1px;border-color:var(--foco)}

/* Nota de atenção, monocromática: a barra sólida e o peso carregam o aviso */
.ds-nota{
  background:var(--superficie-2);border:1px solid var(--borda);
  border-left:3px solid var(--texto);border-radius:var(--r-base);
  padding:var(--e-md) var(--e-md) var(--e-md) var(--e-lg);
  font-size:var(--t-peq);color:var(--texto-2);
}
.ds-nota b{color:var(--texto);font-weight:var(--p-forte)}

:where(a,button,input,[tabindex]):focus-visible{
  outline:2px solid var(--foco);outline-offset:2px;border-radius:var(--r-sutil);
}

@media (max-width:820px){
  :root{--ritmo-faixa:var(--e-2xl);--ritmo-faixa-densa:var(--e-xl)}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}