/* ==========================================================================
   02-BASE.CSS — Reset, tipografia Nunito, utilitários
   --------------------------------------------------------------------------
   A fonte Nunito é a estrela aqui. Foi escolhida por:
   - Curvatura amigável que dialoga com o "smile" do logo EstoqueNOW
   - Excelente legibilidade em corpo de texto (peso 400)
   - 7 pesos disponíveis (300 a 900) — permite hierarquia rica
   - Render confortável em qualquer densidade de tela

   USO POR PESO:
   - 300 (light)     → meta info delicada, captions
   - 400 (regular)   → corpo de texto padrão
   - 600 (semibold)  → links, navegação, labels de UI
   - 700 (bold)      → títulos h3-h6, botões
   - 800 (extrabold) → títulos h1-h2, headlines
   - 900 (black)     → eventual destaque máximo
   ========================================================================== */

/* === SECTION: RESET === */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Nunito tem letras arredondadas que ficam ainda melhores com kerning ativo */
  font-feature-settings: 'kern' 1, 'liga' 1;
  font-kerning: normal;
}

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

::selection {
  background: var(--brand);
  color: #fff;
}

/* === SECTION: TIPOGRAFIA NUNITO — HEADINGS === */
/*
 * Nunito + letter-spacing levemente apertado em headlines = tipografia premium.
 * line-height comprimido faz o título "respirar para fora" em vez de para dentro.
 */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-primary);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin: 0;
}

h1, .h1 {
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  font-weight: var(--fw-black);       /* Nunito 900 — só nos títulos hero */
  line-height: 1;
}

h2, .h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: var(--fw-extrabold);
}

h3, .h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: var(--fw-extrabold);
  line-height: 1.1;
}

h4, .h4 {
  font-size: 1.2rem;
  font-weight: var(--fw-bold);
  line-height: 1.25;
}

h5, .h5 {
  font-size: 1.05rem;
  font-weight: var(--fw-bold);
}

h6, .h6 {
  font-size: 0.95rem;
  font-weight: var(--fw-bold);
}

/* === SECTION: TEXTOS === */
p {
  margin: 0 0 1rem;
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
}

p.lead {
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  color: var(--ink-soft);
  line-height: var(--lh-relaxed);
}

strong, b {
  font-weight: var(--fw-bold);
  color: var(--ink);
}

small,
.small {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
}

a {
  color: var(--brand);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  transition: color var(--t-fast);
}

a:hover {
  color: var(--brand-deep);
}

/* === SECTION: TEXTOS UTILITÁRIOS === */
.text-muted-soft { color: var(--ink-mute) !important; }
.text-soft       { color: var(--ink-soft) !important; }
.text-brand      { color: var(--brand) !important; }
.text-accent     { color: var(--accent) !important; }

.fw-300 { font-weight: var(--fw-light) !important; }
.fw-400 { font-weight: var(--fw-regular) !important; }
.fw-600 { font-weight: var(--fw-semibold) !important; }
.fw-700 { font-weight: var(--fw-bold) !important; }
.fw-800 { font-weight: var(--fw-extrabold) !important; }
.fw-900 { font-weight: var(--fw-black) !important; }

/* === SECTION: SERIF DECORATIVO ===
 * Use a classe .serif APENAS em palavras-chave de destaque dentro de h1/h2.
 * É o contraste que torna a tipografia Nunito ainda mais marcante.
 * Nunca use serif em corpo de texto.
 */
.serif {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--brand);
  letter-spacing: -0.02em;
}

/* === SECTION: MONO ===
 * Use em meta info, timestamps, contadores, code.
 */
.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* === SECTION: CONTAINER === */
.container,
.container-fluid {
  position: relative;
  z-index: 2;
}

/* === SECTION: ATMOSFERA DE FUNDO ===
 * Glow sutil global que reforça a presença da marca sem distrair.
 * Pode ser desligado removendo body::before.
 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 500px at 90% -10%, rgba(123, 0, 184, 0.05), transparent 60%),
    radial-gradient(700px 600px at -10% 30%, rgba(155, 43, 216, 0.04), transparent 60%);
}

/* === SECTION: ACESSIBILIDADE === */
@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;
  }
}

/* Foco visível para teclado (não removemos outline) */
:focus-visible {
  outline: 3px solid rgba(123, 0, 184, 0.4);
  outline-offset: 2px;
  border-radius: 4px;
}