/* Tailwind CSS base styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom color palette */
:root {
  --primary: #7f5af0;
  --accent: #2cb67d;
  --bg-1: #1a1b26;
  --bg-2: #2a2b3a;
  --text: #e0e0ff;
  --muted: #ced4da;
  --card-bg: rgba(44, 43, 58, 0.4);
  --border: rgba(127, 90, 240, 0.2);
}

[data-theme="light"] {
  --bg-1: #f5f5f5;
  --bg-2: #e0e0e0;
  --text: #212529;
  --muted: #6c757d;
  --card-bg: rgba(255, 255, 255, 0.8);
  --border: rgba(0, 0, 0, 0.1);
}

/* Tailwind customizations */
@layer base {
  body {
    @apply font-sans antialiased bg-gradient-to-br from-[var(--bg-1)] to-[var(--bg-2)] text-[var(--text)] m-0 p-0;
  }

  h1 {
    @apply text-xl md:text-2xl font-semibold mb-4;
  }

  h2, h3, h4, h5 {
    @apply font-semibold mb-3;
  }

  h3 {
    @apply text-lg md:text-xl;
  }

  h5 {
    @apply text-sm md:text-base;
  }
}

@layer components {
  .card, .review-card, .login-card {
    @apply bg-[var(--card-bg)] border border-dashed border-[var(--border)] rounded-xl shadow-md p-3 m-2 transition-transform duration-200 hover:-translate-y-0.5;
  }

  .card-body {
    @apply p-3;
  }

  .card-text {
    @apply text-sm leading-relaxed text-[var(--text)] text-left;
  }

  .text-muted {
    @apply text-[var(--muted)];
  }

  .btn-primary {
    @apply bg-[var(--primary)] text-white font-medium rounded-lg px-3 py-1.5 transition-all duration-200 hover:bg-[var(--accent)] hover:scale-105;
  }

  .btn-outline {
    @apply border border-[var(--text)] text-[var(--text)] font-medium rounded-lg px-3 py-1.5 transition-all duration-200 hover:bg-[var(--text)] hover:text-[var(--bg-1)] hover:scale-105;
  }

  .action-btn {
    @apply px-2 py-1 text-xs rounded-md font-medium;
  }

  .action-btn-primary {
    @apply bg-[var(--primary)] text-white hover:bg-[var(--accent)];
  }

  .action-btn-secondary {
    @apply bg-[var(--card-bg)] border border-dashed border-[var(--border)] text-[var(--text)] hover:bg-[var(--bg-2)];
  }

  .action-btn-danger {
    @apply bg-red-500/10 border border-dashed border-red-500/30 text-red-400 hover:bg-red-500/20;
  }

  .action-btn-warning {
    @apply bg-yellow-500/10 border border-dashed border-yellow-500/30 text-yellow-400 hover:bg-yellow-500/20;
  }

  .form-control, .form-select {
    @apply bg-[var(--card-bg)] border border-[var(--border)] text-[var(--text)] rounded-md px-2 py-1 text-sm focus:ring-1 focus:ring-[var(--primary)] focus:border-[var(--primary)] transition-all;
  }

  .form-label {
    @apply text-xs text-[var(--muted)] font-normal;
  }

  .badge {
    @apply text-xs px-1.5 py-0.5 rounded-full;
  }

  .submit-btn {
    @apply bg-[var(--primary)] text-white font-medium rounded-lg px-4 py-2 transition-all duration-200 hover:bg-[var(--accent)] hover:scale-105;
  }

  .table {
    @apply w-full text-xs text-[var(--text)];
  }

  .table th, .table td {
    @apply py-1.5 px-3 border-b border-[var(--border)];
  }

  .canvas-container {
    @apply w-full max-h-64;
  }

  .telegram-icon {
    @apply w-6 h-6;
  }
}

/* Accessibility */
@layer utilities {
  a, button, input, select, textarea {
    @apply outline-none focus:outline-2 focus:outline-[var(--primary)] transition-outline;
  }
}

/* Responsive adjustments */
@layer utilities {
  @media (max-width: 640px) {
    .card, .review-card {
      @apply m-1 p-2;
    }

    .card-body {
      @apply p-2;
    }

    .card-text {
      @apply text-xs;
    }

    h1 {
      @apply text-lg;
    }

    h3 {
      @apply text-base;
    }

    .table {
      @apply text-[10px];
    }
  }

  @media (min-width: 1024px) {
    .card, .review-card {
      @apply m-4;
    }

    .card-body {
      @apply p-4;
    }

    .card-text {
      @apply text-sm;
    }
  }
}

/* Animation for skeleton loader */
@keyframes pulse {
  0% { opacity: 0.2; }
  50% { opacity: 0.4; }
  100% { opacity: 0.2; }
}

.placeholder {
  @apply bg-[var(--muted)] opacity-20 animate-pulse;
}