/* ═══════════════════════════════════════════════════════════════
   app.css - Global Styles
   Sejda • Premium SaaS Light Theme
   ═══════════════════════════════════════════════════════════════ */

/* ── Global base ─────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  max-width: 100vw;
  background: #f8fafc;
  color: #111827;
}
img, video, svg { max-width: 100%; height: auto; }
a { text-decoration: none; }

/* ── Focus ring ──────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid #f27328;
  outline-offset: 2px;
}

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ── Selection ───────────────────────────────────────────────── */
::selection { background: #fde8d4; color: #9a3412; }

/* ── Utility ─────────────────────────────────────────────────── */
.container-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 640px) { .container-page { padding: 0 16px; } }

/* ── Navbar shadow on scroll ─────────────────────────────────── */
#nav-bar.scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}

/* ── Page transition ─────────────────────────────────────────── */
main {
  animation: pageIn 0.3s ease both;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}