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

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

/* 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-slate-300;
  }
}

section:not([class*="bg-"]):nth-child(odd) {
  @apply bg-gray-50; 
  
  /* Light background gets dark text */
  h1, h2, h3, h4, h5, h6 {
    @apply text-gray-900;
  }
  
  /* Body text should also be dark */
  p, span, div {
    @apply text-gray-700;
  }
}

/* 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;
    }
  }

  /* Primary Button Variant */
  .btn-primary {
    @apply bg-primary-button-bg text-primary-button-text;
    &: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;
      }
    }

    /* Dropdown Styles */
    ul[x-show] {
      @apply bg-surface-1 border border-border-light;
      
      li a {
        @apply text-text-secondary;
        &:hover {
          @apply bg-surface-2 text-text-primary;
        }
      }
    }
  }

  /* Footer Styles */
  footer {
    @apply bg-footer-bg text-footer-text;

    h2, h3 {
      @apply text-footer-heading font-semibold;
    }

    a {
      @apply text-footer-link;
      &:hover {
        @apply text-footer-link-hover;
      }
    }

    p {
      @apply text-footer-muted;
    }

    hr {
      @apply border-footer-border;
    }

    /* Footer lists */
    ul li {
      @apply text-footer-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;

    /* 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-500 no-underline transition-colors border;
  }

  .pagination a:hover {
    @apply bg-gray-100 text-gray-700;
  }

  .pagination .current {
    @apply bg-primary text-white font-bold;
  }

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

}