/* farpa-ds-core · core/base.css · v1.0 · 2026-05-02
   origem: AI/base.css @ Wave 19 Onda D3.6 · 2026-05-02 · não-editar-sem-PR
   ==========================================================================
   RESET + tipografia neutra + grid editorial + utilitários estruturais.
   Depende de: ds/core/tokens.css (carregar antes) + ds/tokens-produto.css.
   Usa apenas var(--token) — zero hardcode de cor.

   NÃO contém: hero, status-pill, badge, callout, table-editorial, prose,
   card-grid, section-label (esses são padrões editoriais do farpa principal,
   ficam em ds/components/ próprios do produto se quiser adotá-los).
*/

/* ============================================================ */
/* 1. RESET                                                       */
/* ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background-color: var(--bg);
  color: var(--text-1);
}

body {
  font-family: var(--font-editorial, var(--font-ui, system-ui), serif);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  background-color: var(--bg);
  color: var(--text-1);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Elemento [lang="en"] herda lh-body-en + measure inglês */
body[lang="en"], :lang(en) {
  --measure: var(--measure-en);
  line-height: var(--lh-body-en);
}

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

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

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

a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

ul, ol {
  list-style: none;
}

/* ============================================================ */
/* 2. TIPOGRAFIA NEUTRA — hierarquia                              */
/* (font-family vem de tokens-produto.css via fallback chain)     */
/* ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-editorial, var(--font-ui, system-ui), serif);
  line-height: var(--lh-heading);
  color: var(--text-1);
  font-weight: 600;
}

h1 {
  font-size: var(--fs-3xl);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--fs-2xl);
  letter-spacing: -0.015em;
}

h3 {
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
}

h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-base); font-weight: 700; }

/* Texto ui · monospace · editorial · helpers */
.body-text {
  font-family: var(--font-editorial, var(--font-ui, system-ui), serif);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text-2);
  max-width: var(--measure);
}

.ui-text, label, th, td, .meta {
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: var(--fs-sm);
  color: var(--text-2);
}

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.9em;
}

.label-tech {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.muted { color: var(--text-3); }
.hint  { color: var(--text-4); }

strong, b { font-weight: 700; }
em, i     { font-style: italic; }

/* ============================================================ */
/* 3. GRID EDITORIAL — coluna + marginalia                        */
/* ============================================================ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--padding-inline);
}

.grid-editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}

@media (min-width: 900px) {
  .grid-editorial {
    grid-template-columns: 1fr var(--col-marginalia);
    gap: var(--gap-editorial);
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .grid-editorial {
    grid-template-columns: minmax(var(--col-editorial), 1fr) minmax(180px, var(--col-marginalia));
  }
}

.grid-editorial__content { min-width: 0; }

.grid-editorial__aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

@media (max-width: 899px) {
  .grid-editorial__aside { display: contents; }
}

/* ============================================================ */
/* 4. SEÇÕES — padding vertical canônico                          */
/* ============================================================ */
.section     { padding-block: var(--sp-16); }   /* 64px  */
.section--sm { padding-block: var(--sp-10); }   /* 40px  */
.section--lg { padding-block: var(--sp-24); }   /* 96px  */

.section--alt {
  background-color: var(--bg-2);
}

/* ============================================================ */
/* 5. STACK + DIVIDER + UTILS estruturais                         */
/* ============================================================ */
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--sp-4); }
.stack--lg > * + * { margin-top: var(--sp-8); }

.divider {
  border: none;
  border-top: 1px solid var(--border-color);
  margin-block: var(--sp-12);
}

hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: var(--sp-12) 0;
}

/* Ocultar mobile / desktop · helpers de visibilidade */
.hide-mobile  { display: none !important; }
.hide-desktop { display: block; }

@media (min-width: 769px) {
  .hide-mobile  { display: revert !important; }
  .hide-desktop { display: none !important; }
}

/* ============================================================ */
/* 6. RESPONSIVIDADE GLOBAL — tipografia fluida                   */
/* ============================================================ */
@media (max-width: 480px) {
  h1 { font-size: var(--fs-2xl); }
  h2 { font-size: var(--fs-xl); }
  h3 { font-size: var(--fs-lg); }

  .section     { padding-block: var(--sp-12); }
  .section--lg { padding-block: var(--sp-16); }
}