@import url("https://api.fontshare.com/v2/css?f[]=satoshi@700,500,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap");

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

/* CSS Custom Properties for Theming */
:root {
  /* Warm Terminal Theme */
  --color-bg-deep: #0c0a09;
  --color-bg-surface: #1c1917;
  --color-bg-elevated: #292524;
  --color-bg-hover: #44403c;

  --color-text-primary: #fafaf9;
  --color-text-secondary: #a8a29e;
  --color-text-tertiary: #78716c;
  --color-text-muted: #57534e;

  --color-border-subtle: #292524;
  --color-border-default: #44403c;
  --color-border-strong: #57534e;

  --color-accent: #e07256;
  --color-accent-hover: #c85a42;
  --color-accent-subtle: rgba(224, 114, 86, 0.12);

  --color-success: #84cc16;
  --color-info: #38bdf8;
  --color-warning: #fbbf24;
  --color-error: #ef4444;

  --radius-warm: 12px;
  --radius-warm-lg: 16px;
}

@layer base {
  html {
    @apply antialiased;
  }

  body {
    @apply font-sans bg-warm-bg-deep text-warm-text-primary min-h-screen;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    overflow-x: hidden;
  }

  /* Subtle grain texture overlay */
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
  }

  a {
    @apply text-warm-accent no-underline transition-colors duration-200;
  }

  a:hover {
    @apply text-warm-accent-hover;
  }

  code {
    @apply font-mono bg-warm-bg-elevated text-warm-accent px-1.5 py-0.5 rounded-lg text-sm;
  }

  ::selection {
    @apply bg-warm-accent/30;
  }
}

@layer components {
  /* Surface card */
  .surface-card {
    @apply bg-warm-bg-surface border border-warm-border-subtle rounded-warm;
  }

  /* Elevated card with hover */
  .elevated-card {
    @apply bg-warm-bg-surface border border-warm-border-subtle rounded-warm transition-all duration-200;
  }

  .elevated-card:hover {
    @apply border-warm-border-default bg-warm-bg-elevated;
  }

  /* Gradient text effect */
  .gradient-text {
    background: linear-gradient(135deg, #e07256 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Primary button */
  .btn-primary {
    @apply inline-flex items-center gap-2 px-4 py-2 rounded-warm text-sm font-medium
           bg-warm-accent text-stone-950
           hover:bg-warm-accent-hover hover:text-stone-950 hover:shadow-lg hover:shadow-warm-accent/25 hover:-translate-y-0.5
           transition-all duration-200;
  }

  /* Secondary button */
  .btn-secondary {
    @apply inline-flex items-center gap-2 px-4 py-2 rounded-warm text-sm font-medium
           bg-warm-bg-elevated text-warm-text-primary border border-warm-border-subtle
           hover:bg-warm-bg-hover hover:border-warm-border-default transition-all duration-200;
  }

  /* Added button state */
  .btn-added {
    @apply inline-flex items-center gap-2 px-4 py-2 rounded-warm text-sm font-medium
           bg-warm-accent/20 text-warm-accent border border-warm-accent/30
           hover:bg-warm-accent/30 transition-all duration-200;
  }

  /* Ghost button */
  .btn-ghost {
    @apply inline-flex items-center gap-2 px-4 py-2 rounded-warm text-sm font-medium
           text-warm-text-secondary
           hover:text-warm-text-primary hover:bg-warm-bg-elevated transition-all duration-200;
  }

  /* Input */
  .input-warm {
    @apply w-full bg-warm-bg-elevated border border-warm-border-subtle rounded-warm
           px-4 py-2 text-warm-text-primary placeholder:text-warm-text-muted
           focus:outline-none focus:border-warm-accent transition-colors duration-200;
  }

  /* Icon button */
  .icon-btn {
    @apply flex items-center justify-center w-8 h-8 rounded-lg
           text-warm-text-secondary hover:bg-warm-bg-elevated hover:text-warm-text-primary
           transition-all duration-200;
  }

  /* Added to cart state */
  .icon-btn.added {
    @apply bg-warm-accent/20 text-warm-accent;
  }

  .icon-btn.added:hover {
    @apply bg-warm-accent/30;
  }

  /* Filter pill */
  .filter-pill {
    @apply flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium
           bg-warm-bg-elevated text-warm-text-secondary border border-warm-border-subtle
           hover:text-warm-text-primary hover:border-warm-border-default
           transition-all duration-200 cursor-pointer;
  }

  .filter-pill.active {
    @apply bg-warm-accent text-warm-bg-deep border-warm-accent;
  }

  /* Type badges */
  .badge-agent {
    @apply px-2 py-0.5 rounded-full text-2xs font-medium bg-warm-info/10 text-warm-info border border-warm-info/20;
  }

  .badge-command {
    @apply px-2 py-0.5 rounded-full text-2xs font-medium bg-warm-warning/10 text-warm-warning border border-warm-warning/20;
  }

  .badge-mcp {
    @apply px-2 py-0.5 rounded-full text-2xs font-medium bg-purple-500/10 text-purple-400 border border-purple-500/20;
  }

  .badge-setting {
    @apply px-2 py-0.5 rounded-full text-2xs font-medium bg-warm-text-muted/10 text-warm-text-secondary border border-warm-text-muted/20;
  }

  .badge-hook {
    @apply px-2 py-0.5 rounded-full text-2xs font-medium bg-pink-500/10 text-pink-400 border border-pink-500/20;
  }

  .badge-skill {
    @apply px-2 py-0.5 rounded-full text-2xs font-medium bg-warm-accent/10 text-warm-accent border border-warm-accent/20;
  }

  /* Cart items */
  .cart-item {
    @apply flex items-center gap-3 p-3 bg-warm-bg-elevated border border-warm-border-subtle rounded-warm mb-2
           hover:border-warm-border-default transition-all duration-200;
  }

  .cart-item-icon {
    @apply text-warm-accent text-lg;
  }

  .cart-item-name {
    @apply flex-1 font-mono text-sm text-warm-text-primary truncate;
  }

  .cart-item-remove {
    @apply flex items-center justify-center w-7 h-7 rounded-lg text-warm-text-tertiary
           hover:text-warm-error hover:bg-warm-error/10 transition-all cursor-pointer;
  }

  /* Wizard option card */
  .wizard-option {
    @apply bg-warm-bg-elevated border border-warm-border-subtle rounded-warm-lg p-5
           cursor-pointer transition-all duration-200 relative;
  }

  .wizard-option:hover {
    @apply border-warm-accent bg-warm-accent-subtle;
    transform: translateY(-2px);
  }

  /* Stack card */
  .stack-card {
    @apply bg-warm-bg-surface border border-warm-border-subtle rounded-warm p-5
           transition-all duration-200 cursor-pointer;
  }

  .stack-card:hover {
    @apply border-warm-border-default;
    transform: translateY(-2px);
  }

  /* Blog card */
  .blog-card {
    @apply bg-warm-bg-surface border border-warm-border-subtle rounded-warm-lg p-6
           transition-all duration-300 cursor-pointer relative overflow-hidden;
  }

  .blog-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      transparent 0%,
      rgba(224, 114, 86, 0.03) 50%,
      transparent 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .blog-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      repeating-linear-gradient(
        0deg,
        transparent,
        transparent 19px,
        rgba(224, 114, 86, 0.06) 19px,
        rgba(224, 114, 86, 0.06) 20px
      ),
      repeating-linear-gradient(
        90deg,
        transparent,
        transparent 19px,
        rgba(224, 114, 86, 0.06) 19px,
        rgba(224, 114, 86, 0.06) 20px
      );
    opacity: 0;
    animation: none;
    pointer-events: none;
  }

  .blog-card:hover {
    @apply border-warm-accent/30 bg-warm-bg-elevated;
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(224, 114, 86, 0.12);
  }

  .blog-card:hover::before {
    opacity: 1;
  }

  .blog-card:hover::after {
    opacity: 1;
    animation: grid-pulse 0.6s ease-out;
  }

  @keyframes grid-pulse {
    0% {
      opacity: 0;
      transform: scale(0.95);
    }
    50% {
      opacity: 1;
      transform: scale(1);
    }
    100% {
      opacity: 0.6;
      transform: scale(1);
    }
  }

  /* Tag badge */
  .tag-badge {
    @apply px-2.5 py-1 rounded-full text-xs font-medium
           bg-warm-bg-elevated text-warm-text-tertiary border border-warm-border-subtle
           transition-colors duration-200;
  }

  /* Toast notification */
  .toast-notification {
    @apply fixed bottom-6 right-6 bg-warm-bg-elevated border border-warm-border-default rounded-warm
           px-4 py-3 shadow-xl z-50 flex items-center gap-3 text-warm-text-primary;
    animation: slide-up 0.3s ease-out;
  }

  @keyframes slide-up {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* Modal overlay */
  .modal-overlay {
    @apply fixed inset-0 bg-black/60 z-40 flex items-center justify-center;
    backdrop-filter: blur(4px);
  }

  /* Sidebar overlay */
  .sidebar-overlay {
    @apply fixed inset-0 bg-black/40 z-40;
    backdrop-filter: blur(2px);
  }

  /* Slide in right animation */
  .slide-in-right {
    animation: slide-in-right 0.3s ease-out;
  }

  @keyframes slide-in-right {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(224, 114, 86, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(224, 114, 86, 0.4);
}

/* Line clamp utility */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Screen reader only (accessibility) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}