/* ============================================================
   FBGE DESIGN SYSTEM — tokens.css
   Direção: Nike (contraste, tipografia condensada, ação direta)
            + Apple (espaçamento com função, hierarquia rígida)
   ============================================================ */


@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---------- COR ---------- */
  --ink:        #0B0B0C;   /* preto primário — fundo e texto */
  --ink-soft:   #1A1A1C;   /* elevação sobre ink */
  --ink-line:   rgba(245,243,239,.14);
  --ink-dim:    rgba(245,243,239,.62);

  --paper:      #F5F3EF;   /* branco quente — fundo editorial */
  --paper-2:    #EAE7E0;   /* elevação sobre paper */
  --paper-line: rgba(11,11,12,.14);
  --paper-dim:  rgba(11,11,12,.64);

  --red:        #C8281E;   /* vermelho FBGE — único acento de ação */
  --red-deep:   #8F1710;
  --red-glow:   rgba(200,40,30,.18);

  --steel:      #63666A;   /* texto secundário neutro */

  /* ---------- TIPOGRAFIA ---------- */
  --f-display:  'Big Shoulders Display', sans-serif;   /* títulos — condensado, atlético */
  --f-body:     'Inter', sans-serif;                    /* corpo — neutro, legível */
  --f-mono:     'Space Mono', monospace;                 /* labels, dados, eyebrows */

  --fs-100: .6875rem;   /* 11px — labels mono */
  --fs-200: .875rem;    /* 14px — legendas */
  --fs-300: 1rem;       /* 16px — corpo */
  --fs-400: 1.25rem;    /* 20px — lead */
  --fs-500: 1.75rem;    /* 28px */
  --fs-600: 2.5rem;     /* 40px */
  --fs-700: 3.5rem;     /* 56px */
  --fs-800: 5rem;       /* 80px */
  --fs-900: 7.5rem;     /* 120px — hero desktop */

  /* ---------- ESPAÇAMENTO (módulo 8px) ---------- */
  --sp-1: .5rem;   --sp-2: 1rem;   --sp-3: 1.5rem;  --sp-4: 2rem;
  --sp-5: 3rem;    --sp-6: 4rem;   --sp-7: 6rem;    --sp-8: 8rem;
  --sp-9: 12rem;

  --radius: 2px;      /* quase reto — linguagem editorial, não app */
  --t: .25s cubic-bezier(.4,0,.2,1);
  --t-slow: .6s cubic-bezier(.16,1,.3,1);
  --max: 1440px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-300);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

:focus-visible {
   ::selection { background: var(--red); color: var(--paper); }
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

::selection { background: var(--red); color: var(--paper); }

.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--sp-5); }
@media (max-width: 720px) { .container { padding: 0 var(--sp-3); } }

/* ---------- TIPOGRAFIA DE APOIO ---------- */
.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--fs-100);
  letter-spacing: .18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--red);
}
.eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--red); }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: .94;
}
.on-paper .eyebrow, .on-paper h1, .on-paper h2, .on-paper h3 { color: var(--ink); }