// ===== MODERNE FARBPALETTE MIT GLASSMORPHISM =====

// Primäre Hintergründe
$color-background-main: #f8fafc;           // Sehr helles Blaugrau
$color-background-secondary: #f1f5f9;      // Etwas dunkler für Kontrast
$color-background-elevated: #ffffff;       // Weiß für Cards

// Text
$color-text-primary: #0f172a;              // Tiefes Slate
$color-text-secondary: #64748b;            // Mittleres Slate
$color-text-tertiary: #94a3b8;             // Helles Slate für Subtexte

// Branding mit modernem Gradient-System
$color-brand-primary: #2563eb;             // Kräftiges Blau
$color-brand-secondary: #3b82f6;           // Helleres Blau
$color-brand-dark: #1e40af;                // Dunkles Blau
$color-brand-light: #60a5fa;               // Sehr helles Blau
$color-brand-bg: #eff6ff;                  // Subtiler Blau-Hintergrund

// Gradient Definitionen
$gradient-primary: linear-gradient(135deg, $color-brand-primary 0%, $color-brand-secondary 100%);
$gradient-primary-hover: linear-gradient(135deg, $color-brand-dark 0%, $color-brand-primary 100%);
$gradient-subtle: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
$gradient-bg: linear-gradient(135deg, #f8fafc 0%, #e7eeff 100%);

// Glassmorphism
$glass-bg: rgba(255, 255, 255, 0.95);
$glass-bg-light: rgba(255, 255, 255, 0.7);
$glass-border: rgba(255, 255, 255, 0.8);
$glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
$glass-shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.12);

// Neutrale Farben
$color-white: #ffffff;
$color-black: #000000;
$color-gray-50: #f8fafc;
$color-gray-100: #f1f5f9;
$color-gray-200: #e2e8f0;
$color-gray-300: #cbd5e1;
$color-gray-400: #94a3b8;
$color-gray-500: #64748b;
$color-gray-600: #475569;
$color-gray-700: #334155;
$color-gray-800: #1e293b;
$color-gray-900: #0f172a;

// Legacy Support (für bestehenden Code)
$color-gray-dark: $color-gray-700;
$color-gray: $color-gray-500;
$color-gray-light: $color-gray-200;

// Statusfarben
$color-success: #10b981;                   // Modernes Grün
$color-success-light: #d1fae5;
$color-warning: #f59e0b;                   // Warmes Orange
$color-warning-light: #fef3c7;
$color-error: #ef4444;                     // Klares Rot
$color-error-light: #fee2e2;
$color-info: #06b6d4;                      // Cyan
$color-info-light: #cffafe;

// ===== SHADOWS & EFFECTS =====
$shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
$shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
$shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
$shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
$shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
$shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.15);

// Glassmorphism Shadows
$shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
$shadow-glass-hover: 0 16px 48px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;

// Brand Shadows
$shadow-brand: 0 4px 16px rgba(37, 99, 235, 0.25);
$shadow-brand-hover: 0 8px 24px rgba(37, 99, 235, 0.35);

// ===== BORDER RADIUS =====
$radius-xs: 6px;
$radius-sm: 8px;
$radius-md: 12px;
$radius-lg: 16px;
$radius-xl: 20px;
$radius-2xl: 24px;
$radius-full: 9999px;

// ===== TRANSITIONS =====
$transition-fast: 0.15s ease;
$transition-base: 0.3s ease;
$transition-slow: 0.4s ease;

// ===== SPACING SYSTEM =====
$spacing-xs: 0.25rem;   // 4px
$spacing-sm: 0.5rem;    // 8px
$spacing-md: 0.75rem;   // 12px
$spacing-lg: 1rem;      // 16px
$spacing-xl: 1.5rem;    // 24px
$spacing-2xl: 2rem;     // 32px
$spacing-3xl: 3rem;     // 48px
$spacing-4xl: 4rem;     // 64px

// ===== UTILITY CLASSES =====

// Flexbox
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

// Pointer
.pointer {
  cursor: pointer !important;
}

// ===== MODERNE BUTTONS =====

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  min-height: 44px; /* iOS minimum touch target */
  border-radius: $radius-md;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  border: none;
  cursor: pointer;
  transition: all $transition-base;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  white-space: nowrap;
  /* GPU Acceleration für Safari */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Touch-Optimierung */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  // Primary Button mit Gradient
  &--primary {
    background: $gradient-primary;
    color: $color-white;
    box-shadow: $shadow-brand;

    &:hover {
      background: $gradient-primary-hover;
      box-shadow: $shadow-brand-hover;
      transform: translateY(-2px);
    }

    &:active {
      transform: translateY(0);
      box-shadow: $shadow-brand;
    }

    &:focus-visible {
      outline: none;
      box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
    }
  }

  // Ghost Button mit Glassmorphism
  &--ghost {
    background: transparent;
    color: $color-brand-primary;
    border: 2px solid $color-brand-primary;
    box-shadow: none;

    &:hover {
      background: $color-brand-primary;
      color: $color-white;
      transform: translateY(-2px);
      box-shadow: $shadow-brand;
    }

    &:active {
      transform: translateY(0);
    }

    &:focus-visible {
      outline: none;
      box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
    }
  }

  // Secondary Button mit Glassmorphism
  &--secondary {
    background: $glass-bg;
    color: $color-brand-primary;
    border: 1px solid rgba(37, 99, 235, 0.2);
    backdrop-filter: blur(10px);
    box-shadow: $shadow-glass;

    &:hover {
      background: $color-white;
      border-color: $color-brand-primary;
      transform: translateY(-2px);
      box-shadow: $shadow-glass-hover;
    }

    &:active {
      transform: translateY(0);
    }

    &:focus-visible {
      outline: none;
      box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
    }
  }

  // Tertiary (Text Button)
  &--tertiary {
    background: transparent;
    color: $color-brand-primary;
    padding: 0.5rem 1rem;

    &:hover {
      background: rgba(37, 99, 235, 0.06);
    }

    &:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }
  }

  // Size Variations
  &--small {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }

  &--large {
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
  }

  &--xl {
    padding: 1rem 2rem;
    font-size: 1.0625rem;
    border-radius: $radius-lg;
  }

  // Full Width
  &--full {
    width: 100%;
  }
}

// ===== GLASSMORPHISM CARDS =====

.card {
  background: $glass-bg;
  backdrop-filter: blur(20px);
  border: 1px solid $glass-border;
  border-radius: $radius-lg;
  padding: 1.5rem;
  box-shadow: $shadow-glass;
  transition: all $transition-base;

  &:hover {
    transform: translateY(-4px);
    box-shadow: $shadow-glass-hover;
  }

  &--solid {
    background: $color-white;
    backdrop-filter: none;
  }

  &--bordered {
    border: 2px solid $color-gray-200;
  }
}

// ===== LINKS =====

.link {
  color: $color-brand-primary;
  text-decoration: none;
  font-weight: 600;
  transition: color $transition-fast;
  cursor: pointer;

  &:hover {
    color: $color-brand-dark;
    text-decoration: underline;
  }

  &:focus-visible {
    outline: none;
    border-radius: $radius-sm;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
  }
}

// ===== BADGES & PILLS =====

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: $radius-full;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;

  &--primary {
    background: $gradient-primary;
    color: $color-white;
    box-shadow: $shadow-brand;
  }

  &--secondary {
    background: $color-gray-100;
    color: $color-gray-700;
  }

  &--success {
    background: $color-success-light;
    color: darken($color-success, 10%);
  }

  &--warning {
    background: $color-warning-light;
    color: darken($color-warning, 10%);
  }

  &--error {
    background: $color-error-light;
    color: darken($color-error, 10%);
  }

  &--glass {
    background: $glass-bg-light;
    backdrop-filter: blur(10px);
    border: 1px solid $glass-border;
    color: $color-text-primary;
  }
}

// ===== INPUT STYLES (für Formulare) =====

.input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid $color-gray-200;
  border-radius: $radius-md;
  font-size: 0.9375rem;
  color: $color-text-primary;
  background: $color-white;
  transition: all $transition-fast;

  &:hover {
    border-color: $color-gray-300;
  }

  &:focus {
    outline: none;
    border-color: $color-brand-primary;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
  }

  &::placeholder {
    color: $color-text-tertiary;
  }

  &--glass {
    background: $glass-bg;
    backdrop-filter: blur(10px);
    border-color: $glass-border;
  }
}

.textarea {
  @extend .input;
  min-height: 100px;
  resize: vertical;
}

// ===== DIVIDER =====

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, $color-gray-200, transparent);
  border: none;
  margin: 2rem 0;
}

// ===== TEXT UTILITIES =====

.text-primary {
  color: $color-text-primary;
}

.text-secondary {
  color: $color-text-secondary;
}

.text-tertiary {
  color: $color-text-tertiary;
}

.text-brand {
  color: $color-brand-primary;
}

.gradient-text {
  background: $gradient-primary;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

// ===== SPACING UTILITIES =====

.mt-xs { margin-top: $spacing-xs; }
.mt-sm { margin-top: $spacing-sm; }
.mt-md { margin-top: $spacing-md; }
.mt-lg { margin-top: $spacing-lg; }
.mt-xl { margin-top: $spacing-xl; }

.mb-xs { margin-bottom: $spacing-xs; }
.mb-sm { margin-bottom: $spacing-sm; }
.mb-md { margin-bottom: $spacing-md; }
.mb-lg { margin-bottom: $spacing-lg; }
.mb-xl { margin-bottom: $spacing-xl; }

.gap-xs { gap: $spacing-xs; }
.gap-sm { gap: $spacing-sm; }
.gap-md { gap: $spacing-md; }
.gap-lg { gap: $spacing-lg; }
.gap-xl { gap: $spacing-xl; }

// ===== PAGE ENTRANCE ANIMATIONS =====

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

@keyframes pageFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes pageScaleIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.page-animate {
  animation: pageSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.page-animate-fade {
  animation: pageFadeIn 0.4s ease-out forwards;
}

.page-animate-scale {
  animation: pageScaleIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

// Staggered children animation
.page-animate-stagger {
  > * {
    opacity: 0;
    animation: pageSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    
    @for $i from 1 through 10 {
      &:nth-child(#{$i}) {
        animation-delay: #{$i * 0.08}s;
      }
    }
  }
}