/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --color-accent: #6C63FF;
  --color-accent-light: #8B85FF;
  --color-surface: #111111;
  --color-surface-2: #1a1a1a;
  --color-border: rgba(255,255,255,0.08);
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-cairo), 'Cairo', sans-serif;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.animate-fade-up { animation: fadeUp 0.5s ease forwards; }

.gradient-text {
  background: linear-gradient(135deg, #fff 0%, var(--color-accent-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glass {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.06);
}

.btn-primary {
  @apply bg-[#6C63FF] hover:bg-[#5a52e0] text-white px-6 py-3 rounded-xl font-medium transition-all duration-200 hover:scale-[1.02] active:scale-[0.98];
}

.btn-secondary {
  @apply bg-white/5 hover:bg-white/10 text-white px-6 py-3 rounded-xl font-medium transition-all duration-200 border border-white/10;
}

.card {
  @apply bg-white/[0.03] border border-white/[0.06] rounded-2xl p-6;
}

/* Preview iframe */
.preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 12px;
}