/* Tokens e base do site: cores, tipografia, espaços, movimento e botões. */

/* Satoshi (Fontshare, ITF Free Font License) */
@font-face { font-family: "Satoshi"; src: url("fontes/satoshi-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fontes/satoshi-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* Cores */
  --fundo: #0c0c0d;
  --superficie: #141416;   /* janelas e blocos sobre o fundo */
  --tinta: #f2f1ed;        /* texto principal */
  --apoio: #96948f;        /* texto secundário e rótulos */
  --linha: #232326;        /* divisórias e bordas */
  --contorno: #3a3b3f;     /* detalhes das janelas */
  --destaque: #8fb3ff;     /* foco do teclado e luz de fundo; não usar em texto corrido */
  /* Contraste: tinta/fundo 17,3:1 · apoio/fundo 6,5:1 · apoio/superficie 6,1:1 · destaque/fundo 9,4:1 */

  /* Tipografia */
  --fonte: "Satoshi", system-ui, sans-serif;
  --t-titulo: clamp(40px, 4.6vw, 72px);
  --t-titulo-lh: 1.02;
  --t-titulo-ls: -.04em;
  --t-sub: clamp(26px, 2.4vw, 38px);
  --t-sub-lh: 1.12;
  --t-sub-ls: -.025em;
  --t-lead: clamp(18px, 1.5vw, 22px);
  --t-lead-lh: 1.45;
  --t-texto: 17px;
  --t-texto-lh: 1.55;
  --t-rotulo: 13px;
  --t-rotulo-lh: 1.4;

  /* Espaços */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px;
  --margem: 6vw;
  --secao: clamp(112px, 16vh, 168px);

  /* Movimento */
  --curva: cubic-bezier(.16, 1, .3, 1);
  --rapido: .3s;
  --medio: .6s;
  --lento: 1.1s;
  --entrada: 1.4s;

  /* Formas */
  --raio-imagem: 22px;
  --raio-janela: 12px;
  --raio-pilula: 999px;
}

@media (max-width: 860px) {
  :root {
    --margem: 20px;
    --secao: 80px;
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { background: var(--fundo); color-scheme: dark; }
body { font-family: var(--fonte); color: var(--tinta); font-size: var(--t-texto); line-height: var(--t-texto-lh); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--destaque); outline-offset: 4px; border-radius: 4px; }

.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Botão: texto com linha embaixo; no hover a linha acende e a seta anda na direção para onde aponta */
.botao {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 40px;
  padding: var(--e-3) 0; position: relative;
  border: 0; border-bottom: 1px solid var(--tinta); border-radius: 0; background: none;
  color: var(--tinta); font: inherit; font-size: 18px; font-weight: 500; line-height: 1.2; cursor: pointer;
}
.botao::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--destaque); transform: scaleX(0); transform-origin: left; transition: transform var(--medio) var(--curva); }
.botao:hover::after, .botao:focus-visible::after { transform: scaleX(1); }
.botao svg { flex: none; transition: transform var(--medio) var(--curva); }
.botao:hover svg { transform: translate(var(--seta-x, 3px), var(--seta-y, 0)); }

.link { color: var(--apoio); transition: color var(--rapido); }
.link:hover { color: var(--tinta); }

/* Entrada: sobe e aparece quando o body recebe .pronto */
.entra { opacity: 0; transform: translateY(18px); transition: opacity var(--lento) var(--curva), transform var(--lento) var(--curva); transition-delay: var(--t, 0s); }
.pronto .entra { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
}