/* ==========================================================================
   Devlika & Firman Wazir Portfolio — Custom Design System & Utilities
   ========================================================================== */

:root {
  --bg-light: #F8FAFC;
  --bg-dark: #090D16;
}

html {
  scroll-behavior: smooth;
}

/* Grid Pattern for Light & Dark */
.bg-grid-pattern {
  background-size: 36px 36px;
  background-image: 
    linear-gradient(to right, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
}

.dark .bg-grid-pattern {
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
}

/* Clean Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
.dark ::-webkit-scrollbar-track {
  background: #090D16;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
.dark ::-webkit-scrollbar-thumb {
  background: #1B2745;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}
.dark ::-webkit-scrollbar-thumb:hover {
  background: #26375E;
}

/* Tabular Numbers for Clean Metrics */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Skeleton Loading Shimmer */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-shimmer {
  background: linear-gradient(90deg, #E2E8F0 25%, #F1F5F9 50%, #E2E8F0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.dark .skeleton-shimmer {
  background: linear-gradient(90deg, #111A30 25%, #1B2745 50%, #111A30 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.2s ease-out forwards;
}