/* ==========================================================================
   Base / Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--color-ink-800);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-ink-900);
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

input, select, textarea { font-family: inherit; font-size: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }

img { max-width: 100%; display: block; }

table { border-collapse: collapse; width: 100%; }

svg { display: block; }

::selection { background: var(--color-accent-100); color: var(--color-primary-900); }

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}
button:focus-visible, .icon-btn:focus-visible { outline-offset: 3px; }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-ink-400); }

.mono { font-family: var(--font-mono); }

.text-muted { color: var(--color-ink-500); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }

/* Skeleton loading shimmer */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
}
.skeleton::after {
  content: '';
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* Page fade-in */
.fade-in { animation: fadeIn var(--dur-slow) var(--ease-out); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Spinner */
.spinner {
  width: 20px; height: 20px;
  border: 2.5px solid var(--color-border);
  border-top-color: var(--color-primary-500);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.spinner.lg { width: 36px; height: 36px; border-width: 3.5px; }
@keyframes spin { to { transform: rotate(360deg); } }

.full-page-loader {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: var(--sp-4);
  background: var(--color-bg);
  z-index: 9999;
}
.full-page-loader .brand-mark { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--color-primary-700); display:flex; align-items:center; gap:8px; }