/* ============================================================
   VILELA CT — base.css
   Reset, fontes autohospedadas e defaults tipográficos.
   Nenhum valor cru: tudo referencia tokens.css.
   ============================================================ */
@layer base {

  @font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo.woff2") format("woff2");
    font-weight: 100 900; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: "Inter Tight";
    src: url("../fonts/intertight.woff2") format("woff2");
    font-weight: 100 900; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains.woff2") format("woff2");
    font-weight: 100 800; font-style: normal; font-display: swap;
  }

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

  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
    position: relative;
  }
  img, svg, video { display: block; max-inline-size: 100%; block-size: auto; }
  input, button, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }

  h1, h2, h3 {
    font-family: var(--font-display);
    line-height: var(--lh-title);
    text-wrap: balance;
  }
  h1 {
    font-size: var(--fs-display); font-weight: 800;
    line-height: var(--lh-display);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
  }
  h2 {
    font-size: var(--fs-h2); font-weight: 800;
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
  }
  h3 { font-size: var(--fs-h3); font-weight: 700; }

  p { max-inline-size: var(--measure); text-wrap: pretty; }

  a { color: inherit; }
  :focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }
  [id] { scroll-margin-block-start: 5rem; }

  .label {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-subtle);
  }
  .dado {
    font-family: var(--font-mono);
    font-size: var(--fs-data);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

  .visually-hidden {
    position: absolute; inline-size: 1px; block-size: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .pular {
    position: absolute; inset-block-start: var(--sp-2); inset-inline-start: var(--sp-2);
    z-index: var(--z-modal); padding: var(--sp-2) var(--sp-4);
    background: var(--brand-500); color: var(--white);
    border-radius: var(--radius-sm); font-weight: 600; text-decoration: none;
    transform: translateY(-200%);
  }
  .pular:focus { transform: none; }
}