/* FitForRiders — direção Cowboy — tokens partilhados (fonte: design-system.md) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
  --porcelain: #ffffff;
  --canvas: #f5f5f4;
  --mist: #f3f4f6;
  --paper: #ebeae7;
  --charcoal: #1d1d1d;
  --smoke: #737373;
  --ash: #a3a3a3;
  --bone: #cacaca;
  --hairline: #e5e7eb;
  --white-60: rgba(248, 248, 245, 0.6);
  --ink-05: rgba(29, 29, 29, 0.05);
  --white-12: rgba(255, 255, 255, 0.12);

  --font: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --container: 1440px;
  --gutter: 60px;
  --gap: 20px;

  --r-sm: 8px;
  --r-lg: 12px;
  --r-pill: 9999px;
}

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

.container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* Tipografia */
.display { font-size: 100px; line-height: 0.9; letter-spacing: -0.025em; font-weight: 400; }
.h2 { font-size: 72px; line-height: 0.95; letter-spacing: -0.02em; font-weight: 400; }
.h3 { font-size: 36px; line-height: 1.05; letter-spacing: -0.015em; font-weight: 400; }
.sub { font-size: 20px; line-height: 1.45; font-weight: 400; color: var(--smoke); }
.on-dark .sub, .sub.on-dark { color: var(--white-60); }
.micro { font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase; }

/* Botões pill */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  font-size: 15px; font-weight: 500; line-height: 1;
  padding: 15px 28px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s;
}
.btn:hover { transform: scale(1.03); }
.btn-dark { background: var(--charcoal); color: var(--porcelain); }
.btn-light { background: var(--porcelain); color: var(--charcoal); }
.btn-ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px var(--hairline); }

/* Chips de spec */
.chip {
  display: inline-flex; align-items: center;
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 400; line-height: 1;
  padding: 9px 14px;
  background: var(--ink-05); color: var(--charcoal);
}
.on-dark .chip { background: var(--white-12); color: var(--porcelain); }

/* Caption pill sobre imagem */
.caption-pill {
  position: absolute;
  border-radius: var(--r-pill);
  background: rgba(29, 29, 29, 0.75); color: #fff;
  font-size: 12px; line-height: 1; padding: 8px 12px;
}

/* Cartões */
.card { background: var(--porcelain); border-radius: var(--r-lg); overflow: hidden; }

/* Fotos de produto (fundo branco) sobre superfícies claras */
.product-photo { mix-blend-mode: multiply; }

/* Reveals on-scroll (adicionar .in via IntersectionObserver) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
.reveal.in { opacity: 1; transform: none; }