/* NKOSI v4 — custom styles + Tailwind overrides */

[x-cloak] { display: none !important; }

body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}

.heading, h1, h2, h3 {
  font-family: 'Ubuntu', sans-serif;
}

code, pre, .mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* Scrollbar dark */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #18181b; }
::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #52525b; }

/* Mobile-first ajustements 380px */
@media (max-width: 380px) {
  main { padding: 0.75rem !important; }
  h1 { font-size: 1.25rem !important; }
  .text-2xl { font-size: 1.25rem; }
}

/* PWA-ready safe areas */
@supports (padding: env(safe-area-inset-top)) {
  header { padding-top: env(safe-area-inset-top); }
  main   { padding-bottom: env(safe-area-inset-bottom); }
}

/* Smooth transitions */
button, input, select { transition: all 0.15s ease; }

/* Focus rings */
input:focus, select:focus, button:focus-visible {
  outline: 2px solid #f59e0b;
  outline-offset: 2px;
}