// Monaco USA Portal - Design System v2.0
// Addressing critical issues from visual audit

// ============================================
// 1. COLOR PALETTE - Standardized
// ============================================

// Brand Colors
$monaco-red: #DC143C;
$monaco-red-dark: #B91C3C;
$monaco-red-light: #FF6B8A;
$monaco-white: #FFFFFF;
$monaco-gold: #FFD700;

// Primary color variations (for dashboard-v2 compatibility)
$primary-600: #dc2626;  // Same as refined Monaco red
$primary-700: #b91c1c;  // Same as monaco-red-dark
$primary-800: #991b1b;  // Darker shade

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

// Semantic color variations (for dashboard-v2 compatibility)
$success-500: #10B981;
$warning-500: #F59E0B;
$error-500: #EF4444;
$info-500: #3B82F6;
$blue-500: #3B82F6;  // Same as info color
$blue-600: #2563EB;  // Slightly darker blue

// Neutral Palette
$neutral-900: #0F172A;
$neutral-800: #1E293B;
$neutral-700: #334155;
$neutral-600: #475569;
$neutral-500: #64748B;
$neutral-400: #94A3B8;
$neutral-300: #CBD5E1;
$neutral-200: #E2E8F0;
$neutral-100: #F1F5F9;
$neutral-50: #F8FAFC;

// Glass Morphism
$glass-white: rgba(255, 255, 255, 0.1);
$glass-white-hover: rgba(255, 255, 255, 0.15);
$glass-border: rgba(255, 255, 255, 0.2);
$glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

// ============================================
// 2. TYPOGRAPHY - Consistent Hierarchy
// ============================================

// Font Family
$font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
$font-mono: 'Fira Code', 'Monaco', monospace;

// Font Sizes - Using rem for accessibility
$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-4xl: 2.25rem;   // 36px
$text-5xl: 3rem;      // 48px

// Line Heights
$leading-none: 1;
$leading-tight: 1.2;
$leading-snug: 1.375;
$leading-normal: 1.6;
$leading-relaxed: 1.75;
$leading-loose: 2;

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

// ============================================
// 3. SPACING SYSTEM - 8px Grid
// ============================================

$space-px: 1px;
$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-7: 1.75rem;  // 28px
$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

// ============================================
// 4. BORDER RADIUS - Consistent Curves
// ============================================

$radius-none: 0;
$radius-sm: 0.25rem;   // 4px
$radius-md: 0.5rem;    // 8px
$radius-lg: 0.75rem;   // 12px
$radius-xl: 1rem;      // 16px
$radius-2xl: 1.5rem;   // 24px
$radius-full: 9999px;

// ============================================
// 5. SHADOWS - Depth System
// ============================================

$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
$shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
$shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
$shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
$shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
$shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.1);

// Additional shadows for dashboard-v2 compatibility
$shadow-inset-sm: inset 0 1px 3px rgba(0, 0, 0, 0.08);
$shadow-soft-md: 0 4px 12px rgba(0, 0, 0, 0.05);

// ============================================
// 6. BREAKPOINTS - Mobile First
// ============================================

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

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

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

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

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

@mixin xxl {
  @media (min-width: $breakpoint-2xl) { @content; }
}

// ============================================
// 7. TRANSITIONS - Smooth Interactions
// ============================================

$ease-linear: linear;
$ease-in: cubic-bezier(0.4, 0, 1, 1);
$ease-out: cubic-bezier(0, 0, 0.2, 1);
$ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
$ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

// Additional easing for dashboard-v2 compatibility
$spring-smooth: cubic-bezier(0.34, 1.56, 0.64, 1);

$duration-fast: 150ms;
$duration-normal: 250ms;
$duration-slow: 350ms;
$duration-slower: 500ms;

// Common transition for dashboard-v2 compatibility
$transition-base: all $duration-normal $ease-out;
$transition-fast: all $duration-fast $ease-out;

// ============================================
// 8. Z-INDEX SCALE - Layering System
// ============================================

$z-negative: -1;
$z-0: 0;
$z-10: 10;
$z-20: 20;
$z-30: 30;
$z-40: 40;
$z-50: 50;
$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. IMPROVED GLASS EFFECT MIXIN
// ============================================

@mixin glass-effect(
  $blur: 10px, 
  $opacity: 0.1, 
  $border-opacity: 0.2,
  $shadow: true
) {
  background: rgba(255, 255, 255, $opacity);
  
  @supports (backdrop-filter: blur($blur)) or (-webkit-backdrop-filter: blur($blur)) {
    backdrop-filter: blur($blur);
    -webkit-backdrop-filter: blur($blur);
  }
  
  border: 1px solid rgba(255, 255, 255, $border-opacity);
  
  @if $shadow {
    box-shadow: $shadow-glass;
  }
  
  transition: all $duration-normal $ease-out;
  
  &:hover {
    background: rgba(255, 255, 255, $opacity + 0.05);
    border-color: rgba(255, 255, 255, $border-opacity + 0.1);
    
    @if $shadow {
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }
  }
}

// ============================================
// 10. NEUMORPHIC & MORPHING MIXINS - Dashboard V2 Compatibility
// ============================================

@mixin neumorphic-card($size: 'md') {
  $depth: 6px;
  $blur: 12px;
  
  @if $size == 'sm' {
    $depth: 4px;
    $blur: 8px;
  } @else if $size == 'lg' {
    $depth: 8px;
    $blur: 16px;
  }
  
  background: linear-gradient(145deg, #ffffff, #f5f5f5);
  box-shadow: 
    $depth $depth $blur rgba(0, 0, 0, 0.1),
    (-$depth) (-$depth) $blur rgba(255, 255, 255, 0.7);
  border-radius: $radius-xl;
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: all $duration-normal $ease-out;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 
      ($depth + 2px) ($depth + 2px) ($blur + 4px) rgba(0, 0, 0, 0.15),
      (-$depth - 2px) (-$depth - 2px) ($blur + 4px) rgba(255, 255, 255, 0.8);
  }
}

@mixin morphing-dropdown() {
  position: relative;
  background: linear-gradient(145deg, #ffffff, #f5f5f5);
  border-radius: $radius-lg;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 
    inset 2px 2px 5px rgba(0, 0, 0, 0.05),
    inset -2px -2px 5px rgba(255, 255, 255, 0.9);
  transition: all $duration-normal $ease-out;
  
  &:focus-within {
    box-shadow: 
      inset 3px 3px 8px rgba(0, 0, 0, 0.1),
      inset -3px -3px 8px rgba(255, 255, 255, 0.95);
  }
}

@mixin neumorphic-button() {
  background: linear-gradient(145deg, #ffffff, #f5f5f5);
  box-shadow: 
    4px 4px 8px rgba(0, 0, 0, 0.1),
    -4px -4px 8px rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: $radius-lg;
  transition: all $duration-fast $ease-out;
  
  &:hover {
    transform: translateY(-1px);
    box-shadow: 
      6px 6px 12px rgba(0, 0, 0, 0.12),
      -6px -6px 12px rgba(255, 255, 255, 0.8);
  }
  
  &:active {
    transform: translateY(0);
    box-shadow: 
      inset 2px 2px 5px rgba(0, 0, 0, 0.1),
      inset -2px -2px 5px rgba(255, 255, 255, 0.9);
  }
}

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

// ============================================
// 11. COMPONENT CLASSES - Reusable Styles
// ============================================

// Cards
.card-base {
  @include glass-effect(12px, 0.08, 0.18, true);
  border-radius: $radius-xl;
  padding: $space-6;
  margin-bottom: $space-4;
  
  @include md {
    padding: $space-8;
  }
}

// Buttons
@mixin button-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: $space-2;
  padding: $space-3 $space-6;
  border-radius: $radius-lg;
  font-weight: $font-medium;
  transition: all $duration-normal $ease-out;
  cursor: pointer;
  border: 1px solid transparent;
  
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  &:focus-visible {
    outline: 2px solid $monaco-red;
    outline-offset: 2px;
  }
}

.btn-primary {
  @include button-base;
  background: linear-gradient(135deg, $monaco-red 0%, $monaco-red-dark 100%);
  color: white;
  
  &:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba($monaco-red, 0.3);
  }
  
  &:active:not(:disabled) {
    transform: translateY(0);
  }
}

.btn-secondary {
  @include button-base;
  background: $neutral-100;
  color: $neutral-800;
  border-color: $neutral-300;
  
  &:hover:not(:disabled) {
    background: $neutral-200;
    border-color: $neutral-400;
  }
}

.btn-ghost {
  @include button-base;
  background: transparent;
  color: $neutral-600;
  
  &:hover:not(:disabled) {
    background: $neutral-100;
    color: $neutral-800;
  }
}

// Typography Classes
.heading-1 {
  font-size: $text-4xl;
  font-weight: $font-bold;
  line-height: $leading-tight;
  color: $neutral-900;
  
  @include md {
    font-size: $text-5xl;
  }
}

.heading-2 {
  font-size: $text-3xl;
  font-weight: $font-semibold;
  line-height: $leading-tight;
  color: $neutral-900;
  
  @include md {
    font-size: $text-4xl;
  }
}

.heading-3 {
  font-size: $text-2xl;
  font-weight: $font-semibold;
  line-height: $leading-snug;
  color: $neutral-800;
}

.heading-4 {
  font-size: $text-xl;
  font-weight: $font-medium;
  line-height: $leading-snug;
  color: $neutral-800;
}

.body-text {
  font-size: $text-base;
  line-height: $leading-normal;
  color: $neutral-700;
}

.small-text {
  font-size: $text-sm;
  line-height: $leading-normal;
  color: $neutral-600;
}

// ============================================
// 12. LAYOUT UTILITIES
// ============================================

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 $space-4;
  
  @include md {
    padding: 0 $space-6;
  }
  
  @include lg {
    padding: 0 $space-8;
  }
}

.grid {
  display: grid;
  gap: $space-4;
  
  &.grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  
  @include md {
    &.md\:grid-cols-2 {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @include lg {
    &.lg\:grid-cols-3 {
      grid-template-columns: repeat(3, 1fr);
    }
    
    &.lg\:grid-cols-4 {
      grid-template-columns: repeat(4, 1fr);
    }
  }
}

.flex {
  display: flex;
  
  &.flex-col {
    flex-direction: column;
  }
  
  &.items-center {
    align-items: center;
  }
  
  &.justify-between {
    justify-content: space-between;
  }
  
  &.gap-2 {
    gap: $space-2;
  }
  
  &.gap-4 {
    gap: $space-4;
  }
}

// ============================================
// 13. ANIMATION CLASSES
// ============================================

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

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

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

.animate-fadeIn {
  animation: fadeIn $duration-normal $ease-out;
}

.animate-slideIn {
  animation: slideIn $duration-slow $ease-out;
}

.animate-pulse {
  animation: pulse 2s $ease-in-out infinite;
}

// ============================================
// 14. ACCESSIBILITY UTILITIES
// ============================================

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.focus-visible {
  &:focus-visible {
    outline: 2px solid $monaco-red;
    outline-offset: 2px;
    border-radius: $radius-sm;
  }
}

// ============================================
// 15. STATUS INDICATORS
// ============================================

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: $space-1 $space-3;
  border-radius: $radius-full;
  font-size: $text-xs;
  font-weight: $font-semibold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  
  &.status-overdue {
    background: rgba($color-error, 0.1);
    color: $color-error;
    border: 1px solid rgba($color-error, 0.2);
  }
  
  &.status-pending {
    background: rgba($color-warning, 0.1);
    color: $color-warning;
    border: 1px solid rgba($color-warning, 0.2);
  }
  
  &.status-paid {
    background: rgba($color-success, 0.1);
    color: $color-success;
    border: 1px solid rgba($color-success, 0.2);
  }
}

// ============================================
// 16. LOADING STATES
// ============================================

.skeleton {
  background: linear-gradient(
    90deg,
    $neutral-200 25%,
    $neutral-100 50%,
    $neutral-200 75%
  );
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: $radius-md;
  
  &.skeleton-text {
    height: $space-4;
    margin-bottom: $space-2;
  }
  
  &.skeleton-card {
    height: 120px;
    margin-bottom: $space-4;
  }
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}