// Skeumorphic design system mixins

@mixin shadow-raised {
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.12),
    0 2px 4px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 2px rgba(0, 0, 0, 0.08);
}

@mixin shadow-raised-hover {
  box-shadow: 
    0 6px 16px rgba(0, 0, 0, 0.15),
    0 3px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 2px rgba(0, 0, 0, 0.08);
}

@mixin shadow-pressed {
  box-shadow: 
    inset 0 3px 6px rgba(0, 0, 0, 0.2),
    inset 0 1px 3px rgba(0, 0, 0, 0.15),
    0 1px 2px rgba(255, 255, 255, 0.5);
}

@mixin shadow-inset {
  box-shadow: 
    inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

@mixin shadow-card {
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 1px 4px rgba(0, 0, 0, 0.04);
}

@mixin gradient-light {
  background: linear-gradient(145deg, #f8f8f8 0%, #ebebeb 100%);
}

@mixin gradient-light-hover {
  background: linear-gradient(145deg, #fff 0%, #f5f5f5 100%);
}

@mixin gradient-dark {
  background: linear-gradient(145deg, #2a2a2a 0%, #222 100%);
}

@mixin gradient-dark-hover {
  background: linear-gradient(145deg, #333 0%, #2a2a2a 100%);
}

@mixin skeumorphic-button {
  @include gradient-light;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  @include shadow-raised;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  
  @include dark-mode {
    @include gradient-dark;
    border-color: rgba(0, 0, 0, 0.3);
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.4),
      0 2px 4px rgba(0, 0, 0, 0.3),
      inset 0 -1px 2px rgba(0, 0, 0, 0.3);
  }
  
  &:hover:not(:disabled) {
    @include gradient-light-hover;
    transform: translateY(-1px);
    @include shadow-raised-hover;
    
    @include dark-mode {
      @include gradient-dark-hover;
      box-shadow: 
        0 6px 16px rgba(0, 0, 0, 0.5),
        0 3px 6px rgba(0, 0, 0, 0.4),
        inset 0 -1px 2px rgba(0, 0, 0, 0.3);
    }
  }
  
  &:active:not(:disabled) {
    transform: translateY(0);
    @include shadow-pressed;
    
    @include dark-mode {
      box-shadow: 
        inset 0 3px 6px rgba(0, 0, 0, 0.5),
        inset 0 1px 3px rgba(0, 0, 0, 0.4);
    }
  }
}

@mixin icon-button {
  @include skeumorphic-button;
  padding: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin transition-default($props: all) {
  transition: $props $transition-fast;
}

@mixin container($max: 1280px) {
  max-width: $max;
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
  
  @include up($bp-sm) {
    padding: 0 1.5rem;
  }
  
  @include up($bp-lg) {
    padding: 0 2rem;
  }
}

@mixin card($padding: 1.5rem, $radius: $radius-lg, $shadow: true, $border: var(--pico-card-border-color)) {
  background: linear-gradient(165deg, var(--pico-card-background-color) 0%, var(--surface-2) 100%);
  border: 1px solid $border;
  border-radius: $radius;
  padding: $padding;
  
  @include dark-mode {
    background: linear-gradient(165deg, #252932 0%, #1f2329 100%);
  }
  
  @if $shadow {
    box-shadow: 
      4px 4px 16px rgba(0, 0, 0, 0.04),
      2px 2px 8px rgba(0, 0, 0, 0.02),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
    
    @include dark-mode {
      box-shadow: 
        4px 4px 16px rgba(0, 0, 0, 0.3),
        2px 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
  }
}

@mixin card-hoverable($padding: $space-4, $radius: $radius-lg) {
  @include card($padding: $padding, $radius: $radius);
  @include transition-default();
  
  @include dark-mode {
    background: #1f2937;
    border-color: #374151;
  }
  
  &:hover {
    transform: translateY(-1px);
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.1),
      0 2px 6px rgba(0, 0, 0, 0.06);
    
    @include dark-mode {
      box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.3);
    }
  }
}

@mixin section-card {
  @include card(2rem, $radius-lg);
}

@mixin page-sections($max: 900px) {
  max-width: $max;
  margin: 2rem auto 0;
}

@mixin form-fieldset {
  border: none; padding: 0;
  legend { font-weight: 600; color: var(--pico-color); padding: 0; }
  label { font-weight: 500; display: block; color: var(--pico-color); }
  input, select, textarea { border-radius: $radius-md; }
}

@mixin status-card($color, $light-from, $light-to) {
  background: linear-gradient(135deg, $light-from, $light-to);
  border-color: $color;
  
  @include dark-mode {
    background: linear-gradient(135deg, rgba($color, 0.15), rgba($color, 0.08));
    border-color: rgba($color, 0.3);
  }
}

@mixin badge($bg, $fg, $radius: 6px) {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.6rem;
  border-radius: $radius;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: $bg;
  color: $fg;
}

@mixin page-title($size: 1.25rem, $mb: 1.25rem) {
  font-size: $size;
  font-weight: 600;
  margin: 0 0 $mb;
  color: var(--pico-color);
}

@mixin colored-button($light-from, $light-to, $border, $dark-from, $dark-to, $dark-border, $hover-from, $hover-to, $dark-hover-from, $dark-hover-to) {
  background: linear-gradient(180deg, $light-from 0%, $light-to 100%) !important;
  border: 1px solid $border !important;
  color: #ffffff !important;
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;

  @include dark-mode {
    background: linear-gradient(180deg, $dark-from 0%, $dark-to 100%) !important;
    border: 1px solid $dark-border !important;
    box-shadow: 
      0 2px 8px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
  }

  &:hover:not(:disabled) {
    transform: translateY(-1px);
    background: linear-gradient(180deg, $hover-from 0%, $hover-to 100%) !important;
    border-color: $border !important;
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;

    @include dark-mode {
      background: linear-gradient(180deg, $dark-hover-from 0%, $dark-hover-to 100%) !important;
      border-color: $dark-to !important;
      box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
    }
  }
  
  &:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 
      inset 0 3px 6px rgba(0, 0, 0, 0.3),
      inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;

    @include dark-mode {
      box-shadow: 
        inset 0 3px 6px rgba(0, 0, 0, 0.4),
        inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    }
  }
}
