/* ============================================================
   base.css — reset moderno + tipografia global
   ============================================================ */

/* --- Reset enxuto (apenas o essencial) --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1, h2, h3, h4, h5, h6,
p,
ol, ul,
figure,
blockquote,
dl, dd {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  background: var(--fundo);
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: 16px;
  line-height: var(--lh-body);
  color: var(--texto);
  background: var(--fundo);
  transition: background-color var(--d-base) var(--ease),
              color var(--d-base) var(--ease);
}

/* --- Headings & display --- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--t-display);
  line-height: var(--lh-display);
  color: var(--texto);
}

h1 { font-size: clamp(46px, 13.6vw, 64px); }
h2 { font-size: clamp(26px, 7.2vw, 32px); line-height: var(--lh-tight); }
h3 { font-size: clamp(20px, 4.4vw, 24px); }

.display { font-size: clamp(40px, 12vw, 56px); }

/* --- Manchete (tela cheia editorial) --- */
.manchete {
  font-size: clamp(46px, 13.6vw, 64px);
  line-height: 0.98;
  font-weight: var(--w-semibold);
  letter-spacing: var(--t-display);
  color: var(--texto);
  margin: 0;
}

.manchete.fogo {
  color: var(--laranja-tinta);
}

@media (prefers-color-scheme: dark) {
  .manchete.fogo {
    color: var(--laranja);
  }
}

/* --- Numeral mono (destaque laranja editorial) --- */
.num {
  font-family: var(--font-mono);
  font-weight: var(--w-medium);
  font-variant-numeric: tabular-nums;
  color: var(--laranja-tinta);
  letter-spacing: var(--t-mono);
}

@media (prefers-color-scheme: dark) {
  .num { color: var(--laranja); }
}

/* --- Listas --- */
ol, ul {
  padding: 0;
}

/* --- Texto utilitário --- */
.fraco { color: var(--fraco); }
.apagado { color: var(--apagado); }

/* --- Links --- */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--d-fast) var(--ease),
              opacity var(--d-fast) var(--ease);
}

a:hover {
  color: var(--laranja-tinta);
}

@media (prefers-color-scheme: dark) {
  a:hover { color: var(--laranja); }
}

/* --- Mídia --- */
img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

img,
video {
  loading: lazy;
}

/* visually-hidden — para headings que precisam existir pra a11y mas não devem aparecer */
.vh{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
  white-space:nowrap;
}

/* --- Folha (container editorial) --- */
.folha {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  width: 100%;
}

@media (min-width: 768px) {
  :root { --pad-x: 64px; }
}

/* --- Seleção --- */
::selection {
  background: var(--laranja);
  color: #14100d;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}