/* ============================================================
   Follow Turbo — Design Tokens & primitivos compartilhados
   Usado pela página /sobre/ e pelo footer (componentes).
   ============================================================ */
:root {
  /* Cores */
  --ft-orange: #ff6d00;
  --ft-orange-600: #e85f00;
  --ft-orange-50: #fff1e6;
  --ft-cream: #fff8f3;
  --ft-ink: #23242a;
  --ft-muted: #515151;
  --ft-line: #f1e9e2;
  --ft-white: #ffffff;
  --ft-success: #16a34a;
  --ft-wa: #25d366;
  --ft-wa-600: #1ebe5a;

  /* Tipografia */
  --ft-font: "Varela Round", Arial, Helvetica, sans-serif;
  --fs-h1: clamp(1.85rem, 4vw, 2.45rem);
  --fs-h2: clamp(1.4rem, 2.6vw, 1.85rem);
  --fs-h3: 1.12rem;
  --lh: 1.7;

  /* Espaçamento (escala 4pt) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* Raio / sombra */
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 18px;
  --r-pill: 999px;
  --sh-1: 0 2px 10px rgba(0, 0, 0, 0.04);
  --sh-2: 0 8px 22px rgba(255, 109, 0, 0.12);

  /* Layout */
  --container: 1140px;
}

/* Botões (compartilhados) */
.ft-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--ft-font);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.ft-btn:hover {
  transform: translateY(-1px);
}

.ft-btn:focus-visible {
  outline: 3px solid var(--ft-orange-50);
  outline-offset: 2px;
}

.ft-btn--primary {
  background: var(--ft-orange);
  color: #fff;
}

.ft-btn--primary:hover {
  background: var(--ft-orange-600);
  color: #fff;
}

.ft-btn--outline {
  background: transparent;
  color: var(--ft-orange);
  border-color: var(--ft-orange);
}

.ft-btn--outline:hover {
  background: var(--ft-orange-50);
  color: var(--ft-orange-600);
}

.ft-btn--wa {
  background: var(--ft-wa);
  color: #fff;
}

.ft-btn--wa:hover {
  background: var(--ft-wa-600);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {

  .ft-btn,
  .ft-btn:hover {
    transition: none;
    transform: none;
  }
}