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

/* CSS Variables for gradient colors */
:root {
  --accent-primary: #80cbc4;
  --accent-secondary: #a5d6a7;
}

/* Enable text selection - strengthened rules with higher specificity */
@layer base {
  html, body, div, span, p, h1, h2, h3, h4, h5, h6,
  ul, ol, li, article, aside, details, figcaption, figure,
  footer, header, main, nav, section, summary {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    -webkit-user-drag: auto !important;
  }

  *:not([data-no-select]) {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
  }

  /* Allow links and interactive elements to have pointer cursor */
  a, button, [role="button"], .cursor-pointer {
    cursor: pointer !important;
  }
}

/* Mobile Menu Styles */
@layer components {
  /* Mobile menu transitions */
  [data-mobile-menu-target="menu"] {
    transition: opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
  }

  [data-mobile-menu-target="menu"]:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
  }

  /* Mobile menu items */
  [data-mobile-menu-target="menu"] a {
    position: relative;
    display: block;
    width: 100%;
  }

  [data-mobile-menu-target="menu"] a:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 2px;
    background-color: #80cbc4;
    transition: width 0.3s ease;
  }

  [data-mobile-menu-target="menu"] a:hover:after {
    width: 100%;
  }

  /* Menu icon transitions */
  [data-mobile-menu-target="openIcon"],
  [data-mobile-menu-target="closeIcon"] {
    transition: opacity 0.2s ease;
  }
}

@layer components {
  .terminal-bg {
    @apply bg-[#eef2f7] border border-slate-200 shadow-sm;
  }

  .terminal-header {
    @apply px-3 pt-2 flex items-center border-b border-slate-200;
  }

  .btn-primary {
    @apply bg-[#80cbc4] hover:bg-[#a5d6a7] text-gray-700 transition-colors;
  }

  .console-text {
    @apply text-green-400;
  }

  .card-hover {
    @apply transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 hover:scale-[1.02];
  }
}

.gradient-text {
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: text;
  display: inline-block;
  position: relative;
}

/* Enhanced button hover effects */
@layer components {
  .btn-cta-primary {
    @apply relative overflow-hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .btn-cta-primary:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 20px 40px rgba(128, 203, 196, 0.4);
  }
  
  .btn-cta-primary:active {
    transform: translateY(-2px) scale(1.02);
  }
}