@font-face { font-family: 'Google Sans'; src: url('/fonts/GoogleSans-Variable.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Google Sans'; src: url('/fonts/GoogleSans-Variable-Italic.ttf') format('truetype'); font-weight: 100 900; font-style: italic; font-display: swap; } @tailwind base; @tailwind components; @tailwind utilities; @layer base { body { @apply bg-slate-50 text-slate-900 text-base antialiased; } } @layer components { .btn { @apply inline-flex items-center justify-center px-4 py-2.5 rounded-xl font-semibold text-sm transition-colors min-h-[44px] disabled:opacity-40 disabled:cursor-not-allowed; } .btn-primary { @apply bg-primary-700 hover:bg-primary-800 text-white; } .btn-secondary { @apply bg-gray-200 hover:bg-gray-300 text-gray-700; } .btn-danger { @apply bg-red-600 hover:bg-red-700 text-white; } .btn-ghost { @apply bg-transparent hover:bg-gray-100 text-gray-600; } .card { @apply bg-white rounded-2xl shadow-sm border border-gray-100; } .input { @apply w-full border border-gray-300 rounded-xl px-4 py-2.5 text-base focus:outline-none focus:ring-2 focus:ring-primary-600 disabled:bg-gray-50; } .label { @apply block text-sm font-medium text-gray-700 mb-1; } } /* Sidebar scrollbar — pre-allocates gutter so content never shifts, fades in on hover */ .sidebar-scroll { overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color 0.25s; } .sidebar-scroll:hover { scrollbar-color: rgba(255,255,255,0.22) transparent; } /* Webkit */ .sidebar-scroll::-webkit-scrollbar { width: 4px; } .sidebar-scroll::-webkit-scrollbar-track { background: transparent; } .sidebar-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; transition: background 0.25s; } .sidebar-scroll:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); }