/* =============================================================================
   PRIMERISE — BASE
     1. Design tokens (cor, tipografia, espaço, raio, sombra)
     2. Reset
     3. Tipografia base
     4. Utilitários de layout
     5. Animação de entrada ao scroll
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS — única fonte de verdade
   -------------------------------------------------------------------------- */

:root {
  /* Marca */
  --c-lime:        #B3E718;  /* accent — botões e detalhes */
  --c-lime-600:    #A2D411;  /* hover  */
  --c-lime-200:    #E4F7A8;
  --c-lime-050:    #F4FBE0;

  --c-green-900:   #16302A;
  --c-green-800:   #234439;
  --c-green-700:   #2D5445;  /* verde da paleta */
  --c-green-600:   #3B6A58;
  --c-green-400:   #6B8176;  /* verde acinzentado da paleta */
  --c-sage:        #AABDA8;
  --c-sage-200:    #D6E0D3;

  --c-ink:         #2A2A2A;  /* quase-preto da paleta */
  --c-ink-700:     #4A554F;  /* corpo de texto */
  --c-ink-500:     #6E7873;  /* texto secundário */
  --c-ink-400:     #97A19C;  /* cinzento da paleta */

  --c-cream:       #E6EBDF;
  --c-paper:       #F5F7F1;
  --c-gray-100:    #E8E8E8;
  --c-white:       #FFFFFF;

  /* Papéis semânticos */
  --bg:            var(--c-white);
  --bg-soft:       var(--c-paper);
  --surface:       var(--c-white);
  --text:          var(--c-green-900);
  --text-body:     var(--c-ink-700);
  --text-muted:    var(--c-ink-500);
  --text-on-dark:  #EAF1E7;
  --accent:        var(--c-lime);
  --accent-ink:    #1B2A16;   /* texto sobre lima — contraste AAA */
  --border:        #E4E7DF;
  --border-strong: #D2D8CC;
  --border-dark:   rgba(255, 255, 255, 0.14);

  /* Tipografia */
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;

  --fs-display: clamp(2.5rem, 1.4rem + 3.6vw, 4.15rem);
  --fs-h2:      clamp(2rem, 1.3rem + 2.4vw, 3.1rem);
  --fs-h3:      clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem);
  --fs-lead:    clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;

  --lh-tight:   1.06;
  --lh-snug:    1.25;
  --lh-body:    1.65;
  --ls-tight:   -0.03em;
  --ls-wide:    0.12em;

  /* Layout */
  --container:  1220px;
  --gutter:     clamp(1.25rem, 0.6rem + 2.4vw, 2.5rem);
  --header-h:   76px;
  --section-y:  clamp(4.5rem, 3rem + 6vw, 8.5rem);

  /* Raio e sombra */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(22, 48, 42, 0.05), 0 2px 8px rgba(22, 48, 42, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(22, 48, 42, 0.14), 0 2px 6px rgba(22, 48, 42, 0.05);
  --shadow-lg: 0 28px 60px -22px rgba(22, 48, 42, 0.28), 0 6px 18px rgba(22, 48, 42, 0.06);

  /* Movimento */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  260ms;
}

/* -----------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

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

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

::selection { background: var(--c-lime); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--c-green-700);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :focus-visible { outline-color: var(--c-lime); }

/* -----------------------------------------------------------------------------
   3. TIPOGRAFIA BASE
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

h1 { font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: 500; }
h2 { font-size: var(--fs-h2);     line-height: 1.12;            font-weight: 500; }
h3 { font-size: var(--fs-h3); }

p { text-wrap: pretty; }

/* blocos sobre fundo escuro */
.on-dark { color: var(--text-on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }

/* -----------------------------------------------------------------------------
   4. UTILITÁRIOS
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--c-green-900);
  color: #fff;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* -----------------------------------------------------------------------------
   5. REVELAÇÃO AO SCROLL
   -------------------------------------------------------------------------- */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 700ms var(--ease) var(--reveal-delay, 0ms),
    transform 700ms var(--ease) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
}