/* ═══════════════════════════════════════════════════════════════
   TF Study Shelf — Base Styles
   Typography, body defaults, utility classes
   ═══════════════════════════════════════════════════════════════ */

body {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* ─── Headings ────────────────────────────────────────────── */
h1 { font: 700 32px/40px var(--font-primary); letter-spacing: -0.02em; }
h2 { font: 700 28px/36px var(--font-primary); letter-spacing: -0.01em; }
h3 { font: 600 24px/32px var(--font-primary); }
h4 { font: 600 20px/28px var(--font-primary); }
h5 { font: 600 16px/24px var(--font-primary); }
h6 { font: 500 14px/20px var(--font-primary); }

p { color: var(--text-secondary); line-height: 1.6; }
p + p { margin-top: var(--space-md); }

strong { font-weight: 600; }
small { font-size: 12px; color: var(--text-tertiary); }

/* ─── Layout Utilities ────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ─── Spacing ─────────────────────────────────────────────── */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

/* ─── Display ─────────────────────────────────────────────── */
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ─── Text Colors ─────────────────────────────────────────── */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-accent { color: var(--accent); }

/* ─── Skeleton / Shimmer Loading ──────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--color-surface-elevated) 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Fade In Animation ───────────────────────────────────── */
.fade-in {
  animation: fadeIn 200ms ease-in forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .container { padding: 0 var(--space-md); }
  .hide-mobile { display: none !important; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  h1 { font-size: 24px; line-height: 32px; }
  h2 { font-size: 22px; line-height: 30px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hide-tablet { display: none !important; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .hide-desktop { display: none !important; }
}