/* Tokens de design da LP "Teste da triagem" (brief, seção 4).
   Mudou uma cor, um raio ou um tamanho? É aqui, e só aqui. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 600 800;
  font-stretch: 100% 108%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-next-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Fallbacks com métricas ajustadas (medidas contra Arial com fontTools) pra o texto
   não pular quando a fonte chega. Archivo 800 largura 100 (celular) e 108 (desktop). */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
  font-weight: 600 800;
  size-adjust: 102.64%;
  ascent-override: 85.54%;
  descent-override: 20.46%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback Largo";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
  font-weight: 600 800;
  size-adjust: 111%;
  ascent-override: 79.1%;
  descent-override: 18.92%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Atkinson Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 98.65%;
  ascent-override: 99.74%;
  descent-override: 32.03%;
  line-gap-override: 0%;
}

:root {
  /* cores: branco + um verde só (23/10). Tudo que não é branco é um tom do mesmo verde. */
  --branco: #FFFFFF;
  --verde-900: #0B2A1D;   /* texto */
  --verde-700: #4A6B5B;   /* texto de apoio */
  --verde-600: #0B7A4B;   /* botões, checks, links */
  --verde-650: #08603A;   /* botão apertado */
  --verde-200: #C9E8D5;   /* bordas fortes, marca-texto */
  --verde-150: #DCEFE3;   /* linhas */
  --verde-100: #E8F5EC;   /* superfícies, bolhas */
  --verde-50: #F3FAF6;    /* fundo de faixa */

  /* nomes antigos (o funil e o kit usam): apontam pros tons novos */
  --fundo: var(--branco);
  --papel: var(--branco);
  --tinta: var(--verde-900);
  --tinta-suave: var(--verde-700);
  --verde: var(--verde-600);
  --verde-press: var(--verde-650);
  --marca: var(--verde-200);
  --marca-borda: #A9D9BC;
  --caneta: var(--verde-900);
  --linha: var(--verde-150);
  --linha-forte: #A9CDB8;
  /* vermelho só no alerta do placar do resultado (decisão de 23/10) */
  --alerta: #B23A24;
  --alerta-100: #FBEAE6;
  --verde-faixa: rgba(11, 122, 75, .10);
  --verde-fundo: var(--verde-600);
  --verde-fundo-2: var(--verde-650);

  /* espaçamento (4.4) */
  --s1: 8px;
  --s2: 12px;
  --s3: 16px;
  --s4: 24px;
  --s5: 32px;
  --s6: 48px;
  --s7: 64px;
  --s8: 96px;
  --s9: 128px;
  /* (escala de 4 e 8: 8, 12, 16, 24, 32, 48, 64, 96, 128) */

  /* raios por hierarquia (4.5) */
  --r-doc: 10px;
  --r-cartao: 20px;
  --r-bolha: 18px;
  --r-form: 16px;
  --r-btn: 12px;
  --r-tag: 999px;

  /* sombras suaves em camadas: contato + ambiente */
  --sombra-1: 0 1px 2px rgba(11, 42, 29, .06), 0 1px 1px rgba(11, 42, 29, .04);
  --sombra-2: 0 1px 2px rgba(11, 42, 29, .05), 0 6px 14px -4px rgba(11, 42, 29, .08), 0 18px 32px -16px rgba(11, 42, 29, .12);
  --sombra-3: 0 2px 4px rgba(11, 42, 29, .05), 0 12px 24px -8px rgba(11, 42, 29, .10), 0 36px 64px -24px rgba(11, 42, 29, .22);
  --sombra-doc: var(--sombra-2);
  /* folha sobre folha: a de baixo aparece 8px pra direita e pra baixo */
  --sombra-pilha: var(--sombra-2), 8px 8px 0 -1px var(--branco), 8px 8px 0 0 var(--linha);
  --sombra-btn: 0 1px 2px rgba(11, 122, 75, .25), 0 10px 24px -10px rgba(11, 122, 75, .65);

  /* tipografia (4.3): celular -> desktop, de 360px a 1440px */
  --f-titulo: "Archivo", "Archivo Fallback", Arial, sans-serif;
  --f-corpo: "Atkinson Hyperlegible Next", "Atkinson Fallback", Arial, sans-serif;
  --t-corpo: clamp(18px, 17.667px + .0926vw, 19px);
  --t-h3: clamp(22px, 21.333px + .1852vw, 24px);
  --t-h2: clamp(28px, 25.333px + .7407vw, 36px);
  --t-h1: clamp(36px, 25.333px + 2.963vw, 68px);
  --t-menor: 16px;
  --largura-h1: 100%;

  --coluna: 720px;
  --pagina: 1200px;
  --gutter: 16px;

  /* movimento (4.6) */
  --curva: cubic-bezier(.22, 1, .36, 1);
  --rapido: 200ms;
  --medio: 320ms;
  --entrada: 640ms;
  --mola: cubic-bezier(.22, 1.2, .36, 1);
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --largura-h1: 108%;
  }
}
@media (min-width: 1024px) {
  :root {
    --f-titulo: "Archivo", "Archivo Fallback Largo", Arial, sans-serif;
    --gutter: 48px;
  }
}