@import "tailwindcss";

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Bold.woff2') format('woff2');
}

@theme {
  --font-mono: 'JetBrains Mono', monospace;
  --color-bg: #08080f;
  --color-surface: #10101a;
  --color-border: #1a1a2e;
  --color-cyan: #00e5ff;
  --color-green: #00ff88;
  --color-purple: #b388ff;
}

@layer base {
  html {
    scroll-behavior: smooth;
  }

  ::selection {
    background-color: rgba(0, 229, 255, 0.25);
    color: #fff;
  }

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: #08080f;
  }

  ::-webkit-scrollbar-thumb {
    background: #1a1a2e;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #2a2a4e;
  }

  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: #1a1a2e #08080f;
  }
}

@layer components {
  .install-tab {
    cursor: pointer !important;
  }

  .cmd-prompt::before {
    content: '$ ';
    color: var(--color-green);
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
  }

  .terminal-block {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
  }

  .copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
    cursor: pointer !important;
    padding: 0.375rem;
    border-radius: 0.25rem;
    color: #555;
    background: transparent;
    border: 1px solid transparent;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .copy-btn:hover {
    color: var(--color-cyan);
    border-color: rgba(0, 229, 255, 0.2);
    background: rgba(0, 229, 255, 0.05);
  }

  .copy-btn.copied {
    color: var(--color-green);
  }

  .copy-btn svg {
    display: inline-block;
    width: 1rem;
    height: 1rem;
  }

  .img-skeleton {
    position: relative;
    background: var(--color-surface);
  }

  .img-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.03) 40%,
      rgba(255, 255, 255, 0.06) 50%,
      rgba(255, 255, 255, 0.03) 60%,
      transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .img-skeleton.loaded::after {
    opacity: 0;
  }

  .img-skeleton img {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .img-skeleton.loaded img {
    opacity: 1;
  }
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
