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

@import "bootstrap-icons/font/bootstrap-icons.css";

:root {
  /* slate-950 forced as default to prevent white flash */
  --background: #020617;
  --foreground: #f1f5f9;
}

body {
  color: var(--foreground);
  background-color: var(--background);
  font-family: inherit; /* Use Next.js font if defined, or system default */
}

/* Custom Scrollbar Styling */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #020617; /* slate-950 */
}

::-webkit-scrollbar-thumb {
  background: #1e293b; /* slate-800 */
  border-radius: 10px;
  border: 2px solid #020617; /* adds padding effect */
}

::-webkit-scrollbar-thumb:hover {
  background: #334155; /* slate-700 */
}

/* Modern Utility for Premium Glassmorphism */
@layer utilities {
  .glass-card {
    @apply bg-slate-900/40 backdrop-blur-xl border border-slate-800/50 shadow-2xl;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%);
  }
  
  .text-fluid-lg {
    font-size: clamp(1.125rem, 3cqi, 1.5rem);
  }
  
  .text-fluid-xl {
    font-size: clamp(1.5rem, 5cqi, 2.25rem);
  }
}

/* Safe Area Insets for Modern Mobile Devices (iOS Notch/Home Bar) */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom);
}

.pt-safe {
  padding-top: env(safe-area-inset-top);
}