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

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

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 */
}

/* Removed: glass-card utility (eliminated glassmorphism aesthetic) */
@layer utilities {

  .text-fluid-lg {
    font-size: clamp(1.125rem, 3cqi, 1.5rem);
  }
  
  .text-fluid-xl {
    font-size: clamp(1.5rem, 5cqi, 2.25rem);
  }

  .card-title {
    @apply text-base font-black text-slate-100 tracking-tight;
  }
  
  .card-subtitle {
     @apply text-[10px] font-bold text-slate-500 uppercase tracking-[0.08em] mt-0.5;
  }
}

/* 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);
}