/* ============================================================
   GLOBAL.CSS — Design tokens, reset, tipografia, utilitários
   ============================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root {
  /* Paleta */
  --verde-floresta:  #1B4332;
  --verde-medio:     #2D6A4F;
  --verde-vivo:      #52B788;
  --verde-claro:     #95D5B2;
  --verde-nevoa:     #D8F3DC;
  --branco-floresta: #F8FAF9;
  --branco-puro:     #FFFFFF;
  --quase-preto:     #1A1A1A;
  --cinza-suave:     #5A6B62;

  /* Tipografia */
  --font-display: 'Syncopate', 'Arial Black', sans-serif;
  --font-serif:   'DM Serif Display', Georgia, serif;
  --font-sans:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --container-max: 1640px;
  --container-pad: clamp(20px, 4vw, 56px);

  /* Raios */
  --radius-sm:   10px;
  --radius:      18px;
  --radius-lg:   28px;
  --radius-pill: 999px;

  /* Sombras */
  --shadow-sm: 0 2px 8px rgba(27,67,50,0.06);
  --shadow:    0 12px 36px rgba(27,67,50,0.12);
  --shadow-lg: 0 24px 70px rgba(27,67,50,0.22);

  /* Transições */
  --t-fast: 180ms cubic-bezier(.4,0,.2,1);
  --t-med:  320ms cubic-bezier(.4,0,.2,1);
  --t-slow: 600ms cubic-bezier(.4,0,.2,1);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--quase-preto);
  background: var(--branco-puro);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--verde-vivo); outline-offset: 3px; border-radius: 4px; }

/* ---------- TIPOGRAFIA ---------- */
h1.h1-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6.2vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
h2, h3, h4, h5, h6, .h2-section, .h3-title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.h2-section {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--verde-floresta);
}
.h3-title {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.25;
  letter-spacing: 0.02em;
}
.label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--verde-vivo);
  display: inline-block;
}

/* ---------- LAYOUT / UTILITÁRIOS ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left:  var(--container-pad);
  padding-right: var(--container-pad);
}
@media (min-width: 1280px) {
  .container { width: 88vw; padding-left: 0; padding-right: 0; }
}
.section { padding: clamp(60px, 9vw, 130px) 0; }
.section-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .label { margin-bottom: 18px; }
.section-head h2 { margin-top: 0; }
.section-head p { margin-top: 20px; color: var(--cinza-suave); font-size: 1.0625rem; }

/* Skip link (acessibilidade) */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  background: var(--verde-floresta);
  color: var(--branco-puro);
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 600;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 16px; }

/* 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;
  }
}