/**
 * Visual Hierarchy & Color Contrast System
 * Ensures proper layering: Section BG → Cards → Buttons
 * Fixes contrast issues where elements blend into backgrounds
 */

/* ============================================================================
   COLOR HIERARCHY SYSTEM
   Level 1: Section Backgrounds (subtle, atmospheric)
   Level 2: Cards/Containers (distinct, elevated)
   Level 3: Buttons/CTAs (prominent, action-driving)
   ============================================================================ */


/* ============================================================================
   MODERN THEME - Refined Contrast Layers
   ============================================================================ */

/* Level 2: Cards - Elevated from section backgrounds */
.theme-modern .service-card,
.theme-modern .portfolio-card,
.theme-modern .testimonial-card,
.theme-modern .contact-form-wrapper,
.theme-modern .project-card,
.theme-modern .about-card {
  /* Fallback for older browsers */
  background: var(--color-surface);
  /* Gradient for modern browsers */
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.08),
    transparent
  ), var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.theme-modern .service-card:hover,
.theme-modern .portfolio-card:hover,
.theme-modern .testimonial-card:hover {
  /* Fallback */
  background: var(--color-surface);
  /* Gradient - stronger highlight on hover */
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.12),
    rgba(var(--color-primary-rgb), 0.05)
  ), var(--color-surface);
  border-color: var(--color-primary);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.2),
    0 0 0 1px var(--color-primary-light),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Level 3: Buttons - Stand out on everything */
.theme-modern .btn-primary {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    color-mix(in srgb, var(--color-primary) 85%, var(--color-accent) 15%) 100%
  );
  border: 2px solid var(--color-primary);
  box-shadow:
    0 4px 12px var(--color-primary-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
}

.theme-modern .btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  pointer-events: none;
}

.theme-modern .btn-secondary {
  background: linear-gradient(
    135deg,
    var(--color-secondary) 0%,
    color-mix(in srgb, var(--color-secondary) 90%, var(--color-primary) 10%) 100%
  );
  border: 2px solid var(--color-secondary);
  color: var(--color-background);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.theme-modern .btn-accent {
  background: linear-gradient(
    135deg,
    var(--color-accent) 0%,
    color-mix(in srgb, var(--color-accent) 95%, var(--color-secondary) 5%) 100%
  );
  border: 2px solid var(--color-accent);
  color: var(--color-background);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

.theme-modern .btn-outline {
  background: rgba(var(--color-surface-rgb), 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.theme-modern .btn-outline:hover {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-color: var(--color-primary);
  box-shadow: 0 6px 20px var(--color-primary-glow);
}

/* Service icons - distinct from card backgrounds */
.theme-modern .service-icon {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    color-mix(in srgb, var(--color-primary) 80%, var(--color-accent) 20%) 100%
  );
  box-shadow:
    0 4px 12px var(--color-primary-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Service detail cards - same shadow treatment as service-card */
.theme-modern .service-detail,
.theme-modern .flow-card {
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.theme-modern .service-detail:hover,
.theme-modern .flow-card:hover {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.2),
    0 0 0 1px var(--color-primary-light),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Admin/Dashboard list items - subtle depth */
.theme-modern .project-item,
.theme-modern .invoice-item,
.theme-modern .message-item {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.theme-modern .project-item:hover,
.theme-modern .invoice-item:hover,
.theme-modern .message-item:hover {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.15),
    0 0 0 1px var(--color-primary-light),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}


/* ============================================================================
   CREATIVE THEME - Bold Contrast & Glow
   ============================================================================ */

/* Level 2: Cards - Vibrant elevated surfaces */
.theme-creative .service-card,
.theme-creative .portfolio-card,
.theme-creative .testimonial-card,
.theme-creative .contact-form-wrapper,
.theme-creative .project-card,
.theme-creative .about-card {
  /* Fallback */
  background: var(--color-surface);
  /* Gradient - bold color mix */
  background: linear-gradient(
    145deg,
    rgba(var(--color-primary-rgb), 0.15),
    rgba(var(--color-secondary-rgb), 0.08)
  ), var(--color-surface);
  border: 2px solid var(--color-primary);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.theme-creative .service-card:hover,
.theme-creative .portfolio-card:hover,
.theme-creative .testimonial-card:hover {
  /* Fallback */
  background: var(--color-surface);
  /* Gradient - bolder colors on hover */
  background: linear-gradient(
    145deg,
    rgba(var(--color-primary-rgb), 0.20),
    rgba(var(--color-accent-rgb), 0.12)
  ), var(--color-surface);
  border-color: var(--color-primary);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.25),
    0 0 40px var(--color-primary-glow),
    0 0 0 2px var(--color-primary),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Level 3: Buttons - Maximum contrast & glow */
.theme-creative .btn-primary {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-accent) 50%,
    var(--color-secondary) 100%
  );
  border: 2px solid var(--color-primary);
  box-shadow:
    0 8px 20px var(--color-primary-glow),
    0 0 40px var(--color-accent-glow),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.theme-creative .btn-primary::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
  animation: shine-sweep 3s ease-in-out infinite;
}

@keyframes shine-sweep {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.theme-creative .btn-secondary {
  background: linear-gradient(
    135deg,
    var(--color-secondary) 0%,
    color-mix(in srgb, var(--color-secondary) 80%, var(--color-accent) 20%) 100%
  );
  border: 2px solid var(--color-secondary);
  color: var(--color-background);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.2),
    0 0 20px color-mix(in srgb, var(--color-secondary) 40%, transparent 60%);
}

.theme-creative .btn-accent {
  background: linear-gradient(
    135deg,
    var(--color-accent) 0%,
    color-mix(in srgb, var(--color-accent) 90%, var(--color-primary) 10%) 100%
  );
  border: 2px solid var(--color-accent);
  color: var(--color-background);
  box-shadow:
    0 6px 16px rgba(255, 255, 255, 0.4),
    0 0 30px var(--color-accent-glow);
}

.theme-creative .btn-outline {
  background: rgba(var(--color-surface-rgb), 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.15),
    0 0 20px var(--color-primary-glow),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.theme-creative .btn-outline:hover {
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-accent)
  );
  color: var(--color-primary-text);
  border-color: var(--color-accent);
  box-shadow:
    0 8px 24px var(--color-primary-glow),
    0 0 40px var(--color-accent-glow);
}

/* Service icons - glowing distinct elements */
.theme-creative .service-icon {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-accent) 100%
  );
  box-shadow:
    0 8px 20px var(--color-primary-glow),
    0 0 30px var(--color-accent-glow),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
  border: 2px solid var(--color-accent);
}

/* Service detail cards - bold shadows and glow */
.theme-creative .service-detail,
.theme-creative .flow-card {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.theme-creative .service-detail:hover,
.theme-creative .flow-card:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.25),
    0 0 40px var(--color-primary-glow),
    0 0 0 2px var(--color-primary),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Admin/Dashboard list items - bold with glow */
.theme-creative .project-item,
.theme-creative .invoice-item,
.theme-creative .message-item {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.theme-creative .project-item:hover,
.theme-creative .invoice-item:hover,
.theme-creative .message-item:hover {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.2),
    0 0 20px var(--color-primary-glow),
    0 0 0 2px var(--color-primary),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}


/* ============================================================================
   3D THEME - Glass Layering & Neon Accents
   ============================================================================ */

/* Level 2: Cards - Deep glass surfaces */
.theme-threed .service-card,
.theme-threed .portfolio-card,
.theme-threed .testimonial-card,
.theme-threed .contact-form-wrapper,
.theme-threed .project-card,
.theme-threed .about-card {
  background: linear-gradient(
    145deg,
    rgba(var(--color-surface-rgb), 0.95),
    rgba(var(--color-surface-rgb), 0.85)
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2px solid rgba(var(--color-primary-rgb), 0.5);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  position: relative;
}

/* Glass reflection shimmer */
.theme-threed .service-card::after,
.theme-threed .portfolio-card::after,
.theme-threed .testimonial-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  pointer-events: none;
}

.theme-threed .service-card:hover,
.theme-threed .portfolio-card:hover,
.theme-threed .testimonial-card:hover {
  background: linear-gradient(
    145deg,
    rgba(var(--color-surface-rgb), 1),
    rgba(var(--color-surface-rgb), 0.9)
  );
  border-color: var(--color-accent);
  box-shadow:
    0 16px 64px rgba(0, 0, 0, 0.4),
    0 0 60px var(--color-accent-glow),
    0 0 0 2px var(--color-accent),
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3);
}

/* Level 3: Buttons - Neon glow prominence */
.theme-threed .btn-primary {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-accent) 100%
  );
  border: 2px solid var(--color-accent);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.3),
    0 0 40px var(--color-accent-glow),
    0 0 60px var(--color-primary-glow),
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3);
  position: relative;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Neon pulse effect */
.theme-threed .btn-primary::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: var(--color-accent);
  opacity: 0;
  filter: blur(20px);
  animation: neon-pulse 2s ease-in-out infinite;
}

@keyframes neon-pulse {
  0%, 100% { opacity: 0; transform: scale(0.95); }
  50% { opacity: 0.6; transform: scale(1.05); }
}

.theme-threed .btn-secondary {
  background: linear-gradient(
    135deg,
    var(--color-secondary) 0%,
    color-mix(in srgb, var(--color-secondary) 80%, var(--color-accent) 20%) 100%
  );
  border: 2px solid var(--color-secondary);
  color: var(--color-background);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.25),
    0 0 30px color-mix(in srgb, var(--color-secondary) 50%, transparent 50%),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.theme-threed .btn-accent {
  background: linear-gradient(
    135deg,
    var(--color-accent) 0%,
    color-mix(in srgb, var(--color-accent) 90%, white 10%) 100%
  );
  border: 2px solid var(--color-accent);
  color: var(--color-background);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.3),
    0 0 60px var(--color-accent-glow),
    inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

.theme-threed .btn-outline {
  background: rgba(var(--color-surface-rgb), 0.3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.2),
    0 0 30px var(--color-accent-glow),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  text-shadow: 0 0 10px var(--color-accent-glow);
}

.theme-threed .btn-outline:hover {
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-accent)
  );
  color: var(--color-primary-text);
  border-color: var(--color-accent);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 60px var(--color-accent-glow),
    0 0 80px var(--color-primary-glow);
}

/* Service icons - neon holographic elements */
.theme-threed .service-icon {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-accent) 100%
  );
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.3),
    0 0 40px var(--color-accent-glow),
    0 0 60px var(--color-primary-glow),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
  border: 2px solid var(--color-accent);
  position: relative;
}

.theme-threed .service-icon::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: var(--color-accent);
  opacity: 0.3;
  filter: blur(20px);
  animation: icon-glow 3s ease-in-out infinite;
}

/* Service detail cards - deep glass with neon glow */
.theme-threed .service-detail,
.theme-threed .flow-card {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.theme-threed .service-detail:hover,
.theme-threed .flow-card:hover {
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.3),
    0 0 40px var(--color-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Admin/Dashboard list items - glass with neon */
.theme-threed .project-item,
.theme-threed .invoice-item,
.theme-threed .message-item {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.theme-threed .project-item:hover,
.theme-threed .invoice-item:hover,
.theme-threed .message-item:hover {
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    0 0 30px var(--color-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

@keyframes icon-glow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}


/* ============================================================================
   SECTION-SPECIFIC ENHANCEMENTS
   ============================================================================ */

/* Hero section buttons - most prominent */
.hero .btn-primary {
  font-size: 1.1rem;
  padding: 1rem 2.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.theme-modern .hero .btn-primary {
  box-shadow:
    0 8px 20px var(--color-primary-glow),
    0 4px 12px rgba(0, 0, 0, 0.2);
}

.theme-creative .hero .btn-primary {
  box-shadow:
    0 12px 32px var(--color-primary-glow),
    0 0 60px var(--color-accent-glow),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
  animation: hero-btn-pulse 3s ease-in-out infinite;
}

@keyframes hero-btn-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.theme-threed .hero .btn-primary {
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.3),
    0 0 60px var(--color-accent-glow),
    0 0 80px var(--color-primary-glow),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

/* CTA section buttons - emphasized */
.cta-section .btn {
  min-width: 200px;
  font-weight: 600;
}

/* Service cards - ensure buttons pop from card backgrounds */
.service-card .btn,
.portfolio-card .btn,
.testimonial-card .btn {
  margin-top: var(--space-4);
}

.theme-modern .service-card .btn-outline,
.theme-modern .portfolio-card .btn-outline {
  border-width: 2px;
  font-weight: 600;
}

.theme-creative .service-card .service-link,
.theme-creative .portfolio-card .portfolio-card-link {
  color: var(--color-accent);
  text-shadow: 0 0 10px var(--color-accent-glow);
}

.theme-threed .service-card .service-link,
.theme-threed .portfolio-card .portfolio-card-link {
  color: var(--color-accent);
  text-shadow: 0 0 15px var(--color-accent-glow);
  font-weight: 600;
}


/* ============================================================================
   FORM ELEMENTS IN CARDS
   ============================================================================ */

/* Ensure form inputs don't blend with card backgrounds */
.theme-modern .contact-form-wrapper .form-input,
.theme-modern .contact-form-wrapper .form-control {
  background: rgba(var(--color-background-rgb), 0.6);
  border: 2px solid var(--color-border);
}

.theme-creative .contact-form-wrapper .form-input,
.theme-creative .contact-form-wrapper .form-control {
  background: rgba(var(--color-background-rgb), 0.7);
  border: 2px solid color-mix(in srgb, var(--color-primary) 40%, var(--color-border) 60%);
}

.theme-threed .contact-form-wrapper .form-input,
.theme-threed .contact-form-wrapper .form-control {
  background: rgba(var(--color-background-rgb), 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid color-mix(in srgb, var(--color-accent) 30%, var(--color-border) 70%);
}


/* ============================================================================
   RESPONSIVE OPTIMIZATIONS
   ============================================================================ */

@media (max-width: 768px) {
  /* Simplify animations on mobile */
  .theme-creative .btn-primary::before,
  .theme-threed .btn-primary::before,
  .theme-threed .service-icon::before {
    animation: none;
  }

  /* Ensure tap targets remain prominent */
  .btn {
    min-height: 48px;
    padding: 0.875rem 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Disable all animations */
  .theme-creative .btn-primary::before,
  .theme-creative .hero .btn-primary,
  .theme-threed .btn-primary::before,
  .theme-threed .service-icon::before {
    animation: none !important;
  }
}