/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

:root {
  --color-primary-accent: theme('colors.purple.600');
  --color-secondary-accent: theme('colors.pink.500');
  --color-tertiary-accent: theme('colors.sky.500');
  --color-text-primary: theme('colors.gray.800');
  --color-text-secondary: theme('colors.gray.600');
  --color-background-light: theme('colors.slate.50');
  --color-surface: theme('colors.white');
}

body {
  font-family: 'Noto Sans SC', 'Inter', sans-serif; /* Prioritize Noto Sans SC for Chinese */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Navigation Styles */
.nav-link {
  @apply text-gray-600 hover:text-purple-600 transition-colors duration-200 py-1 relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary-accent);
  transition: width 0.3s ease-in-out;
}
.nav-link:hover::after,
.active-nav-link::after {
  width: 100%;
}
.active-nav-link {
  @apply text-purple-600 font-medium;
}

.mobile-nav-link {
  @apply block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-purple-600 hover:bg-purple-50;
}
.mobile-nav-link.active-nav-link {
    @apply bg-purple-100 text-purple-700;
}


/* Button Styles */
.btn {
  @apply inline-block font-medium rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2;
  @apply px-6 py-3 text-base; /* Default size */
}
.btn-primary {
  @apply bg-gradient-to-r from-purple-600 to-pink-500 hover:from-purple-700 hover:to-pink-600 text-white shadow-md hover:shadow-lg transform hover:-translate-y-0.5;
  @apply focus:ring-purple-500;
}
.btn-secondary {
  @apply bg-slate-200 hover:bg-slate-300 text-gray-700 shadow-sm hover:shadow-md;
  @apply focus:ring-slate-400;
}
.btn-primary-outline {
    @apply border-2 border-purple-500 text-purple-600 hover:bg-purple-500 hover:text-white;
    @apply focus:ring-purple-500;
}

/* Text Gradient for Headlines */
.text-gradient {
  @apply bg-gradient-to-r from-purple-600 to-pink-500 bg-clip-text text-transparent;
}

/* Card Styles */
.hover-shadow-xl:hover {
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}

/* Prose Adjustments for Chinese Typography (Tailwind Typography Plugin might need this) */
.prose {
  font-family: 'Noto Sans SC', 'Inter', sans-serif;
}
.prose h1, .prose h2, .prose h3, .prose h4 {
  @apply text-gray-800;
  font-family: 'Noto Sans SC', 'Inter', sans-serif;
  font-weight: 700;
}
.prose p, .prose li {
  @apply text-gray-700 leading-relaxed;
}
.prose strong {
    @apply font-semibold text-purple-600;
}
.prose a {
    @apply text-purple-600 hover:text-pink-500 transition-colors;
}
.prose blockquote {
    @apply border-l-4 border-purple-400 bg-purple-50 p-4 text-gray-700;
}
.prose blockquote p {
    @apply text-gray-700;
}


/* Page Title Background */
.page-title-bg {
    position: relative;
    overflow: hidden;
}
.page-title-bg::before, .page-title-bg::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    filter: blur(60px);
    z-index: 0;
}
.page-title-bg::before {
    width: 400px;
    height: 400px;
    background-color: var(--color-secondary-accent);
    top: -100px;
    left: -100px;
}
.page-title-bg::after {
    width: 300px;
    height: 300px;
    background-color: var(--color-tertiary-accent);
    bottom: -80px;
    right: -80px;
}
.page-title-bg > div { /* container */
    position: relative;
    z-index: 1;
}


/* Skill Tags for About Page */
.skill-tag {
    @apply bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm font-medium shadow-sm;
}

/* Insight Cards for Resources Page */
.insight-card {
    @apply bg-white p-6 rounded-lg shadow-lg mb-6 border-l-4 border-purple-400;
}
.insight-card h3 {
    @apply text-xl font-semibold text-gray-800 mb-2;
}
.icon-beside-title {
    @apply h-5 w-5 mr-2 inline-block;
}
.resource-item a {
    @apply block p-3 bg-slate-100 hover:bg-purple-50 rounded-md transition-colors duration-200 text-gray-700 hover:text-purple-600;
}

/* Goal Cards for Blueprint Page */
.goal-card {
    @apply bg-white p-6 rounded-xl shadow-lg text-center hover:shadow-2xl transition-shadow duration-300 flex flex-col items-center;
}
.goal-card-icon-wrapper {
    @apply h-16 w-16 rounded-full flex items-center justify-center mb-4;
}
.strategy-item {
    @apply bg-white p-4 rounded-lg shadow-md flex items-center text-gray-700;
}
.strategy-icon {
    @apply h-6 w-6 mr-3;
}


/* Service Cards */
.service-card {
    @apply bg-white p-6 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 flex flex-col;
}
.service-card-icon {
    @apply h-12 w-12 rounded-lg flex items-center justify-center mb-4 text-2xl;
}
.service-card-icon i { /* Lucide icon */
    @apply h-7 w-7;
}

/* Case Study Cards */
.case-study-card {
    @apply bg-white p-6 md:p-8 rounded-xl shadow-xl flex flex-col md:flex-row items-start gap-6;
}
.case-study-icon {
    @apply h-16 w-16 md:h-20 md:w-20 rounded-lg flex items-center justify-center text-3xl flex-shrink-0;
}
.case-study-icon i {
    @apply h-8 w-8 md:h-10 md:w-10;
}

/* Contact Form Inputs */
.form-input, .form-textarea {
    @apply block w-full px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 transition-colors duration-200;
    @apply bg-slate-50;
}
.form-textarea {
    @apply min-h-[100px];
}
.social-link {
    @apply inline-flex items-center justify-center h-10 w-10 bg-slate-200 text-gray-600 rounded-full hover:bg-purple-500 hover:text-white transition-all duration-300;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}