/* ============================================================
   ClearStride Tools — Components
   ============================================================ */

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  padding: 13px 26px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-base),
              box-shadow var(--transition-base);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--color-amber);
  color: var(--color-white);
  box-shadow: var(--shadow-amber);
}
.btn--primary:hover {
  background: var(--color-amber-light);
  box-shadow: 0 6px 24px rgba(217, 119, 6, 0.4);
}

.btn--ghost-dark {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.82);
}
.btn--ghost-dark:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn--ghost-light {
  background: transparent;
  border-color: var(--border-default);
  color: var(--color-slate);
}
.btn--ghost-light:hover {
  background: var(--color-off-white);
  border-color: var(--color-light-slate);
  color: var(--color-dark-slate);
}

.btn--blue {
  background: var(--color-docs-blue);
  color: var(--color-white);
  box-shadow: var(--shadow-blue);
}
.btn--blue:hover { background: #1D4ED8; }

.btn--red {
  background: var(--color-reqs-red);
  color: var(--color-white);
  box-shadow: var(--shadow-red);
}
.btn--red:hover { background: #B91C1C; }

.btn--amber-outline {
  background: transparent;
  border-color: rgba(217, 119, 6, 0.35);
  color: var(--color-amber);
}
.btn--amber-outline:hover {
  background: rgba(217, 119, 6, 0.07);
}

.btn--sm {
  font-size: var(--text-sm);
  padding: 9px 18px;
}

.btn--lg {
  font-size: var(--text-md);
  padding: 15px 32px;
}

.btn__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── Badges / Pills ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  line-height: 1;
}

.badge--amber {
  background: rgba(217, 119, 6, 0.12);
  border-color: rgba(217, 119, 6, 0.28);
  color: var(--color-amber-light);
}

.badge--live {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success);
}

.badge--soon {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.2);
  color: #B91C1C;
}

.badge--new {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.2);
  color: var(--color-docs-blue);
}

.badge__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

/* ── Section Labels ── */
.eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-amber);
  margin-bottom: var(--space-3);
}

.eyebrow--light {
  color: var(--color-amber-light);
}

/* ── Headings ── */
.heading-xl {
  font-size: clamp(36px, 5.5vw, 62px);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.heading-lg {
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.heading-md {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: var(--leading-snug);
}

.heading-sm {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--leading-snug);
}

/* ── Feature Icon Dots ── */
.feat-icon {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
  line-height: 1;
}

.feat-icon--blue  { background: rgba(37, 99, 235, 0.1);  color: var(--color-docs-blue); }
.feat-icon--red   { background: rgba(220, 38, 38, 0.1);  color: var(--color-reqs-red); }
.feat-icon--amber { background: rgba(217, 119, 6, 0.1);  color: var(--color-amber); }
.feat-icon--green { background: rgba(22, 163, 74, 0.1);  color: var(--color-success); }

/* ── Dividers ── */
.divider {
  width: 1px;
  background: var(--border-default);
}

.divider--dark {
  background: var(--border-dark);
}

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }