/* ============================================================
   bossa.consulting v3 — base
   Reset, html/body, maré de tema, grid container, tipos por papel.
   ============================================================ */

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

html {
  /* a maré: quem pinta o fundo é o html, e ele transita suave */
  background-color: var(--preto);
  color: var(--creme);
  transition:
    background-color var(--dur-slow) var(--ease-in-out-quart),
    color var(--dur-slow) var(--ease-in-out-quart);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* estado inicial = hero preto (evita flash claro antes do JS) */
html[data-theme="preto"] { background-color: var(--preto); color: var(--creme); }
html[data-theme="creme"] { background-color: var(--creme); color: var(--preto); }
html[data-theme="branco"] { background-color: var(--branco); color: var(--preto); }

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* as seções não pintam fundo: quem pinta é o html */
section[data-theme] { background-color: transparent; color: inherit; }

img { max-width: 100%; height: auto; display: block; }

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

::selection { background: var(--lavender); color: var(--preto); }

:focus-visible { outline: 2px solid var(--lavender); outline-offset: 3px; }

/* ---------- Container de grid (um token só) ---------- */
.container {
  width: 100%;
  padding-inline: var(--grid-padding);
}

.section {
  /* 108px de respiro em cima e embaixo somavam 216px de vazio entre blocos.
     Vazio emoldura; vazio depois do último elemento lê como página inacabada. */
  padding-block: clamp(4rem, 9vh, 6.5rem);
}

/* ============================================================
   TIPOS POR PAPEL
   Display: Inria Sans Light UPPERCASE tracked.
   Corpo: Inria Sans. Acento retórico: Inria Serif Italic.
   ============================================================ */

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mid);
  display: inline-block;
}

.display {
  font-family: var(--font-sans);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 0.98;
  font-size: clamp(2.75rem, 8vw, 6.25rem);
}

.headline {
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.005em;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
}

.headline-sm {
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.12;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: 0;
}

.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

.lead {
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.45;
  font-weight: 300;
}

.body {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--fg);
}

.mute { color: var(--mid); }

.stat {
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.01em;
  font-size: clamp(3rem, 7vw, 5.5rem);
}

.measure { max-width: 34ch; }
.measure-wide { max-width: 58ch; }

/* Sem justificar. Sem hifenizar (regra tipográfica bossa). */
p { hyphens: none; }
h1, h2, h3, h4 { text-wrap: balance; }