/* ══════════════════════════════════════════════════════════════════════
   RESET + CONTRATO DE TOKENS
   Este arquivo é o único que TODA variante e TODA skin carregam. Ele não
   decide nada de aparência: só zera o navegador e declara, em um lugar,
   quais tokens existem e o que cada um significa. Os valores vêm da skin.

   Se um token não estiver aqui, ele não existe. Se uma skin esquecer de
   definir um, o fallback abaixo mantém a página legível em vez de
   quebrar — mas isso é rede de segurança, não valor de projeto.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── cor ─────────────────────────────────────────────────────────────
     --ink        texto e traço principal
     --bg         fundo da seção
     --muted      texto secundário
     --rule       régua de 1px principal (bordas de seção, campos)
     --rule-soft  régua de 1px secundária (colunas da grade)
     --wall       fundo do muro da abertura e da área de overscroll
     --on-media   texto por cima de vídeo ou foto
     --media-bg   fundo de moldura enquanto a mídia não chegou
     --danger     erro de formulário
     --bar-*      a barra do topo, que não acompanha o tom das seções  */
  --ink:#0A0A0A;
  --bg:#FFFFFF;
  --muted:#6B6B6B;
  --rule:rgba(10,10,10,.20);
  --rule-soft:rgba(10,10,10,.10);
  --wall:#050505;
  --on-media:#FFFFFF;
  --media-bg:#141414;
  --danger:#C2410C;
  --bar-bg:#FFFFFF;
  --bar-ink:#0A0A0A;
  --bar-rule:rgba(10,10,10,.20);

  /* ── tipografia ──────────────────────────────────────────────────── */
  --font-display:"Inter","Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter","Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-h1:clamp(2.4rem,6.15vw,7.6rem);
  --fs-h2:clamp(1.4rem,2.4vw,2.6rem);
  --fs-lead:clamp(1.3rem,2.85vw,3.1rem);
  --fs-shout:clamp(1.9rem,5.4vw,5.4rem);
  --fs-body:clamp(.92rem,1.05vw,1.12rem);
  --fs-small:clamp(.85rem,1vw,1.02rem);
  /* --fs-ui: rótulo de UI — título de card/serviço, campo de formulário.
     --fs-stat: número grande de estatística. Declarados aqui (08/09/2026,
     auditoria de diagramação) porque variants/oslo-hierarquia/layout.css
     passou a referenciá-los em vez de clamp() escrito à mão. */
  --fs-ui:clamp(.95rem,1.15vw,1.3rem);
  --fs-stat:clamp(3.2rem,8.4vw,9.4rem);
  --fs-micro:11px;
  --fw-display:800;
  --fw-lead:500;
  /* --fw-label: peso de rótulo/legenda/tag/meta — antes essas peças
     usavam a família mono (ui-monospace) como diferenciador visual.
     Declarado aqui (09/09/2026, unificação tipográfica) porque
     variants/oslo-hierarquia/layout.css passou a usar --font-body em
     tudo, e o peso 600 (já carregado via Google Fonts) assume o papel
     que a troca de família cumpria antes. */
  --fw-label:600;
  --track-display:-.035em;
  --track-h2:-.02em;
  --track-micro:.12em;
  --lh-display:.94;
  --lh-body:1.5;
  --caps-display:uppercase;
  --caps-micro:uppercase;

  /* ── espaço e grade ──────────────────────────────────────────────── */
  --gutter-l:7.76%;
  --gutter-r:7.5%;
  --cols:12;
  --col-gap:2.1vw;
  --sec-pad-y:7svh;
  --bar:4.95svh;

  /* ── grão ────────────────────────────────────────────────────────── */
  --grain-opacity:.09;
  --grain-blend:screen;
  --grain-opacity-site:.16;
  --grain-blend-site:multiply;

  /* ── movimento ───────────────────────────────────────────────────────
     --step-ms é lido pelo JS (duração de cada passo do snap da capa),
     por isso vai sem unidade.                                        */
  --ease-io:cubic-bezier(.76,0,.18,1);
  --ease-rise:cubic-bezier(.5,0,.14,1);
  --ease-out-soft:cubic-bezier(.16,1,.3,1);
  --dur-reveal:900ms;
  --dur-tone:420ms;
  --stagger:90ms;
  --step-ms:850;
  --gesture-gap-ms:160;

  /* ── estado da abertura (o JS escreve, o CSS lê) ──────────────────── */
  --mx:50%;
  --my:42%;
}

/* color-scheme fixo: a barra de rolagem do navegador não pode piscar
   junto com a troca de seção, nem seguir o tema do sistema. */
html{ background:var(--wall); color-scheme:light; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-weight:400;
  -webkit-font-smoothing:antialiased;
}
*,*::before,*::after{ box-sizing:border-box; }
button,input,textarea,select{ font-family:inherit; }
::selection{ background:var(--ink); color:var(--bg); }
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--muted); }
:focus-visible{ outline:2px solid currentColor; outline-offset:4px; }
[hidden]{ display:none !important; }