@tailwind base;
@tailwind components;
@tailwind utilities;

/* Define a simple text-auto-invert utility */
@layer utilities {
  .text-auto-invert {
    color: white;
    mix-blend-mode: difference;
  }

  .animate-spin-slow {
    animation: spin 8s linear infinite;
  }

  /* Animation delays for staggered effects */
  .animation-delay-150 {
    animation-delay: 150ms;
  }
  
  .animation-delay-300 {
    animation-delay: 300ms;
  }

  /* Runic text styling */
  .runic-text {
    font-family: 'Norse', serif;
    letter-spacing: 0.1em;
  }

  /* Enhanced ice crystal pattern with subtle Nordic elements */
  .ice-pattern {
    background-image: 
      radial-gradient(circle at 20% 80%, rgba(248, 255, 254, 0.15) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(230, 243, 255, 0.15) 0%, transparent 50%),
      radial-gradient(circle at 50% 50%, rgba(127, 179, 211, 0.05) 0%, transparent 70%),
      linear-gradient(45deg, transparent 49%, rgba(192, 200, 209, 0.03) 50%, transparent 51%);
    background-size: 200px 200px, 150px 150px, 300px 300px, 50px 50px;
  }

  /* Aurora glow effects */
  .aurora-glow-blue {
    box-shadow: 0 0 20px rgba(127, 179, 211, 0.3);
  }
  
  .aurora-glow-green {
    box-shadow: 0 0 20px rgba(100, 181, 166, 0.3);
  }
  
  .aurora-glow-purple {
    box-shadow: 0 0 20px rgba(142, 124, 195, 0.3);
  }

  /* Nordic hover float effect */
  .nordic-float:hover {
    animation: float 2s ease-in-out infinite;
  }
}

/* Simple alternating section styling with inversed heading colors */
section:not([class*="bg-"]):nth-child(even) {
  @apply bg-primary;
  
  /* Dark background gets light text */
  h1, h2, h3, h4, h5, h6 {
    @apply text-header-bg/95;
  }
}

section:not([class*="bg-"]):nth-child(odd) {
  @apply bg-header-bg/95; 
  
  /* Light background gets dark text */
  /* h1, h2, h3, h4, h5, h6 {
    @apply text-red-500;
  } */
}

/* Alternative: For custom background sections, use the text-auto-invert utility */
section[class*="bg-"] h3,
section[class*="bg-"] h6 {
  @apply text-auto-invert;
}

@layer components {
  /* Default Button Styles */
  button,
  a[role="button"] {
    @apply bg-primary-button-bg 
           text-primary-button-text 
           px-4 py-2 
           rounded 
           transition-colors 
           duration-200
           inline-flex 
           items-center 
           justify-center;

    &:hover {
      @apply bg-primary-button-hover;
    }
  }

  /* Header Styles */
  header {
    @apply bg-header-bg text-header-text;

    /* Header Links */
    a:not([role="button"]) {
      @apply text-header-link;
      &:hover {
        @apply text-header-link-hover;
      }
    }

    /* Header Buttons */
    button, 
    a[role="button"] {
      @apply bg-header-button-bg text-header-button-text px-4 py-2 rounded;
      &:hover {
        @apply bg-header-button-hover;
      }
    }
  }

  /* Subheader Styles */
  nav.subheader {
    @apply bg-subheader text-subheader-text;

    /* Subheader Links */
    a:not([role="button"]) {
      @apply text-subheader-link;
      &:hover {
        @apply text-subheader-link-hover;
      }
    }

    /* Subheader Buttons */
    button,
    a[role="button"] {
      @apply bg-subheader-button text-subheader-button-text px-4 py-2 rounded;
      &:hover {
        @apply bg-subheader-button-hover;
      }
    }
  }

  footer {
    @apply bg-subheader text-subheader-text;
  }

  /* Seach Input Styles */
  input.search-input {
    @apply bg-search-bg 
           text-search-text
           border border-search-focus-ring
           placeholder-search-placeholder
           focus:outline-none 
           focus:ring-2 
           focus:ring-search-focus-ring
           focus:border-search-focus-border
           hover:border-search-hover-border;
  }

  /* Card Styles */
  .card {
    @apply bg-card-bg 
          border border-card-border 
          rounded-card 
          shadow-md
          ice-pattern;

    /* Enhanced Nordic styling */
    &.nordic-style {
      @apply bg-gradient-to-br from-nordic-ice to-nordic-frost
             border-nordic-silver/30
             shadow-2xl
             transition-all duration-700;

      &:hover {
        @apply shadow-[0_25px_50px_-12px_rgba(27,75,107,0.5)]
               scale-[1.02];
      }
    }

    /* Username Style */
    .username {
      @apply text-card-username 
            font-medium;
    }

    /* Name Style */
    .name {
      @apply text-card-name 
            font-normal;
    }

    /* Icons Style */
    .icon {
      @apply text-card-icon;
    }

    /* Figure/Image Styles */
    .figure {
      &.circle {
        @apply rounded-full;
      }

      img {
        @apply w-full h-full object-cover;
      }
    }
  }

  .tags a {
    @apply bg-tags-bg 
           text-tags-text 
           border border-tags-border 
           rounded-tag
           px-3 py-1
           font-sans
           transition-all duration-200;

    &:hover {
      @apply bg-tags-hover-bg
             text-tags-hover-text
             cursor-pointer;
    }
  }
  
  /* Pagination Styles */
  .pagination {
    @apply flex justify-center items-center gap-2 p-4;
  }

  .pagination a,
  .pagination .current {
    @apply px-4 py-2 rounded-md text-gray-700 no-underline transition-colors border border-gray-300;
  }

  .pagination a:hover {
    @apply bg-gray-200 text-gray-900 border-gray-400;
  }

  .pagination .current {
    @apply bg-gray-800 text-white font-bold border-gray-800;
  }

  .pagination .disabled {
    @apply text-gray-400 bg-gray-100 border-gray-200 cursor-not-allowed;
  } 

}