@import "tailwindcss";

/* Sortie.ai Dark + Purple Theme (Claude-inspired) */
@theme {
  /* Primary Backgrounds */
  --color-bg-primary: #1e1e2f;
  --color-bg-secondary: #2d2d44;
  --color-bg-tertiary: #3d3d5c;

  /* Accent Colors */
  --color-accent: #a855f7;
  --color-accent-light: #c084fc;
  --color-accent-dark: #7c3aed;

  /* Text Colors */
  --color-text-primary: #ffffff;
  --color-text-secondary: #a1a1aa;
  --color-text-muted: #71717a;

  /* Status Colors */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* Custom colors for Tailwind */
  --color-sortie-bg: #1e1e2f;
  --color-sortie-card: #2d2d44;
  --color-sortie-hover: #3d3d5c;
  --color-sortie-purple: #a855f7;
  --color-sortie-purple-light: #c084fc;
  --color-sortie-purple-dark: #7c3aed;
  --color-sortie-border: rgba(168, 85, 247, 0.2);
}

/* Base styles */
@layer base {
  html {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
  }
}

/* Component styles */
@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 text-base font-medium text-white rounded-lg transition-all duration-200;
    background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
    box-shadow: 0 4px 14px rgba(168, 85, 247, 0.4);
  }

  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.5);
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center px-6 py-3 text-base font-medium rounded-lg transition-all duration-200;
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-sortie-border);
  }

  .btn-secondary:hover {
    background-color: rgba(168, 85, 247, 0.1);
    border-color: var(--color-accent);
  }

  .card {
    @apply rounded-xl p-6 transition-all duration-200;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-sortie-border);
  }

  .card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.15);
  }

  .gradient-text {
    background: linear-gradient(135deg, #a855f7 0%, #c084fc 50%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .gradient-border {
    position: relative;
    background: var(--color-bg-secondary);
    border-radius: 12px;
  }

  .gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1px;
    background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  .nav-link {
    @apply text-zinc-400 hover:text-white transition-colors duration-200;
  }

  .nav-link.active {
    @apply text-white;
  }

  /* AI chat-style processing indicator */
  .processing-dots {
    display: flex;
    gap: 4px;
  }

  .processing-dots span {
    width: 6px;
    height: 6px;
    background-color: var(--color-accent);
    border-radius: 50%;
    animation: pulse 1.4s infinite ease-in-out both;
  }

  .processing-dots span:nth-child(1) { animation-delay: -0.32s; }
  .processing-dots span:nth-child(2) { animation-delay: -0.16s; }
  .processing-dots span:nth-child(3) { animation-delay: 0s; }

  @keyframes pulse {
    0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
  }

  /* Email classification badges */
  .badge-important {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    background-color: rgba(34, 197, 94, 0.15);
    color: var(--color-success);
    border: 1px solid rgba(34, 197, 94, 0.3);
  }

  .badge-skipped {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    background-color: rgba(113, 113, 122, 0.15);
    color: var(--color-text-muted);
    border: 1px solid rgba(113, 113, 122, 0.3);
  }
}