/* ============================================================
   base.css — Typography, Utilities, App Structure
   ============================================================ */

/* ── App Wrapper ──────────────────────────────────────────── */
#app {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--color-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Center app on desktop */
@media (min-width: 520px) {
  body {
    background: #E8EAF6;
  }
  [data-theme="dark"] body,
  [data-theme="dark"] {
    background: #06060F;
  }
  #app {
    box-shadow: 0 0 80px rgba(0,0,0,0.15);
  }
}

/* ── Page Container ───────────────────────────────────────── */
#page-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + var(--space-4));
  padding-top: var(--header-height);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

#page-content.no-header {
  padding-top: 0;
}

#page-content.no-nav {
  padding-bottom: 0;
}

/* ── Typography ───────────────────────────────────────────── */
.text-xs     { font-size: var(--text-xs); }
.text-sm     { font-size: var(--text-sm); }
.text-base   { font-size: var(--text-base); }
.text-lg     { font-size: var(--text-lg); }
.text-xl     { font-size: var(--text-xl); }
.text-2xl    { font-size: var(--text-2xl); }
.text-3xl    { font-size: var(--text-3xl); }

.font-light  { font-weight: var(--font-light); }
.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semi   { font-weight: var(--font-semi); }
.font-bold   { font-weight: var(--font-bold); }

.text-primary   { color: var(--color-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }
.text-success   { color: var(--color-success); }
.text-warning   { color: var(--color-warning); }
.text-danger    { color: var(--color-danger); }
.text-white     { color: #fff; }
.text-center    { text-align: center; }
.text-right     { text-align: right; }
.truncate       { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Layout Utilities ─────────────────────────────────────── */
.flex           { display: flex; }
.flex-col       { display: flex; flex-direction: column; }
.flex-center    { display: flex; align-items: center; justify-content: center; }
.flex-between   { display: flex; align-items: center; justify-content: space-between; }
.flex-start     { display: flex; align-items: center; justify-content: flex-start; }
.items-center   { align-items: center; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.gap-1          { gap: var(--space-1); }
.gap-2          { gap: var(--space-2); }
.gap-3          { gap: var(--space-3); }
.gap-4          { gap: var(--space-4); }
.gap-6          { gap: var(--space-6); }
.flex-1         { flex: 1; }
.flex-shrink-0  { flex-shrink: 0; }
.flex-wrap      { flex-wrap: wrap; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); }

.w-full   { width: 100%; }
.h-full   { height: 100%; }
.hidden   { display: none !important; }
.block    { display: block; }
.relative { position: relative; }
.absolute { position: absolute; }

/* ── Spacing Utilities ────────────────────────────────────── */
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.p-6  { padding: var(--space-6); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ── Section Header ───────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-5) var(--space-3);
}

.section-title {
  font-size: var(--text-base);
  font-weight: var(--font-semi);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.section-link {
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-weight: var(--font-medium);
}

/* ── Empty State ──────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-6);
  text-align: center;
  gap: var(--space-3);
}

.empty-state__icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-2xl);
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
}

.empty-state__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semi);
  color: var(--color-text-primary);
}

.empty-state__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 260px;
}

/* ── Page Section Padding ─────────────────────────────────── */
.page-section {
  padding: var(--space-4) var(--space-5);
}

/* ── Divider ──────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-4) 0;
}

/* ── Misc ─────────────────────────────────────────────────── */
.rounded-full { border-radius: var(--radius-full); }
.overflow-hidden { overflow: hidden; }
.cursor-pointer  { cursor: pointer; }
.select-none     { user-select: none; }
.sr-only         { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }