// _effects.scss - Centralized visual effects for the entire market_dashboard project

// ==========================================
// BORDER RADIUS
// ==========================================
$border-radius-none: 0;
$border-radius-sm: 0.25rem;
$border-radius-md: 0.375rem;
$border-radius-lg: 0.5rem;
$border-radius-xl: 0.75rem;
$border-radius-xxl: 1rem;
$border-radius-round: 50%;
$border-radius-pill: 50rem;

// ==========================================
// BOX SHADOWS
// ==========================================
// Light mode shadows
$shadow-none: none;
$shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
$shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
$shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
$shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);

// Dark mode shadows (more prominent)
$shadow-dark-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
$shadow-dark-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
$shadow-dark-md: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
$shadow-dark-lg: 0 10px 15px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);
$shadow-dark-xl: 0 20px 25px rgba(0, 0, 0, 0.5), 0 10px 10px rgba(0, 0, 0, 0.3);

// Inset shadows
$shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.06);
$shadow-inset-dark: inset 0 2px 4px rgba(0, 0, 0, 0.3);

// ==========================================
// TRANSITIONS
// ==========================================
$transition-none: none;
$transition-all: all;
$transition-fast: 0.15s ease;
$transition-normal: 0.2s ease;
$transition-slow: 0.3s ease;
$transition-slower: 0.5s ease;

// Specific transition properties
$transition-colors: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
$transition-opacity: opacity 0.15s ease-in-out;
$transition-transform: transform 0.15s ease-in-out;
$transition-shadow: box-shadow 0.15s ease-in-out;

// Combined transitions
$transition-smooth: all 0.2s ease-in-out;
$transition-button: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;

// Sidebar and layout transitions
$transition-sidebar: margin 0.3s ease-in-out, padding 0.3s ease-in-out;
$transition-layout: margin-left 0.3s ease-in-out;

// ==========================================
// ANIMATION DURATIONS
// ==========================================
$duration-fast: 150ms;
$duration-normal: 200ms;
$duration-slow: 300ms;
$duration-slower: 500ms;

// ==========================================
// EASING FUNCTIONS
// ==========================================
$ease-linear: linear;
$ease-in: ease-in;
$ease-out: ease-out;
$ease-in-out: ease-in-out;
$ease-sharp: cubic-bezier(0.4, 0, 0.6, 1);
$ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

// ==========================================
// OPACITY VALUES
// ==========================================
$opacity-0: 0;
$opacity-5: 0.05;
$opacity-10: 0.1;
$opacity-20: 0.2;
$opacity-25: 0.25;
$opacity-30: 0.3;
$opacity-40: 0.4;
$opacity-50: 0.5;
$opacity-60: 0.6;
$opacity-70: 0.7;
$opacity-75: 0.75;
$opacity-80: 0.8;
$opacity-90: 0.9;
$opacity-95: 0.95;
$opacity-100: 1;

// ==========================================
// BLUR VALUES
// ==========================================
$blur-none: 0;
$blur-sm: 4px;
$blur-md: 8px;
$blur-lg: 16px;
$blur-xl: 24px;
$blur-2xl: 40px;
$blur-3xl: 64px;

// ==========================================
// EFFECT MIXINS
// ==========================================
@mixin card-shadow {
  box-shadow: $shadow-sm;
  
  [data-bs-theme="dark"] & {
    box-shadow: $shadow-dark-sm;
  }
}

@mixin hover-lift {
  transition: $transition-button;
  
  &:hover {
    transform: translateY(-1px);
    box-shadow: $shadow-md;
    
    [data-bs-theme="dark"] & {
      box-shadow: $shadow-dark-md;
    }
  }
}

@mixin focus-ring($color: var(--bs-primary)) {
  &:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba($color, 0.25);
  }
}

@mixin text-shadow($shadow: 0 1px 2px rgba(0, 0, 0, 0.1)) {
  text-shadow: $shadow;
}

@mixin backdrop-blur($blur: $blur-md) {
  backdrop-filter: blur($blur);
  -webkit-backdrop-filter: blur($blur);
}

// ==========================================
// GLASS EFFECT MIXIN
// ==========================================
@mixin glass-effect($opacity: 0.1, $blur: $blur-md) {
  background: rgba(255, 255, 255, $opacity);
  @include backdrop-blur($blur);
  border: 1px solid rgba(255, 255, 255, 0.2);
  
  [data-bs-theme="dark"] & {
    background: rgba(0, 0, 0, $opacity);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
}