/**
 * StrideCore — Components (Brand-Aware)
 * =======================================
 * All components use CSS variables from tokens.css.
 * Brand packs override variables, not components.
 */

/* --------------------------------------------------------
   BUTTONS
   -------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: var(--button-padding-y) var(--button-padding-x);
  border-radius: var(--button-radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--font-size-base);
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
  cursor: pointer;
  border: none;
  line-height: 1.4;
}

.btn-primary {
  background: var(--brand-primary);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--brand-primary-dark, color-mix(in srgb, var(--brand-primary) 85%, black));
  transform: var(--hover-lift);
}

.btn-secondary {
  background: transparent;
  color: var(--brand-primary);
  border: 2px solid var(--brand-primary);
}

.btn-secondary:hover {
  background: var(--brand-primary);
  color: var(--white);
}

/* --------------------------------------------------------
   CARDS
   -------------------------------------------------------- */
.card {
  background: var(--card-background);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--space-24);
}

.card-dark {
  background: var(--grey-800);
  color: var(--white);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-soft);
  padding: var(--space-24);
}

/* --------------------------------------------------------
   PANELS
   -------------------------------------------------------- */
.panel {
  background: var(--panel-background);
  border-radius: var(--panel-radius);
  padding: var(--space-24);
}

/* --------------------------------------------------------
   METRICS
   -------------------------------------------------------- */
.metric {
  font-size: 48px;
  font-weight: 700;
  color: var(--metric-color);
  margin-bottom: var(--space-8);
  line-height: 1;
}

/* --------------------------------------------------------
   SECTION WRAPPER
   -------------------------------------------------------- */
.section {
  padding: var(--section-padding-y) 0;
}

/* --------------------------------------------------------
   MAX-WIDTH CONTAINER
   -------------------------------------------------------- */
.max-width {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-16);
}

.max-width-wide {
  max-width: var(--content-width-wide);
  margin: 0 auto;
  padding: 0 var(--space-16);
}