// MonacoUSA Portal Design System
// Professional Neumorphic Design with Enhanced Components

// ========================================
// 1. COLOR PALETTE
// ========================================

// Brand Colors
$monaco-red: #CC0000;
$monaco-dark-red: #990000;
$monaco-light-red: #FF3333;

// Primary Colors (Monaco Red)
$primary-50: #FEF2F2;
$primary-100: #FEE2E2;
$primary-200: #FECACA;
$primary-300: #FCA5A5;
$primary-400: #F87171;
$primary-500: #EF4444;
$primary-600: $monaco-red;
$primary-700: $monaco-dark-red;
$primary-800: #660000;
$primary-900: #450A0A;

// Neutral Colors
$neutral-50: #F9FAFB;
$neutral-100: #F3F4F6;
$neutral-200: #E5E7EB;
$neutral-300: #D1D5DB;
$neutral-400: #9CA3AF;
$neutral-500: #6B7280;
$neutral-600: #4B5563;
$neutral-700: #374151;
$neutral-800: #1F2937;
$neutral-900: #111827;

// Blue Colors (for dropdowns and accents)
$blue-50: #EFF6FF;
$blue-100: #DBEAFE;
$blue-200: #BFDBFE;
$blue-300: #93C5FD;
$blue-400: #60A5FA;
$blue-500: #3B82F6;
$blue-600: #2563EB;
$blue-700: #1D4ED8;
$blue-800: #1E40AF;
$blue-900: #1E3A8A;

// Semantic Colors
$success-500: #10B981;
$warning-500: #F59E0B;
$error-500: #EF4444;
$info-500: #3B82F6;

// ========================================
// 2. TYPOGRAPHY
// ========================================

$font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
$font-heading: 'Inter', $font-sans;
$font-mono: 'Fira Code', 'Courier New', monospace;

// Font Sizes
$text-xs: 0.75rem;    // 12px
$text-sm: 0.875rem;   // 14px
$text-base: 1rem;     // 16px
$text-lg: 1.125rem;   // 18px
$text-xl: 1.25rem;    // 20px
$text-2xl: 1.5rem;    // 24px
$text-3xl: 1.875rem;  // 30px
$text-4xl: 2.25rem;   // 36px
$text-5xl: 3rem;      // 48px

// Font Weights
$font-light: 300;
$font-normal: 400;
$font-medium: 500;
$font-semibold: 600;
$font-bold: 700;

// Line Heights
$leading-tight: 1.25;
$leading-normal: 1.5;
$leading-relaxed: 1.625;

// ========================================
// 3. SPACING SYSTEM
// ========================================

$space-0: 0;
$space-1: 0.25rem;   // 4px
$space-2: 0.5rem;    // 8px
$space-3: 0.75rem;   // 12px
$space-4: 1rem;      // 16px
$space-5: 1.25rem;   // 20px
$space-6: 1.5rem;    // 24px
$space-8: 2rem;      // 32px
$space-10: 2.5rem;   // 40px
$space-12: 3rem;     // 48px
$space-16: 4rem;     // 64px
$space-20: 5rem;     // 80px

// ========================================
// 4. NEUMORPHIC SHADOWS
// ========================================

// Soft Shadows (light theme)
$shadow-soft-xs: 
  2px 2px 4px rgba(0, 0, 0, 0.07),
  -2px -2px 4px rgba(255, 255, 255, 0.95);

$shadow-soft-sm: 
  4px 4px 8px rgba(0, 0, 0, 0.08),
  -4px -4px 8px rgba(255, 255, 255, 0.95);

$shadow-soft-md: 
  8px 8px 16px rgba(0, 0, 0, 0.1),
  -8px -8px 16px rgba(255, 255, 255, 0.95);

$shadow-soft-lg: 
  12px 12px 24px rgba(0, 0, 0, 0.12),
  -12px -12px 24px rgba(255, 255, 255, 0.95);

$shadow-soft-xl: 
  16px 16px 32px rgba(0, 0, 0, 0.14),
  -16px -16px 32px rgba(255, 255, 255, 0.95);

// Inset Shadows (for pressed/input states)
$shadow-inset-sm: 
  inset 4px 4px 8px rgba(0, 0, 0, 0.1),
  inset -4px -4px 8px rgba(255, 255, 255, 0.95);

$shadow-inset-md: 
  inset 6px 6px 12px rgba(0, 0, 0, 0.15),
  inset -6px -6px 12px rgba(255, 255, 255, 0.95);

// Glassmorphic Shadow
$shadow-glass: 
  0 8px 32px rgba(0, 0, 0, 0.1),
  0 0 0 1px rgba(255, 255, 255, 0.3);

// Morphing Dropdown Shadow
$shadow-morphing: 
  0 10px 40px rgba(0, 0, 0, 0.12),
  0 2px 10px rgba(0, 0, 0, 0.08);

// ========================================
// 5. BORDER RADIUS
// ========================================

$radius-sm: 0.375rem;   // 6px
$radius-md: 0.5rem;     // 8px
$radius-lg: 0.75rem;    // 12px
$radius-xl: 1rem;       // 16px
$radius-2xl: 1.5rem;    // 24px
$radius-3xl: 2rem;      // 32px
$radius-full: 9999px;

// ========================================
// 6. TRANSITIONS
// ========================================

$transition-base: 0.3s ease;
$transition-fast: 0.15s ease;
$transition-slow: 0.5s ease;

// Spring Animation (for dropdowns)
$spring-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
$spring-smooth: cubic-bezier(0.4, 0, 0.2, 1);

// ========================================
// 7. BREAKPOINTS
// ========================================

$breakpoint-sm: 640px;
$breakpoint-md: 768px;
$breakpoint-lg: 1024px;
$breakpoint-xl: 1280px;
$breakpoint-2xl: 1536px;

// ========================================
// 8. Z-INDEX LAYERS
// ========================================

$z-base: 0;
$z-dropdown: 10;
$z-sticky: 20;
$z-overlay: 30;
$z-modal: 40;
$z-popover: 50;
$z-tooltip: 60;
$z-notification: 70;

// ========================================
// 9. GLASSMORPHISM MIXINS
// ========================================

@mixin glassmorphism($bg-opacity: 0.8, $blur: 12px) {
  background: rgba(255, 255, 255, $bg-opacity);
  backdrop-filter: blur($blur);
  -webkit-backdrop-filter: blur($blur);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

@mixin glassmorphism-blue($bg-opacity: 0.3, $blur: 12px) {
  background: rgba($blue-50, $bg-opacity);
  backdrop-filter: blur($blur);
  -webkit-backdrop-filter: blur($blur);
  border: 1px solid rgba($blue-200, 0.3);
}

// ========================================
// 10. COMPONENT MIXINS
// ========================================

// Neumorphic Card
@mixin neumorphic-card($elevation: 'md') {
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  border-radius: $radius-xl;
  
  @if $elevation == 'sm' {
    box-shadow: $shadow-soft-sm;
  } @else if $elevation == 'md' {
    box-shadow: $shadow-soft-md;
  } @else if $elevation == 'lg' {
    box-shadow: $shadow-soft-lg;
  } @else if $elevation == 'xl' {
    box-shadow: $shadow-soft-xl;
  }
}

// Neumorphic Button
@mixin neumorphic-button() {
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  box-shadow: $shadow-soft-sm;
  transition: all $transition-base;
  
  &:hover {
    box-shadow: $shadow-soft-md;
    transform: translateY(-2px);
  }
  
  &:active {
    box-shadow: $shadow-inset-sm;
    transform: translateY(0);
  }
}

// Morphing Dropdown
@mixin morphing-dropdown() {
  @include glassmorphism-blue(0.8, 16px);
  box-shadow: $shadow-morphing;
  border-radius: $radius-lg;
  overflow: hidden;
  animation: morphIn 0.3s $spring-smooth;
}

// Focus Ring
@mixin focus-ring($color: $primary-500) {
  &:focus {
    outline: none;
    box-shadow: 
      0 0 0 3px rgba($color, 0.1),
      $shadow-soft-md;
    border-color: rgba($color, 0.5);
  }
}

// ========================================
// 11. ANIMATIONS
// ========================================

@keyframes morphIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

// ========================================
// 12. UTILITY CLASSES
// ========================================

.backdrop-blur {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.glass-effect {
  @include glassmorphism();
}

.glass-blue {
  @include glassmorphism-blue();
}

.shadow-neumorphic {
  box-shadow: $shadow-soft-md;
}

.text-gradient {
  background: linear-gradient(135deg, $primary-600, $primary-800);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

// ========================================
// 13. RESPONSIVE UTILITIES
// ========================================

@mixin responsive($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

// Usage: @include responsive($breakpoint-md) { ... }

// ========================================
// 14. DARK MODE SUPPORT
// ========================================

@mixin dark-mode {
  @media (prefers-color-scheme: dark) {
    @content;
  }
  
  [data-theme="dark"] & {
    @content;
  }
}