/* Main CSS - Core styles and layout */

/* Tailwind Configuration */
@import url('https://fonts.googleapis.com/css2?family=Vastago+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --radius: 10px;
}

html, body {
  height: 100%;
}

body {
  background-image: 
    radial-gradient(circle, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0;
}

.dark body {
  background-image: 
    radial-gradient(circle, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0;
}

/* Container */
.container-x {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .container-x {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container-x {
    padding: 0 2rem;
  }
}

/* Borders */
.header-border { 
  border-bottom: 1px solid rgb(229 231 235);
}

.dark .header-border {
  border-bottom: 1px solid rgb(31 41 55);
}

.footer-border { 
  border-top: 1px solid rgb(229 231 235);
}

.dark .footer-border {
  border-top: 1px solid rgb(31 41 55);
}

.card-border { 
  border: 1px solid rgb(229 231 235);
}

.dark .card-border {
  border: 1px solid rgb(31 41 55);
}

/* Fixed header spacing */
.pt-26 {
  padding-top: 6.5rem;
}

/* Typography */
/* Mobile (< 600px) */
.text-h1 {
  font-size: 48px;
  line-height: 1.05;
  font-weight: 700;
}

/* Responsive Typography - Desktop (>= 600px) */
@media (min-width: 600px) {
  .text-h1 {
    font-size: 56px;
  }
}

.text-h2 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.2;
  font-weight: 600;
}

.text-h3 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.3;
  font-weight: 600;
}

.text-h4 {
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  line-height: 1.4;
  font-weight: 500;
}

.text-h5 {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.4;
  font-weight: 500;
}

.text-body {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.6;
  font-weight: 400;
}

.text-about-desktop {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  font-family: 'Vastago Grotesk', system-ui, sans-serif;
}

@media (min-width: 1024px) {
  .text-about-desktop {
    font-size: 28px;
    line-height: 1.6;
  }
}

.text-small {
  font-size: clamp(0.875rem, 1.25vw, 1rem);
  line-height: 1.5;
  font-weight: 400;
}

.text-tiny {
  font-size: clamp(0.75rem, 1vw, 0.875rem);
  line-height: 1.4;
  font-weight: 400;
}

/* Brand Colors */
.brand-50 { color: #f5f7ff; }
.brand-100 { color: #e9edff; }
.brand-200 { color: #cdd6ff; }
.brand-300 { color: #aab8ff; }
.brand-400 { color: #7d8fff; }
.brand-500 { color: #5366ff; }
.brand-600 { color: #3a49db; }
.brand-700 { color: #2f3ab0; }
.brand-800 { color: #27318d; }
.brand-900 { color: #222a72; }

.bg-brand-50 { background-color: #f5f7ff; }
.bg-brand-100 { background-color: #e9edff; }
.bg-brand-200 { background-color: #cdd6ff; }
.bg-brand-300 { background-color: #aab8ff; }
.bg-brand-400 { background-color: #7d8fff; }
.bg-brand-500 { background-color: #5366ff; }
.bg-brand-600 { background-color: #3a49db; }
.bg-brand-700 { background-color: #2f3ab0; }
.bg-brand-800 { background-color: #27318d; }
.bg-brand-900 { background-color: #222a72; }

.dark .brand-50 { color: #222a72; }
.dark .brand-100 { color: #27318d; }
.dark .brand-200 { color: #2f3ab0; }
.dark .brand-300 { color: #3a49db; }
.dark .brand-400 { color: #5366ff; }
.dark .brand-500 { color: #7d8fff; }
.dark .brand-600 { color: #aab8ff; }
.dark .brand-700 { color: #cdd6ff; }
.dark .brand-800 { color: #e9edff; }
.dark .brand-900 { color: #f5f7ff; }

.dark .bg-brand-50 { background-color: #222a72; }
.dark .bg-brand-100 { background-color: #27318d; }
.dark .bg-brand-200 { background-color: #2f3ab0; }
.dark .bg-brand-300 { background-color: #3a49db; }
.dark .bg-brand-400 { background-color: #5366ff; }
.dark .bg-brand-500 { background-color: #7d8fff; }
.dark .bg-brand-600 { background-color: #aab8ff; }
.dark .bg-brand-700 { background-color: #cdd6ff; }
.dark .bg-brand-800 { background-color: #e9edff; }
.dark .bg-brand-900 { background-color: #f5f7ff; }

/* Text Selection */
::selection {
  background-color: rgba(83, 102, 255, 0.2);
  color: inherit;
}

.dark ::selection {
  background-color: rgba(83, 102, 255, 0.3);
  color: inherit;
}

h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection {
  background-color: rgba(83, 102, 255, 0.25);
}

.dark h1::selection,
.dark h2::selection,
.dark h3::selection,
.dark h4::selection,
.dark h5::selection,
.dark h6::selection {
  background-color: rgba(83, 102, 255, 0.35);
}

/* Navigation */
.nav-link-wrapper {
  position: relative;
  display: inline-block;
}

.nav-link-wrapper::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 8px;
  background-image: url('../assets/images/wave.svg');
  background-repeat: repeat-x;
  background-size: auto 8px;
  background-position: 0 0;
  opacity: 0;
  transition: width 0.4s ease-out, opacity 0.3s ease-out;
  pointer-events: none;
  z-index: 1;
}

.nav-link-wrapper:hover::after {
  width: 100%;
  opacity: 0.7;
  animation: wave-slide 1s linear infinite;
}

@keyframes wave-slide {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 20px 0;
  }
}

.nav-link {
  position: relative;
  transition: color 0.2s ease-out;
  color: rgb(107 114 128);
  display: inline-block;
}

.dark .nav-link {
  color: rgb(156 163 175);
}

.nav-link:hover {
  color: rgb(55 65 81);
}

.dark .nav-link:hover {
  color: rgb(249 250 251);
}

.nav-link.active {
  color: rgb(31 41 55);
  font-weight: 600;
}

.dark .nav-link.active {
  color: rgb(249 250 251);
}

/* Social Icons */
.social-icons {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #f3f4f6;
  color: #6b7280;
  text-decoration: none;
  transition: all 0.2s ease-out;
  font-size: 1.25rem;
}

.social-icon img {
  width: 20px;
  height: 20px;
  transition: filter 0.2s ease-out;
  filter: brightness(0) saturate(100%) invert(40%) sepia(8%) saturate(500%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

.dark .social-icon {
  background: #374151;
  color: #9ca3af;
}

.dark .social-icon img {
  filter: brightness(0) saturate(100%) invert(60%) sepia(5%) saturate(500%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

.social-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: #e5e7eb;
  color: #374151;
}

.social-icon:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(8%) saturate(500%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

.dark .social-icon:hover {
  background: #4b5563;
  color: #f9fafb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark .social-icon:hover img {
  filter: brightness(0) saturate(100%) invert(95%) sepia(5%) saturate(500%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

.social-icon.linkedin:hover {
  background: #0077b5;
  color: white;
}

.social-icon.linkedin:hover img {
  filter: brightness(0) saturate(100%) invert(100%);
}

.social-icon.behance:hover {
  background: #1769ff;
  color: white;
}

.social-icon.behance:hover img {
  filter: brightness(0) saturate(100%) invert(100%);
}

.social-icon.google:hover {
  background: #4285f4;
  color: white;
}

.social-icon.google:hover img {
  filter: brightness(0) saturate(100%) invert(100%);
}

.social-icon.instagram:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: white;
}

/* Utility Classes */
.transition-all {
  transition: all 0.3s ease-out;
}

.transition-colors {
  transition: color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
}

.transition-transform {
  transition: transform 0.3s ease-out;
}

.transition-opacity {
  transition: opacity 0.3s ease-out;
}

/* Responsive Utilities */
@media (max-width: 640px) {
  .sm\:hidden {
    display: none;
  }
}

@media (min-width: 640px) {
  .sm\:flex {
    display: flex;
  }
  
  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}