/* 
  Design System Fundamentals (Ref: DesignAnforderungen.md)
  - Colors: HSL base for easy manipulation
  - Typography: Inter/Roboto (sans-serif)
  - Glassmorphism & Depth 
*/

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

:root {
  /* Core Colors */
  --bg-dark: 220 20% 10%; /* Very dark gray/blue */
  
  /* Primary Scale (Blue/Cyan) */
  --primary-400: 190 90% 60%;
  --primary-500: 190 90% 50%;
  --primary-600: 190 90% 40%;
  
  /* Secondary Scale (Purple) */
  --secondary-900: 270 50% 20%;
  
  /* Surface Colors */
  --surface-glass: rgba(255, 255, 255, 0.03);
  --surface-border: rgba(255, 255, 255, 0.1);
  
  /* Timing */
  --transition-fast: 150ms;
  --transition-smooth: 300ms;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: hsl(var(--bg-dark));
  color: white;
  margin: 0;
  overflow-x: hidden;
}

/* Base Tailwind-like Utility Classes & Reset */
.container { width: 100%; margin-left: auto; margin-right: auto; }
@media (min-width: 640px) { .container { max-width: 640px; } }
@media (min-width: 768px) { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
@media (min-width: 1440px) { .container { max-width: 1440px; } }

/* Component Styles */

.source-item {
  background: var(--surface-glass);
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  padding: 12px;
  transition: all var(--transition-smooth) ease;
}

.source-item:focus-within {
  border-color: hsl(var(--primary-500) / 0.5);
  box-shadow: 0 0 0 2px hsl(var(--primary-500) / 0.2);
}

.source-input {
  width: 100%;
  background: transparent;
  border: none;
  color: white;
  font-family: monospace;
  font-size: 13px;
  outline: none;
  resize: vertical;
  min-height: 40px;
}

.source-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* Animations (Design System Step III) */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Custom Scrollbar for sleekness */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.02);
}
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.2);
}

/* Responsive iframe container */
.video-responsive-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}