@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --sidebar-width: 240px;
  --nav-height: 64px;
  --bottom-nav-height: 64px;
}

html {
  scroll-behavior: smooth;
}

body {
  @apply bg-black text-white;
  background-color: #0a0a0a;
}

/* Premium heading typography */
h1, h2, h3 {
  font-family: var(--font-display), sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Scrollbar styling for dark mode */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
  background: #262626;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #404040;
}

/* App shell layout utilities */
@layer components {
  .app-content {
    @apply w-full md:pl-[var(--sidebar-width)];
  }
}