/**
 * Public UI primitives (Phase 1b).
 * Loaded after public.css so one button / card / chip system wins
 * without rewriting page markup. Hub type-card accents stay in public.css.
 */

/* --- Type --- */
.rbl-text-xs { font-size: var(--rbl-text-xs); }
.rbl-text-sm { font-size: var(--rbl-text-sm); }
.rbl-text-md { font-size: var(--rbl-text-md); }
.rbl-text-lg { font-size: var(--rbl-text-lg); }
.rbl-text-xl { font-size: var(--rbl-text-xl); }
.rbl-text-2xl { font-size: var(--rbl-text-2xl); }

/* --- Container: 1200 / 1280 (Bootstrap xl is 1140, xxl 1320) --- */
.rbl-container {
  width: 100%;
  max-width: var(--rbl-container);
  margin-inline: auto;
  padding-inline: var(--rbl-gutter);
}
@media (min-width: 1200px) {
  .container {
    max-width: var(--rbl-container);
  }
}
@media (min-width: 1400px) {
  .container,
  .rbl-container {
    max-width: var(--rbl-container-wide);
  }
}

/* --- Button --- */
.rbl-btn,
.btn-primary,
.btn-outline-primary,
.rbl-cta-btn,
.rbl-btn-login,
.rbl-hub-search-btn,
.rbl-stype-v2-search-btn,
.rbl-search-submit,
.rbl-auth-submit,
.rbl-hub-sidebar-upload-btn {
  min-height: var(--rbl-touch-min);
  font-family: var(--rbl-font-body);
  border-radius: var(--rbl-radius);
  transition:
    background var(--rbl-transition-fast),
    border-color var(--rbl-transition-fast),
    color var(--rbl-transition-fast);
}
.rbl-btn-sm,
.btn-primary.btn-sm {
  min-height: var(--rbl-target);
  padding-inline: var(--rbl-space-4);
}

/* --- Card surface (not hub type accents or featured class tiles) --- */
.rbl-card,
.rbl-paper-card,
.rbl-why-card,
.rbl-mcq-card,
.rbl-class-tile,
.rbl-hub-subject-card {
  background: var(--rbl-white);
  border: 1px solid var(--rbl-border);
  border-radius: var(--rbl-radius-lg);
  box-shadow: var(--rbl-shadow);
}
.rbl-paper-card:hover,
.rbl-why-card:hover,
.rbl-mcq-card:hover,
.rbl-class-tile:hover,
.rbl-hub-subject-card:hover {
  box-shadow: var(--rbl-shadow-hover);
}

/* --- Badge (status / count labels, not tap targets) --- */
.rbl-badge,
.rbl-paper-badge,
.rbl-hub-expanding-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--rbl-space-1);
  font-size: var(--rbl-text-xs);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--rbl-radius-pill);
}

/* --- Chip / pill (tappable filters) --- */
.rbl-chip,
.rbl-hub-pill {
  display: inline-flex;
  align-items: center;
  min-height: var(--rbl-target);
  padding: var(--rbl-space-1) var(--rbl-space-4);
  border-radius: var(--rbl-radius-pill);
  border: 1px solid var(--rbl-border);
  background: var(--rbl-white);
  color: var(--rbl-ink);
  font-size: var(--rbl-text-sm);
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
}
.rbl-chip:hover,
.rbl-hub-pill:hover {
  border-color: var(--rbl-orange);
  color: var(--rbl-orange);
  background: var(--rbl-orange-l);
}