/* =============================================================
   Static Sites DS — base
   Reset enxuto + aplicação da hierarquia tipográfica + grid de
   colunas (workspace) com a régua de breakpoints do sistema.
   Depende de tokens.css (carregar antes).
   ============================================================= */

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--ff);
  font-weight: var(--fw-body);
  font-size: var(--fs-p-m);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

img, picture, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
ul, ol { padding-left: var(--sp-24); }

/* ---------- Tipografia: títulos (peso 700, lh 120%) ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  font-weight: var(--fw-title);
  line-height: var(--lh-title);
  text-wrap: balance;   /* títulos: linhas equilibradas, sempre */
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

/* ---------- Tipografia: parágrafos (peso 400, lh 150%) ---------- */
p { font-weight: var(--fw-body); line-height: var(--lh-body); text-wrap: pretty; }
.p-xl { font-size: var(--fs-p-xl); }
.p-l  { font-size: var(--fs-p-l); }
.p-m  { font-size: var(--fs-p-m); }
.p-s  { font-size: var(--fs-p-s); }

/* ---------- Workspace / grid de colunas ----------
   Largura útil fixa, centralizada (margem lateral = sobra ÷ 2).
   Conteúdo vive dentro das colunas; gutter é só respiro.
   Usar repeat(N, 1fr) — o browser cuida do arredondamento. */
.workspace {
  max-width: var(--workspace);
  margin-inline: auto;
  padding-inline: var(--sp-24); /* respiro mínimo antes do cap em telas médias */
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--gutter);
}

/* Backgrounds full-bleed: a faixa sangra até a borda, mas o
   conteúdo dentro dela volta a alinhar à grade via .workspace. */
.full-bleed { width: 100%; }

/* =============================================================
   BREAKPOINTS — desktop-first (cascata por max-width)
   Régua (viewport width):
     widescreen      ≥ 2400  → reusa Desktop (workspace não cresce)
     desktop         1367–2399  (default abaixo)
     notebook        1201–1366
     tablet paisagem 1025–1200
     tablet retrato  881–1024
     celular paisagem 768–880
     celular retrato ≤ 767
   ============================================================= */

/* Notebook */
@media (max-width: 1366px) {
  :root { --workspace: 1100px; --cols: 12; --gutter: 32px; }
}

/* Tablet paisagem */
@media (max-width: 1200px) {
  :root { --workspace: 924px; --cols: 6; --gutter: 32px; }
}

/* Tablet retrato */
@media (max-width: 1024px) {
  :root { --workspace: 780px; --cols: 6; --gutter: 32px; }
}

/* Celular paisagem — também troca a tipografia para a escala mobile
   (mobile = Celular paisagem + Celular retrato; troca em ≤ 880px) */
@media (max-width: 880px) {
  :root {
    --workspace: 728px; --cols: 6; --gutter: 16px;

    --fs-h1: 32px;
    --fs-h2: 30px;
    --fs-h3: 28px;
    --fs-h4: 26px;
    --fs-h5: 24px;
    --fs-h6: 22px;

    --fs-p-xl: 20px;
    --fs-p-l:  18px;
    --fs-p-m:  16px;
    --fs-p-s:  14px;
  }
}

/* Celular retrato */
@media (max-width: 767px) {
  :root { --workspace: 360px; --cols: 4; --gutter: 8px; }
  .workspace { padding-inline: var(--sp-16); }
}