/* ============================================================================
   TOKENS DE IDENTIDADE — INTOCÁVEIS (regra suprema)
   Paleta, tipografia (Poppins display / Onest corpo), raios, escala.
   ========================================================================== */
@import url("../assets/fonts/fonts.css");

:root {
  /* Paleta aprovada */
  --sage:   #B4C6A4;
  --slate:  #5E7485;
  --coral:  #D4694A;
  --areia:  #F3EEE5;
  --oceano: #16232C;

  /* Derivados de superfície (não alteram a identidade; só sombras/veladuras) */
  --oceano-90: rgba(22, 35, 44, 0.90);
  --oceano-70: rgba(22, 35, 44, 0.70);
  --oceano-40: rgba(22, 35, 44, 0.40);
  --areia-70:  rgba(243, 238, 229, 0.70);
  --sage-20:   rgba(180, 198, 164, 0.20);

  /* Tipografia real do projeto: Avenir (display) · Onest (corpo) · Minion Pro (serif) */
  --font-display: "Avenir Web", "Avenir Next", "Avenir", system-ui, sans-serif;
  --font-body:    "Onest Web", "Onest", "Segoe UI", system-ui, sans-serif;
  --font-serif:   "Minion Web", "Minion Pro", Georgia, serif;

  /* Escala tipográfica fluida */
  --step--1: clamp(0.80rem, 0.76rem + 0.20vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.94rem + 0.30vw, 1.18rem);
  --step-1:  clamp(1.25rem, 1.14rem + 0.55vw, 1.62rem);
  --step-2:  clamp(1.60rem, 1.40rem + 1.00vw, 2.40rem);
  --step-3:  clamp(2.10rem, 1.70rem + 2.00vw, 3.60rem);
  --step-4:  clamp(2.80rem, 2.00rem + 4.00vw, 5.60rem);
  --verbo:   clamp(4.5rem, 2.0rem + 14vw, 18rem);   /* verbos-cortina gigantes */

  /* Raios (cantos arredondados — parte da identidade) */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;

  /* Ritmo / medidas */
  --measure: 62ch;
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 3rem);
  --section-pad: clamp(4rem, 2rem + 10vw, 11rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--oceano);
  background: var(--areia);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.02; margin: 0; letter-spacing: -0.02em; }
p { margin: 0 0 1em; }
::selection { background: var(--coral); color: var(--areia); }