/* ==========================================================================
   Synaptic — Base Styles
   Typography + Reset (scoped for safe parallel migration)
   ========================================================================== */

/* These styles only apply to elements within .synaptic-v2 containers.
   This prevents conflicts with existing UI during the redesign migration.
   Once migration is complete, we'll promote these to global. */

.synaptic-v2 {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

.synaptic-v2 h1,
.synaptic-v2 h2,
.synaptic-v2 h3,
.synaptic-v2 h4 {
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  margin: 0;
}

.synaptic-v2 p {
  margin: 0;
  color: var(--color-text-secondary);
}

.synaptic-v2 a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.synaptic-v2 a:hover {
  color: var(--color-accent-hover);
}

.synaptic-v2 code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}