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

/* ─── Design System ─────────────────────────────────────────────── */
:root {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ─── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

.dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════
   GLASS EFFECTS
   ═══════════════════════════════════════════════════════════════════ */
.glass {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.dark .glass {
  background: rgba(22, 22, 31, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.glass:not(.dark .glass) {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.glass-strong {
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}

.dark .glass-strong {
  background: rgba(22, 22, 31, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.glass-strong:not(.dark .glass-strong) {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* ═══════════════════════════════════════════════════════════════════
   GLOW EFFECTS
   ═══════════════════════════════════════════════════════════════════ */
.glow-indigo {
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.15), 0 0 60px rgba(99, 102, 241, 0.05);
}

.glow-emerald {
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.15), 0 0 60px rgba(16, 185, 129, 0.05);
}

.glow-violet {
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.15), 0 0 60px rgba(139, 92, 246, 0.05);
}

/* ═══════════════════════════════════════════════════════════════════
   ANIMATED GRADIENT BACKGROUND
   ═══════════════════════════════════════════════════════════════════ */
.gradient-bg {
  position: relative;
}

.dark .gradient-bg {
  background: linear-gradient(135deg, #0a0a0f 0%, #111128 30%, #0a0a0f 60%, #0f1020 100%);
}

.gradient-bg:not(.dark .gradient-bg) {
  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 30%, #f8fafc 60%, #f0f4ff 100%);
}

.gradient-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
}

.dark .gradient-bg::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.04) 0%, transparent 60%);
}

.gradient-bg:not(.dark .gradient-bg)::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.04) 0%, transparent 50%);
}

/* ═══════════════════════════════════════════════════════════════════
   ANIMATED GRADIENT TEXT
   ═══════════════════════════════════════════════════════════════════ */
.gradient-text {
  background: linear-gradient(135deg, #818cf8 0%, #6366f1 30%, #a78bfa 60%, #818cf8 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 6s ease-in-out infinite;
}

@keyframes gradient-shift {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════════ */
@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.animate-float {
  animation: float 5s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float 5s ease-in-out 1s infinite;
}

.animate-float-slow {
  animation: float 7s ease-in-out 0.5s infinite;
}

@keyframes pulse-glow {

  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 0.8;
  }
}

.animate-pulse-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slide-up 0.6s ease-out forwards;
}

.animate-slide-up-delay-1 {
  animation: slide-up 0.6s ease-out 0.1s forwards;
  opacity: 0;
}

.animate-slide-up-delay-2 {
  animation: slide-up 0.6s ease-out 0.2s forwards;
  opacity: 0;
}

.animate-slide-up-delay-3 {
  animation: slide-up 0.6s ease-out 0.3s forwards;
  opacity: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   BUTTON STYLES
   ═══════════════════════════════════════════════════════════════════ */
.btn-primary {
  @apply inline-flex items-center justify-center gap-2 font-semibold rounded-xl transition-all duration-200;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: white;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.25);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #7c7ff5, #6366f1);
  box-shadow: 0 6px 25px rgba(99, 102, 241, 0.35);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-primary:disabled {
  opacity: 0.5;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  @apply inline-flex items-center justify-center gap-2 font-semibold rounded-xl transition-all duration-200;
}

.dark .btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: #9a9ab0;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.dark .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f0f0f5;
  border-color: rgba(255, 255, 255, 0.12);
}

.btn-secondary:not(.dark .btn-secondary) {
  background: rgba(0, 0, 0, 0.03);
  color: #64748b;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.btn-secondary:not(.dark .btn-secondary):hover {
  background: rgba(0, 0, 0, 0.06);
  color: #1e293b;
  border-color: rgba(0, 0, 0, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════
   INPUT STYLES
   ═══════════════════════════════════════════════════════════════════ */
.input-dark {
  @apply rounded-xl px-4 py-3 text-sm outline-none transition-all duration-200;
}

.dark .input-dark {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #f0f0f5;
}

.dark .input-dark::placeholder {
  color: #5a5a72;
}

.dark .input-dark:focus {
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  background: rgba(255, 255, 255, 0.06);
}

.input-dark:not(.dark .input-dark) {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #1e293b;
}

.input-dark:not(.dark .input-dark)::placeholder {
  color: #94a3b8;
}

.input-dark:not(.dark .input-dark):focus {
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
  background: white;
}

/* ═══════════════════════════════════════════════════════════════════
   CARD STYLES
   ═══════════════════════════════════════════════════════════════════ */
.card-dark {
  border-radius: 16px;
  transition: all 0.3s ease;
}

.dark .card-dark {
  background: #16161f;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.dark .card-dark:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: #1c1c28;
}

.card-dark:not(.dark .card-dark) {
  background: white;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.card-dark:not(.dark .card-dark):hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* ═══════════════════════════════════════════════════════════════════
   TIPTAP EDITOR
   ═══════════════════════════════════════════════════════════════════ */
.ProseMirror {
  min-height: 250px;
  padding: 20px 24px;
  outline: none;
  font-size: 14px;
  line-height: 1.75;
}

.dark .ProseMirror {
  color: #f0f0f5;
}

.ProseMirror:not(.dark .ProseMirror) {
  color: #1e293b;
}

.ProseMirror p {
  margin: 0.5em 0;
}

.ProseMirror a {
  color: #818cf8;
  text-decoration: underline;
}

.dark .ProseMirror strong {
  color: #f0f0f5;
}

.ProseMirror ul,
.ProseMirror ol {
  padding-left: 24px;
  margin: 0.5em 0;
}

/* ═══════════════════════════════════════════════════════════════════
   BADGE STYLES
   ═══════════════════════════════════════════════════════════════════ */
.badge {
  @apply inline-flex items-center gap-1.5 text-xs font-medium px-3 py-1 rounded-full;
}

.dark .badge {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #9a9ab0;
}

.badge:not(.dark .badge) {
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.12);
  color: #6366f1;
}

/* ═══════════════════════════════════════════════════════════════════
   SEPARATOR
   ═══════════════════════════════════════════════════════════════════ */
.separator {
  height: 1px;
}

.dark .separator {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
}

.separator:not(.dark .separator) {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent);
}

/* ═══════════════════════════════════════════════════════════════════
   THEME-AWARE COLOR TOKENS (used in components via CSS variables)
   ═══════════════════════════════════════════════════════════════════ */
.dark {
  --c-bg-primary: #0a0a0f;
  --c-bg-sidebar: #0d0d14;
  --c-bg-card: #16161f;
  --c-bg-elevated: #1e1e2a;
  --c-bg-subtle: rgba(255, 255, 255, 0.03);
  --c-border: rgba(255, 255, 255, 0.06);
  --c-border-hover: rgba(255, 255, 255, 0.12);
  --c-text-primary: #f0f0f5;
  --c-text-secondary: #9a9ab0;
  --c-text-muted: #5a5a72;
  --c-editor-bg: #12121a;
}

:root:not(.dark) {
  --c-bg-primary: #ffffff;
  --c-bg-sidebar: #f8fafc;
  --c-bg-card: #ffffff;
  --c-bg-elevated: #f1f5f9;
  --c-bg-subtle: rgba(0, 0, 0, 0.02);
  --c-border: #e2e8f0;
  --c-border-hover: #cbd5e1;
  --c-text-primary: #0f172a;
  --c-text-secondary: #334155;
  --c-text-muted: #64748b;
  --c-editor-bg: #fafbfc;
  /* --- NEW PREMIUM UI ADDITIONS --- */
  .btn-primary-new {
    @apply flex items-center justify-center gap-2 bg-gradient-to-r from-indigo-500 to-violet-600 hover:from-indigo-400 hover:to-violet-500 text-white font-bold py-3 px-6 rounded-2xl transition-all shadow-lg shadow-indigo-500/20 active:scale-95 disabled:opacity-50 disabled:pointer-events-none;
  }

  .btn-secondary-new {
    @apply flex items-center justify-center gap-2 bg-[var(--c-bg-subtle)] border border-[var(--c-border)] hover:border-indigo-500/30 text-[var(--c-text-primary)] font-bold py-3 px-6 rounded-2xl transition-all active:scale-95 disabled:opacity-50;
  }

  .nav-link-new {
    @apply flex items-center gap-2 px-4 py-2 text-xs font-bold text-[var(--c-text-muted)] hover:text-indigo-500 rounded-xl transition-all;
  }
  .nav-link-new.active {
    @apply text-indigo-500 bg-indigo-500/5;
  }

  .nav-item-new {
    @apply flex items-center gap-3 w-full px-4 py-3 rounded-xl text-sm font-bold transition-all text-[var(--c-text-secondary)] hover:bg-[var(--c-bg-subtle)] hover:text-[var(--c-text-primary)];
  }
  .nav-item-new.active {
    @apply bg-indigo-500/10 text-indigo-500;
  }

  .card-dark {
    @apply bg-[var(--c-bg-primary)] border border-[var(--c-border)] rounded-3xl transition-all;
  }
  
  .gradient-bg {
    @apply min-h-screen bg-[var(--c-bg-primary)] text-[var(--c-text-primary)];
  }

  /* Animated entrance */
  @keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-slide-up { animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
  .animate-slide-up-delay-1 { 
    opacity: 0;
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards; 
  }

  /* Glass hover effect */
  .hover-glow:hover {
    @apply border-indigo-500/30 shadow-2xl shadow-indigo-500/10 -translate-y-1;
  }
}