/* ==========================================================================
   VALUING DIGITAL — tokens.css
   Variáveis, reset e escala tipográfica.

   TODA a paleta do site vive neste arquivo. Para trocar as cores do site
   inteiro, mexa só no bloco :root abaixo — nada de cor fixa em main.css.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     PALETA — estritamente monocromática (preto, branco e cinzas)
     --------------------------------------------------------------------- */

  --bg:             #08090b;  /* preto base — fundo das seções escuras (01, 02, 10, 11) */
  --bg-soft:        #14151a;  /* preto levantado — blocos e pills dentro do escuro */
  --card-dark:      #15171d;  /* fundo do card escuro do manifesto (seção 06) */
  --surface:        #e8e8ee;  /* off-white — fundo das seções claras (03 a 09) */
  --surface-pure:   #ffffff;  /* branco puro — tarja do marquee, pills, cards do miolo */

  --fg:             #f4f4f5;  /* texto principal sobre fundo escuro */
  --fg-invert:      #101116;  /* texto principal sobre fundo claro */

  /* Os cinzas de texto são escolhidos por contraste medido, não a olho.
     Todos ficam acima de 7:1 contra o fundo mais desfavorável em que são
     usados — no caso do claro, o degradê mais escuro dos cards (#dcdce2). */
  --muted:          #41454e;  /* secundário no CLARO + micro-labels — 7,03:1 no card */
  --ink:            #282b31;  /* corpo de texto no CLARO — 10,4:1 no card */
  --muted-2:        #adafb7;  /* secundário no ESCURO — 8,18:1 no card escuro */

  --hairline-dark:  rgba(244, 244, 245, 0.12);  /* linha de 1px sobre fundo escuro */
  --hairline-light: rgba(16, 17, 22, 0.14);     /* linha de 1px sobre fundo claro */
  --hairline-solid-dark:  rgba(244, 244, 245, 0.42); /* hairline no hover (escuro) */
  --hairline-solid-light: rgba(16, 17, 22, 0.46);    /* hairline no hover (claro) */

  /* Degradês de cinza dos cards de segmento (seção 05).
     Substituem os fundos pastel da referência — cada card um tom. */
  --card-g1: linear-gradient(150deg, #f7f7f9 0%, #e4e4ea 100%);
  --card-g2: linear-gradient(150deg, #f2f2f5 0%, #dcdce3 100%);
  --card-g3: linear-gradient(150deg, #f6f6f7 0%, #e0e0e6 100%);
  --card-g4: linear-gradient(150deg, #efeff2 0%, #dadae1 100%);
  --card-g5: linear-gradient(150deg, #f4f4f5 0%, #e2e2e8 100%);
  --card-g6: linear-gradient(150deg, #ececed 0%, #dcdce2 100%);

  /* Contexto de cor — cada seção redefine estes, e os componentes
     (hairlines, links, micro-labels) seguem sozinhos. */
  --ctx-fg:       var(--fg);
  --ctx-muted:    var(--muted-2);   /* micro-labels e secundário */
  --ctx-ink:      var(--muted-2);   /* corpo de texto corrido */
  --ctx-hairline: var(--hairline-dark);
  --ctx-hairline-strong: var(--hairline-solid-dark);

  /* ---------------------------------------------------------------------
     TIPOGRAFIA
     --------------------------------------------------------------------- */

  /* Grotesco neutro do sistema. É o mesmo gênero que o site de referência
     computa (Arial / Helvetica) e carrega 0 KB.
     PARA TROCAR POR INTER TIGHT / GEIST:
       1. coloque os .woff2 subsetados em assets/fonts/
       2. descomente o bloco @font-face no fim deste arquivo
       3. troque a linha abaixo por:
          --font: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif; */
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* Escala fluida. Quanto maior o tipo, mais negativo o tracking. */
  --fs-hero:      clamp(3.5rem, 17vw, 20rem);
  --fs-h2:        clamp(2.5rem, 6vw, 6rem);
  --fs-h3:        clamp(1.5rem, 3vw, 2.75rem);
  --fs-statement: clamp(1.6rem, 3.4vw, 4rem);
  --fs-display:   clamp(2rem, 4.4vw, 4.5rem);   /* e-mail do footer, números */
  --fs-body:      clamp(0.9375rem, 0.88rem + 0.22vw, 1.0625rem);
  --fs-small:     clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);
  --fs-micro:     clamp(0.625rem, 0.6rem + 0.08vw, 0.6875rem);

  --ls-hero:      -0.05em;
  --ls-h2:        -0.035em;
  --ls-h3:        -0.02em;
  --ls-micro:      0.1em;
  --ls-wordmark:   0.06em;

  --lh-hero:  0.82;
  --lh-h2:    0.95;
  --lh-body:  1.55;

  --measure: 62ch;  /* largura máxima de parágrafo */

  /* ---------------------------------------------------------------------
     GRID E ESPAÇAMENTO
     --------------------------------------------------------------------- */

  --gutter:    clamp(20px, 4.4vw, 88px);  /* margem lateral do container */
  --col-gap:   clamp(16px, 1.8vw, 32px);
  --section-y: clamp(88px, 10vw, 200px);  /* respiro vertical de seção */
  --block-y:   clamp(40px, 5vw, 96px);

  /* ---------------------------------------------------------------------
     RAIO
     --------------------------------------------------------------------- */

  --r-sm:   12px;  /* cards pequenos */
  --r-md:   24px;  /* blocos */
  --r-lg:   30px;  /* blocos grandes */
  --r-pill: 99px;  /* pills e botões */

  /* ---------------------------------------------------------------------
     MOVIMENTO
     --------------------------------------------------------------------- */

  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-hover:  240ms;
  --dur-block:  400ms;
  --dur-reveal: 700ms;

  /* ---------------------------------------------------------------------
     CAMADAS
     --------------------------------------------------------------------- */

  --z-canvas:  0;
  --z-content: 2;
  --z-header:  50;
  --z-cursor:  9999;
}

/* Contexto claro: aplicado nas seções off-white. */
.ctx-light {
  --ctx-fg:       var(--fg-invert);
  --ctx-muted:    var(--muted);
  --ctx-ink:      var(--ink);       /* texto corrido mais escuro que as labels */
  --ctx-hairline: var(--hairline-light);
  --ctx-hairline-strong: var(--hairline-solid-light);
}

/* ==========================================================================
   RESET
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;   /* o smooth scroll é feito em JS (lerp) */
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  hyphens: none;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
canvas { display: block; max-width: 100%; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

h1, h2, h3, h4 {
  font-weight: 400;
  line-height: var(--lh-h2);
}

/* Números e siglas com figuras tabulares quando a fonte oferecer. */
.tnum,
time,
[data-count] { font-feature-settings: "tnum", "ss01"; font-variant-numeric: tabular-nums; }

/* Seleção de texto — inversão pura, sem cor. */
::selection { background: var(--fg); color: var(--fg-invert); }
.ctx-light ::selection { background: var(--fg-invert); color: var(--fg); }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Acessível só para leitor de tela. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   ESCALA TIPOGRÁFICA — classes base
   ========================================================================== */

.t-hero {
  font-size: var(--fs-hero);
  letter-spacing: var(--ls-hero);
  line-height: var(--lh-hero);
  font-weight: 400;
}

.t-h2 {
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-h2);
  text-wrap: balance;
}

.t-h3 {
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-h3);
  line-height: 1.05;
}

.t-display {
  font-size: var(--fs-display);
  letter-spacing: -0.03em;
  line-height: 1;
}

.t-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: var(--measure);
  color: var(--ctx-ink);
}

.t-micro {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ctx-muted);
  font-weight: 500;
}

/* O itálico entra sempre na SEGUNDA linha da manchete, nunca na primeira. */
.t-h2 em,
.t-hero em,
.t-display em {
  font-style: italic;
  font-synthesis: none;   /* nada de oblíquo sintético */
}

/* ==========================================================================
   @font-face — DESATIVADO
   Descomente depois de colocar os .woff2 subsetados em assets/fonts/
   e trocar --font lá em cima.
   ==========================================================================

@font-face {
  font-family: "Inter Tight";
  src: url("../assets/fonts/inter-tight-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../assets/fonts/inter-tight-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../assets/fonts/inter-tight-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

   ========================================================================== */

/* ==========================================================================
   MICRO-LABELS NO CELULAR
   10-11px em tela pequena, a distância de leitura do celular, ficava
   ilegível. Sobe para 12px abaixo de 700px.
   ========================================================================== */

@media (max-width: 700px) {
  :root { --fs-micro: 0.75rem; }
}