/* Design System CSS - Suchflow.de */
@layer components {
  /* Typography Base */
  .ds-text-base { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
  
  /* Headlines System */
  .ds-h1-base {
    @apply ds-text-base tracking-tighter leading-[0.9];
  }
  
  .ds-h1 { 
    @apply ds-h1-base text-4xl md:text-6xl lg:text-8xl font-semibold text-white;
  }
  
  .ds-h1-large { 
    @apply text-5xl md:text-7xl lg:text-9xl;
  }
  
  .ds-h1-small { 
    @apply text-3xl md:text-5xl lg:text-6xl;
  }
  
  /* Color Variants */
  .ds-h1-white { @apply text-white; }
  .ds-h1-slate { @apply text-slate-400; }
  .ds-h1-brand { @apply text-[#38bdf8]; }
  
  /* Weight Variants */
  .ds-h1-light { @apply font-light; }
  .ds-h1-normal { @apply font-normal; }
  .ds-h1-semibold { @apply font-semibold; }
  .ds-h1-bold { @apply font-bold; }
  
  /* Gradient Variant */
  .ds-h1-gradient {
    @apply text-transparent bg-clip-text bg-gradient-to-r from-[#38bdf8] via-white to-[#38bdf8];
  }
  
  /* H2 System */
  .ds-h2 { 
    @apply ds-text-base text-3xl md:text-4xl lg:text-6xl font-semibold text-white leading-tight;
  }
  
  .ds-h2-gradient { 
    @apply ds-h2 text-transparent bg-clip-text bg-gradient-to-r from-[#38bdf8] to-white;
  }
  
  /* H3 System */
  .ds-h3 { 
    @apply ds-text-base text-xl md:text-2xl lg:text-4xl font-medium text-white;
  }
  
  /* H4 System */
  .ds-h4 { 
    @apply ds-text-base text-lg md:text-xl lg:text-2xl font-medium text-white;
  }
  
  /* Body Text System */
  .ds-body-large { 
    @apply ds-text-base text-base md:text-lg lg:text-xl text-slate-400 leading-relaxed font-light;
  }
  
  .ds-body { 
    @apply ds-text-base text-base text-slate-400 leading-relaxed;
  }
  
  .ds-small { 
    @apply ds-text-base text-sm text-slate-500;
  }
  
  .ds-micro { 
    @apply ds-text-base text-xs text-slate-500 uppercase tracking-widest;
  }
  
  /* Button System */
  .ds-btn-base {
    @apply ds-text-base inline-flex items-center justify-center gap-3 px-8 py-4 rounded-full font-medium uppercase tracking-widest transition-all duration-300 min-h-[44px] min-w-[44px];
  }
  
  .ds-btn-primary {
    @apply ds-btn-base bg-white/5 backdrop-blur-md border border-white/10 text-white hover:bg-white/10 hover:scale-105 hover:border-white/20 focus:outline-none focus:ring-2 focus:ring-[#38bdf8] focus:ring-offset-2 focus:ring-offset-[#050505];
  }
  
  .ds-btn-secondary {
    @apply ds-btn-base bg-[#38bdf8]/10 border border-[#38bdf8]/20 text-[#38bdf8] hover:bg-[#38bdf8]/20 hover:border-[#38bdf8]/30 focus:outline-none focus:ring-2 focus:ring-[#38bdf8] focus:ring-offset-2 focus:ring-offset-[#050505];
  }
  
  .ds-btn-ghost {
    @apply ds-btn-base bg-transparent border border-white/20 text-white hover:bg-white/5 hover:border-white/30 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-[#050505];
  }
  
  /* Card System */
  .ds-card {
    @apply backdrop-blur-xl bg-white/[0.08] border border-white/20 rounded-2xl p-8 transition-all duration-300;
  }
  
  .ds-card-hover {
    @apply ds-card hover:bg-white/[0.12] hover:scale-[1.02];
  }
  
  /* Responsive Utilities */
  .ds-container-padding {
    @apply px-4 sm:px-6 md:px-8 lg:px-12;
  }
  
  .ds-section-padding {
    @apply py-12 md:py-16 lg:py-20;
  }
  
  .ds-component-gap {
    @apply gap-4 md:gap-6 lg:gap-8;
  }
  
  /* Grid System */
  .ds-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-4 md:gap-6 lg:gap-8;
  }
  
  .ds-content-main { @apply lg:col-span-8; }
  .ds-content-sidebar { @apply lg:col-span-4; }
  
  /* Focus Management */
  .ds-focus-visible {
    @apply focus:outline-none focus:ring-2 focus:ring-[#38bdf8] focus:ring-offset-2 focus:ring-offset-[#050505];
  }
  
  /* Screen Reader Only */
  .ds-sr-only {
    @apply sr-only;
  }
  
  /* Skip Links */
  .ds-skip-link {
    @apply ds-sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 ds-btn-primary z-50;
  }
  
  /* Touch Targets */
  .ds-touch-target {
    @apply min-h-[44px] min-w-[44px] flex items-center justify-center;
  }
  
  /* Accessible Animations */
  .ds-animate-safe {
    @apply transition-all duration-300;
  }
  
  /* Respect Prefers Reduced Motion */
  @media (prefers-reduced-motion: reduce) {
    .ds-animate {
      animation: none !important;
      transition: none !important;
    }
  }
}