/* RedX Media Manager - Custom CSS Design System */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg-dark: #08090d;
  --bg-card: #12141e;
  --bg-[#141520]: #141520;
  --border-color: rgba(255, 255, 255, 0.08);
  --border-red: rgba(239, 68, 68, 0.4);
  --red-primary: #ef4444;
  --red-accent: #ff1744;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-dark);
  color: #f1f5f9;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0d0e14;
}
::-webkit-scrollbar-thumb {
  background: #232736;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--red-primary);
}

/* Glassmorphism utility */
.redx-glass {
  background: rgba(18, 20, 30, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
}

.redx-glass-hover:hover {
  border-color: var(--border-red);
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.15);
}

.glow-red {
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.35);
}

.glow-text {
  text-shadow: 0 0 15px rgba(239, 68, 68, 0.6);
}

/* CropperJS Custom Styling for 3:4 Aspect Ratio */
.cropper-view-box,
.cropper-face {
  border-radius: 8px;
  outline: 2px solid #ef4444 !important;
  outline-color: rgba(239, 68, 68, 0.95) !important;
}

.cropper-line, 
.cropper-point {
  background-color: #ef4444 !important;
}

/* Aspect ratio 3:4 container helper */
.aspect-3-4 {
  aspect-ratio: 3 / 4;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fadeIn {
  animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

.animate-pulseGlow {
  animation: pulseGlow 2.5s infinite;
}