/* Base reset + typography */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.45;
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv01";
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; }

.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.serif-semi { font-family: var(--font-serif); font-style: italic; font-weight: 600; }
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; border: 2px solid var(--bg-page); }
::-webkit-scrollbar-thumb:hover { background: #C8C5BB; }

/* Layout */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Utility */
.hidden { display: none !important; }
.flex { display: flex; }
.grid { display: grid; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-md { font-size: var(--text-md); }
.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); }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skeleton {
  background: linear-gradient(90deg, #ECEAE2 0%, #F5F4EE 50%, #ECEAE2 100%);
  background-size: 800px 100%;
  animation: shimmer 1.2s infinite linear;
  border-radius: var(--r-sm);
}

/* Focus */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: var(--r-sm); }