/**
 * MINIMAL THEME CSS
 * Clean, spacious design with subtle animations
 * Font: Inter
 * Colors: Blue accents, white/gray backgrounds
 */

/* ==============================================================================
   ANIMATIONS
   ============================================================================== */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==============================================================================
   ANIMATION CLASSES
   ============================================================================== */

.theme-minimal .fade-in {
    opacity: 0;
    animation: fadeIn 0.8s ease-in forwards;
}

/* ==============================================================================
   HOVER EFFECTS
   ============================================================================== */

.theme-minimal .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.theme-minimal .hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* ==============================================================================
   SECTION STYLES
   ============================================================================== */

.theme-minimal .section-header {
    @apply mb-20 text-center;
}

.theme-minimal .section-title {
    @apply text-5xl font-light text-gray-900 mb-4;
}

.theme-minimal .section-subtitle {
    @apply text-xl text-gray-600;
}

/* ==============================================================================
   SECTION BACKGROUND OVERRIDES (Alternating white/gray-50 pattern)
   ============================================================================== */

/* Hero section - white background */
.theme-minimal #hero {
    background-color: #ffffff !important;
}

/* About section - gray background */
.theme-minimal #about {
    background-color: #f9fafb !important;
}

/* Services section - white background */
.theme-minimal #services {
    background-color: #ffffff !important;
}

/* Projects section - gray background */
.theme-minimal #projects {
    background-color: #f9fafb !important;  /* gray-50 */
}

/* Reviews section - white background */
.theme-minimal #reviews {
    background-color: #ffffff !important;
}

/* Contact section - gray background */
.theme-minimal #contact {
    background-color: #f9fafb !important;  /* gray-50 */
}

/* ==============================================================================
   CARD STYLES
   ============================================================================== */

.theme-minimal .card {
    @apply bg-white rounded-3xl shadow-sm border border-gray-100 p-10 h-full;
}

.theme-minimal .card-hover {
    @apply bg-white rounded-3xl shadow-sm border border-gray-100 p-10 h-full transition-all duration-300;
}

.theme-minimal .card-hover:hover {
    @apply shadow-xl;
}

/* ==============================================================================
   BUTTON STYLES
   ============================================================================== */

.theme-minimal .btn-primary {
    @apply bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold
           transition-all duration-300 hover:bg-blue-700 hover:shadow-lg;
}

.theme-minimal .btn-secondary {
    @apply bg-white text-blue-600 border-2 border-blue-600 px-6 py-3
           rounded-lg font-semibold transition-all duration-300
           hover:bg-blue-50;
}

/* ==============================================================================
   HERO SECTION
   ============================================================================== */

.theme-minimal .hero-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.theme-minimal .hero-container {
    @apply min-h-screen flex items-center justify-center px-4 py-20;
}

/* Hide tech terminal, show tagline on minimal theme */
.theme-minimal .tech-terminal {
    display: none;
}

.theme-minimal .hero-tagline {
    display: block;
}

/* Hide tech background effects on minimal theme */
.theme-minimal .hero-grid-bg,
.theme-minimal .hero-blur-cyan,
.theme-minimal .hero-blur-purple {
    display: none;
}

/* ==============================================================================
   TECH STACK / SKILL PILLS
   ============================================================================== */

.theme-minimal .skill-pill {
    @apply inline-block bg-white px-8 py-4 rounded-full shadow-sm border
           border-gray-100 text-lg font-light transition-colors duration-300
           hover:shadow-md;
}

/* Override the default skill badge styling for minimal theme */
.theme-minimal #services .inline-block {
    @apply bg-white text-gray-900 px-8 py-4 rounded-full shadow-sm border
           border-gray-100 text-lg font-light;
}

.theme-minimal #services .inline-block:hover {
    @apply shadow-md;
}

/* ==============================================================================
   FORM STYLING
   ============================================================================== */

/* Contact form inputs - rounded-full for text/email/tel inputs */
.theme-minimal #contact input[type="text"],
.theme-minimal #contact input[type="email"],
.theme-minimal #contact input[type="tel"] {
    @apply rounded-full border-gray-200;
}

/* Contact form textarea - rounded-3xl */
.theme-minimal #contact textarea {
    @apply rounded-3xl border-gray-200;
}

/* ==============================================================================
   DARK MODE SCHEME
   Applied when both .theme-minimal and .scheme-dark classes are present
   ============================================================================== */

/* Base text colors */
.theme-minimal.dark {
    color: #ffffff;
}

.theme-minimal.dark .section-title {
    @apply text-white;
}

.theme-minimal.dark .section-subtitle {
    @apply text-white;
}

/* Section backgrounds - alternating dark pattern */
.theme-minimal.dark #hero {
    background-color: #0f172a !important; /* slate-900 - dark */
}

.theme-minimal.dark #about {
    background-color: #1e293b !important; /* slate-800 - lighter */
}

.theme-minimal.dark #services {
    background-color: #0f172a !important; /* slate-900 - dark */
}

.theme-minimal.dark #projects {
    background-color: #1e293b !important; /* slate-800 - lighter */
}

.theme-minimal.dark #reviews {
    background-color: #0f172a !important; /* slate-900 - dark */
}

.theme-minimal.dark #contact {
    background-color: #1e293b !important; /* slate-800 - lighter */
}

/* Card styles for dark mode */
.theme-minimal.dark .card {
    @apply bg-slate-800 border-slate-700 text-white;
}

/* Contact form card - white border in dark mode */
.theme-minimal.dark #contact .card {
    @apply border-white;
}

.theme-minimal.dark .card-hover {
    @apply bg-slate-800 border-slate-700 text-white;
}

.theme-minimal.dark .card-hover:hover {
    @apply shadow-2xl border-blue-500;
}

/* Hover effect adjustments for dark mode */
.theme-minimal.dark .hover-lift:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* Button styles for dark mode */
.theme-minimal.dark .btn-primary {
    @apply bg-blue-500 hover:bg-blue-400;
}

.theme-minimal.dark .btn-secondary {
    @apply bg-slate-800 text-blue-400 border-blue-400 hover:bg-slate-700;
}

/* Skill pills for dark mode */
.theme-minimal.dark .skill-pill {
    @apply bg-slate-800 border-slate-700 text-white hover:shadow-lg hover:border-blue-500;
}

.theme-minimal.dark #services .inline-block {
    @apply bg-slate-800 text-white border-slate-700;
}

.theme-minimal.dark #services .inline-block:hover {
    @apply shadow-lg border-blue-500;
}

/* Form styling for dark mode */
.theme-minimal.dark #contact input[type="text"],
.theme-minimal.dark #contact input[type="email"],
.theme-minimal.dark #contact input[type="tel"],
.theme-minimal.dark #contact textarea {
    @apply bg-slate-800 border-slate-700 text-white placeholder-gray-500;
}

.theme-minimal.dark #contact input[type="text"]:focus,
.theme-minimal.dark #contact input[type="email"]:focus,
.theme-minimal.dark #contact input[type="tel"]:focus,
.theme-minimal.dark #contact textarea:focus {
    @apply border-blue-500 ring-blue-500;
}

/* Footer adjustments for dark mode */
.theme-minimal.dark footer {
    @apply bg-slate-950;
}

/* Hero section text colors for dark mode */
.theme-minimal.dark .hero-tagline {
    @apply text-white;
}

/* Gradient text remains colorful in dark mode */
.theme-minimal.dark .gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}