:root {
  --color-paper: #E9E9E8;
  --color-ink: #281950;
  --color-primary: #281950;
  --color-surface: #7c3aed;
  --color-accent: #202237;
  --color-bg: #ffffff;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: var(--color-bg);
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  color: var(--color-primary);
}

/* Paper noise overlay for tactile realism */
.paper-texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Custom scrollbar to keep layout clean */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
  background: #d1cfc9;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #b5b3ad;
}

/* Smooth transitions */
.transition-transform-opacity {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Custom design system utility classes */
.font-sans-body {
  font-family: 'Figtree', sans-serif;
}