// MonacoUSA Portal - Neumorphic Design System
// Professional, Modern, and Inviting Design Language

// ============================================
// 1. Color Palette
// ============================================

// Primary - Monaco Red (Sophisticated)
$primary-50: #FEF2F2;
$primary-100: #FEE2E2;
$primary-200: #FECACA;
$primary-300: #FCA5A5;
$primary-400: #F87171;
$primary-500: #DC2626;  // Main brand
$primary-600: #B91C1C;  // Hover states
$primary-700: #991B1B;
$primary-800: #7F1D1D;
$primary-900: #450A0A;

// Neutral Grays (Professional Workspace)
$neutral-50: #FAFAFA;
$neutral-100: #F5F5F5;
$neutral-200: #E5E5E5;
$neutral-300: #D4D4D4;
$neutral-400: #A3A3A3;
$neutral-500: #737373;
$neutral-600: #525252;
$neutral-700: #404040;
$neutral-800: #262626;
$neutral-900: #171717;

// Semantic Colors
$success-500: #10B981;
$success-100: #D1FAE5;
$warning-500: #F59E0B;
$warning-100: #FEF3C7;
$error-500: #EF4444;
$error-100: #FEE2E2;
$info-500: #3B82F6;
$info-100: #DBEAFE;

// ============================================
// 2. Neumorphic Shadow System
// ============================================

// Light Mode Shadows
$shadow-soft-xs: 2px 2px 4px rgba(0, 0, 0, 0.05), -2px -2px 4px rgba(255, 255, 255, 0.8);
$shadow-soft-sm: 4px 4px 8px rgba(0, 0, 0, 0.08), -4px -4px 8px rgba(255, 255, 255, 0.9);
$shadow-soft-md: 8px 8px 16px rgba(0, 0, 0, 0.1), -8px -8px 16px rgba(255, 255, 255, 0.95);
$shadow-soft-lg: 15px 15px 30px rgba(0, 0, 0, 0.12), -15px -15px 30px rgba(255, 255, 255, 1);
$shadow-soft-xl: 20px 20px 40px rgba(0, 0, 0, 0.15), -20px -20px 40px rgba(255, 255, 255, 1);

// Inset Shadows (for pressed states)
$shadow-inset-sm: inset 2px 2px 4px rgba(0, 0, 0, 0.08), inset -2px -2px 4px rgba(255, 255, 255, 0.9);
$shadow-inset-md: inset 4px 4px 8px rgba(0, 0, 0, 0.1), inset -4px -4px 8px rgba(255, 255, 255, 0.95);
$shadow-inset-lg: inset 8px 8px 16px rgba(0, 0, 0, 0.12), inset -8px -8px 16px rgba(255, 255, 255, 1);

// Dark Mode Shadows
$shadow-dark-soft-sm: 4px 4px 8px rgba(0, 0, 0, 0.3), -4px -4px 8px rgba(255, 255, 255, 0.02);
$shadow-dark-soft-md: 8px 8px 16px rgba(0, 0, 0, 0.4), -8px -8px 16px rgba(255, 255, 255, 0.03);
$shadow-dark-soft-lg: 15px 15px 30px rgba(0, 0, 0, 0.5), -15px -15px 30px rgba(255, 255, 255, 0.04);
$shadow-dark-inset-md: inset 4px 4px 8px rgba(0, 0, 0, 0.4), inset -4px -4px 8px rgba(255, 255, 255, 0.03);

// ============================================
// 3. Typography System
// ============================================

$font-heading: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
$font-body: 'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
$font-mono: 'JetBrains Mono', 'Monaco', 'Courier New', monospace;

// Type Scale (Major Third - 1.25)
$text-xs: 0.75rem;     // 12px
$text-sm: 0.875rem;    // 14px
$text-base: 1rem;      // 16px
$text-lg: 1.25rem;     // 20px
$text-xl: 1.563rem;    // 25px
$text-2xl: 1.953rem;   // 31px
$text-3xl: 2.441rem;   // 39px
$text-4xl: 3.052rem;   // 49px

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

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

// ============================================
// 4. 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
$space-24: 6rem;    // 96px

// ============================================
// 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;   // Full round

// ============================================
// 6. Transitions
// ============================================

$transition-fast: 150ms ease-in-out;
$transition-base: 250ms ease-in-out;
$transition-slow: 350ms ease-in-out;
$transition-slower: 500ms ease-in-out;

// Easing Functions
$ease-in-out-soft: cubic-bezier(0.4, 0, 0.2, 1);
$ease-out-soft: cubic-bezier(0, 0, 0.2, 1);
$ease-in-soft: cubic-bezier(0.4, 0, 1, 1);

// ============================================
// 7. Breakpoints
// ============================================

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

// ============================================
// 8. Z-Index Scale
// ============================================

$z-base: 0;
$z-dropdown: 1000;
$z-sticky: 1020;
$z-fixed: 1030;
$z-modal-backdrop: 1040;
$z-modal: 1050;
$z-popover: 1060;
$z-tooltip: 1070;
$z-notification: 1080;

// ============================================
// 9. Component-Specific Variables
// ============================================

// Buttons
$button-height-sm: 2rem;    // 32px
$button-height-md: 2.5rem;  // 40px
$button-height-lg: 3rem;    // 48px
$button-padding-x: 1.5rem;  // 24px
$button-border-width: 0;

// Cards
$card-padding: 1.5rem;
$card-background: $neutral-100;
$card-border-radius: $radius-xl;

// Inputs
$input-height: 2.75rem;     // 44px
$input-padding-x: 1rem;     // 16px
$input-border-width: 0;
$input-background: $neutral-100;
$input-border-radius: $radius-lg;

// Sidebar
$sidebar-width: 280px;
$sidebar-width-collapsed: 80px;
$sidebar-background: $neutral-100;

// ============================================
// 10. Mixins
// ============================================

@mixin neumorphic($size: 'md', $type: 'raised', $dark: false) {
  @if $dark {
    @if $type == 'raised' {
      @if $size == 'sm' {
        box-shadow: $shadow-dark-soft-sm;
      } @else if $size == 'md' {
        box-shadow: $shadow-dark-soft-md;
      } @else if $size == 'lg' {
        box-shadow: $shadow-dark-soft-lg;
      }
    } @else if $type == 'pressed' {
      box-shadow: $shadow-dark-inset-md;
    }
  } @else {
    @if $type == 'raised' {
      @if $size == 'sm' {
        box-shadow: $shadow-soft-sm;
      } @else if $size == 'md' {
        box-shadow: $shadow-soft-md;
      } @else if $size == 'lg' {
        box-shadow: $shadow-soft-lg;
      } @else if $size == 'xl' {
        box-shadow: $shadow-soft-xl;
      }
    } @else if $type == 'pressed' {
      @if $size == 'sm' {
        box-shadow: $shadow-inset-sm;
      } @else if $size == 'md' {
        box-shadow: $shadow-inset-md;
      } @else if $size == 'lg' {
        box-shadow: $shadow-inset-lg;
      }
    }
  }
}

@mixin hover-lift($amount: 2px) {
  transition: transform $transition-base, box-shadow $transition-base;
  
  &:hover:not(:disabled) {
    transform: translateY(-$amount);
  }
}

@mixin focus-ring($color: $primary-500) {
  &:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba($color, 0.2);
  }
}

@mixin truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin responsive($breakpoint) {
  @if $breakpoint == 'sm' {
    @media (min-width: $breakpoint-sm) { @content; }
  } @else if $breakpoint == 'md' {
    @media (min-width: $breakpoint-md) { @content; }
  } @else if $breakpoint == 'lg' {
    @media (min-width: $breakpoint-lg) { @content; }
  } @else if $breakpoint == 'xl' {
    @media (min-width: $breakpoint-xl) { @content; }
  } @else if $breakpoint == '2xl' {
    @media (min-width: $breakpoint-2xl) { @content; }
  }
}

// ============================================
// 11. Dark Mode Support
// ============================================

@mixin dark-mode {
  @media (prefers-color-scheme: dark) {
    @content;
  }
  
  .dark & {
    @content;
  }
}

// ============================================
// 12. Utility Classes
// ============================================

.neumorphic-raised {
  @include neumorphic('md', 'raised');
}

.neumorphic-pressed {
  @include neumorphic('md', 'pressed');
}

.neumorphic-card {
  background: $neutral-100;
  border-radius: $radius-xl;
  padding: $card-padding;
  @include neumorphic('md', 'raised');
}

.neumorphic-button {
  background: $neutral-100;
  border-radius: $radius-lg;
  padding: $space-3 $space-6;
  @include neumorphic('sm', 'raised');
  transition: all $transition-base;
  
  &:hover {
    @include neumorphic('md', 'raised');
  }
  
  &:active {
    @include neumorphic('sm', 'pressed');
  }
}

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