/* SmartForms Design System – aligned with Ref_design.html */

/* Fonts */
body { font-family: 'Inter', sans-serif; }
.font-display { font-family: 'Space Grotesk', sans-serif; }
.font-serif-display { font-family: 'Cinzel', serif; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb { background: #334155; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Page background (radial gradient + dot grid) */
.page-bg {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at top, var(--tw-gradient-stops));
  --tw-gradient-from: #e0e7ff;
  --tw-gradient-stops: var(--tw-gradient-from), #f8fafc, white;
  z-index: 0;
  transition: background 0.3s;
}
.dark .page-bg {
  --tw-gradient-from: #312e81;
  --tw-gradient-stops: var(--tw-gradient-from), #020617, black;
}
.page-bg-dots {
  position: fixed;
  inset: 0;
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 40px 40px;
}
.dark .page-bg-dots { opacity: 0.2; }

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideInFromBottom {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.3s ease-out forwards; }
.animate-slide-in { animation: slideInFromBottom 0.5s ease-out forwards; }

/* Content wrapper (sits above fixed background) */
.page-content { position: relative; z-index: 10; min-height: 100vh; }

/* Use case cards: soft elevation on hover */
.use-case-card:hover { transform: translateY(-2px); }