@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);
  }

  .badge-tag {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium whitespace-nowrap;
  }

  .badge-tag-green {
    background-color: rgba(34, 197, 94, 0.15);
    color: var(--color-success);
    border: 1px solid rgba(34, 197, 94, 0.3);
  }

  .badge-tag-blue {
    background-color: rgba(59, 130, 246, 0.15);
    color: var(--color-info);
    border: 1px solid rgba(59, 130, 246, 0.3);
  }

  .badge-tag-amber {
    background-color: rgba(245, 158, 11, 0.15);
    color: var(--color-warning);
    border: 1px solid rgba(245, 158, 11, 0.3);
  }

  .badge-tag-purple {
    background-color: rgba(168, 85, 247, 0.15);
    color: var(--color-accent-light);
    border: 1px solid rgba(168, 85, 247, 0.3);
  }

  .badge-tag-zinc {
    background-color: rgba(113, 113, 122, 0.15);
    color: var(--color-text-muted);
    border: 1px solid rgba(113, 113, 122, 0.3);
  }

  .article-body {
    @apply text-lg leading-8 text-zinc-300;
  }

  .article-body > *:first-child {
    margin-top: 0;
  }

  .article-body h2 {
    @apply mt-14 scroll-mt-24 text-3xl font-semibold leading-tight text-white;
  }

  .article-body h3 {
    @apply mt-10 scroll-mt-24 text-2xl font-semibold leading-tight text-white;
  }

  .article-body p {
    @apply mt-5;
  }

  .article-body ul,
  .article-body ol {
    @apply mt-5 space-y-3 pl-6;
  }

  .article-body ul {
    @apply list-disc;
  }

  .article-body ol {
    @apply list-decimal;
  }

  .article-body li::marker {
    color: var(--color-accent-light);
  }

  .article-body a {
    @apply font-medium text-purple-300 underline decoration-purple-400/50 underline-offset-4 hover:text-purple-200;
  }

  .article-body strong {
    @apply font-semibold text-white;
  }

  .article-body blockquote {
    @apply mt-7 border-l-4 border-purple-400 bg-purple-500/10 px-6 py-4 text-zinc-200;
  }

  .article-body code {
    @apply rounded bg-sortie-card px-1.5 py-0.5 font-mono text-[0.9em] text-purple-200;
  }

  .article-body pre {
    @apply mt-7 overflow-x-auto rounded-xl border border-sortie-border bg-zinc-950 p-5 text-sm leading-7;
  }

  .article-body pre code {
    @apply bg-transparent p-0 text-zinc-200;
  }

  .article-body table {
    @apply mt-8 block w-full overflow-x-auto border-collapse text-left text-base;
  }

  .article-body table th {
    @apply border border-sortie-border bg-sortie-card p-3 font-semibold text-white;
  }

  .article-body table td {
    @apply border border-sortie-border p-3 align-top text-zinc-300;
  }

  .article-body .table-wrapper {
    @apply overflow-x-auto;
  }

  .article-body hr {
    @apply my-12 border-sortie-border;
  }

  .dashboard-surface {
    @apply rounded-xl;
    background-color: rgba(45, 45, 68, 0.82);
    border: 1px solid rgba(168, 85, 247, 0.18);
  }

  .dashboard-stat {
    @apply flex items-center gap-3 rounded-xl px-4 py-4 sm:px-5;
    background-color: rgba(45, 45, 68, 0.82);
    border: 1px solid rgba(168, 85, 247, 0.18);
  }

  .dashboard-stat-icon {
    @apply w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0;
  }

  .dashboard-eyebrow {
    @apply text-xs font-medium uppercase tracking-wider text-zinc-500;
  }

  .label-inventory-dialog::backdrop {
    background: rgba(9, 9, 18, 0.76);
    backdrop-filter: blur(4px);
  }

  .label-inventory-dialog[open] {
    animation: dashboard-dialog-in 140ms ease-out;
  }

  @keyframes dashboard-dialog-in {
    from { opacity: 0; transform: translateY(8px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
}