// ==========================================================================
// SKYUI COLOR OVERRIDES
// ==========================================================================
// Project-specific color customizations built on semantic color tokens
// Extends the shared design system with SkyUI-specific color patterns
// ==========================================================================

// ==========================================================================
// THEME COLOR UTILITIES
// ==========================================================================
// Utility classes for applying semantic colors consistently

.skyui-color {
  // Brand color utilities
  &--brand-primary {
    color: $semantic-color-brand-primary;
  }

  &--brand-secondary {
    color: $semantic-color-brand-secondary;
  }

  &--brand-accent {
    color: $semantic-color-brand-accent;
  }

  // Text color utilities
  &--text-primary {
    color: $semantic-color-text-primary;
  }

  &--text-secondary {
    color: $semantic-color-text-secondary;
  }

  &--text-tertiary {
    color: $semantic-color-text-tertiary;
  }

  &--text-inverse {
    color: $semantic-color-text-inverse;
  }

  // Feedback colors
  &--success {
    color: $semantic-color-success;
  }

  &--warning {
    color: $semantic-color-warning;
  }

  &--danger {
    color: $semantic-color-danger;
  }

  &--info {
    color: $semantic-color-info;
  }
}

// ==========================================================================
// BACKGROUND COLOR UTILITIES
// ==========================================================================
// Background color utilities using semantic tokens

.skyui-bg {
  // Surface backgrounds
  &--surface-primary {
    background-color: $semantic-color-surface-primary;
  }

  &--surface-secondary {
    background-color: $semantic-color-surface-secondary;
  }

  &--surface-elevated {
    background-color: $semantic-color-surface-elevated;
  }

  &--surface-sunken {
    background-color: $semantic-color-surface-sunken;
  }

  &--surface-interactive {
    background-color: $semantic-color-surface-interactive;
    
    &:hover {
      background-color: var(--color-surface-interactive-hover, $semantic-color-surface-interactive);
      filter: brightness(0.95);
    }
  }

  // Brand backgrounds
  &--brand-primary {
    background-color: $semantic-color-brand-primary;
    color: $semantic-color-on-brand-primary;
  }

  &--brand-secondary {
    background-color: $semantic-color-brand-secondary;
    color: $semantic-color-on-brand-secondary;
  }

  // Container backgrounds
  &--container-primary {
    background-color: $semantic-color-container-primary;
    color: $semantic-color-on-container-primary;
  }

  &--container-secondary {
    background-color: $semantic-color-container-secondary;
    color: $semantic-color-on-container-secondary;
  }

  // Feedback backgrounds
  &--success {
    background-color: var(--color-success-light, $semantic-color-success);
    filter: brightness(1.4) saturate(0.6);
    color: var(--color-success-dark, $semantic-color-success);
    border: 1px solid var(--color-success-border, $semantic-color-success);
  }

  &--warning {
    background-color: var(--color-warning-light, $semantic-color-warning);
    filter: brightness(1.4) saturate(0.6);
    color: var(--color-warning-dark, $semantic-color-warning);
    border: 1px solid var(--color-warning-border, $semantic-color-warning);
  }

  &--danger {
    background-color: var(--color-danger-light, $semantic-color-danger);
    filter: brightness(1.4) saturate(0.6);
    color: var(--color-danger-dark, $semantic-color-danger);
    border: 1px solid var(--color-danger-border, $semantic-color-danger);
  }

  &--info {
    background-color: var(--color-info-light, $semantic-color-info);
    filter: brightness(1.4) saturate(0.6);
    color: var(--color-info-dark, $semantic-color-info);
    border: 1px solid var(--color-info-border, $semantic-color-info);
  }
}

// ==========================================================================
// BORDER COLOR UTILITIES
// ==========================================================================
// Border color utilities using semantic border tokens

.skyui-border {
  // Standard borders
  &--primary {
    border-color: $semantic-color-border-primary;
  }

  &--secondary {
    border-color: $semantic-color-border-secondary;
  }

  &--focus {
    border-color: $semantic-color-border-focus;
    outline: none;
  }

  &--error {
    border-color: $semantic-color-border-error;
  }

  &--disabled {
    border-color: $semantic-color-border-disabled;
  }

  // Border styles
  &--solid {
    border-style: solid;
    border-width: 1px;
  }

  &--dashed {
    border-style: dashed;
    border-width: 1px;
  }

  &--thick {
    border-width: 2px;
  }
}

// ==========================================================================
// INTERACTIVE STATE COLORS
// ==========================================================================
// Color variations for interactive elements

.skyui-interactive {
  // Primary interactive states
  &--primary {
    color: $semantic-color-interactive-primary;
    
    &:hover {
      color: var(--color-primary-hover, $semantic-color-interactive-primary);
    }
    
    &:active {
      color: var(--color-primary-active, $semantic-color-interactive-primary);
    }
    
    &:focus {
      color: $semantic-color-interactive-primary;
      outline: 2px solid $semantic-color-focus-ring;
      outline-offset: 2px;
    }
  }

  // Secondary interactive states
  &--secondary {
    color: $semantic-color-interactive-secondary;
    
    &:hover {
      color: var(--color-secondary-hover, $semantic-color-interactive-secondary);
    }
    
    &:active {
      color: var(--color-secondary-active, $semantic-color-interactive-secondary);
    }
  }

  // Tertiary interactive states
  &--tertiary {
    color: $semantic-color-interactive-tertiary;
    
    &:hover {
      color: var(--color-tertiary-hover, $semantic-color-interactive-tertiary);
    }
    
    &:active {
      color: var(--color-tertiary-active, $semantic-color-interactive-tertiary);
    }
  }

  // Neutral interactive states
  &--neutral {
    color: $semantic-color-text-secondary;
    
    &:hover {
      color: $semantic-color-text-primary;
    }
  }
}

// ==========================================================================
// COMPONENT-SPECIFIC COLORS
// ==========================================================================
// Color patterns for specific SkyUI components

// Dashboard specific colors
.skyui-dashboard {
  &__card {
    background-color: $semantic-color-surface-elevated;
    border: 1px solid $semantic-color-border-secondary;
    box-shadow: $semantic-shadow-elevated;
    
    &:hover {
      box-shadow: $semantic-shadow-floating;
    }
  }

  &__metric {
    &--positive {
      color: $semantic-color-success;
    }
    
    &--negative {
      color: $semantic-color-danger;
    }
    
    &--neutral {
      color: $semantic-color-text-secondary;
    }
  }
}

// Navigation specific colors
.skyui-navigation {
  &__item {
    color: $semantic-color-text-secondary;
    
    &:hover {
      color: $semantic-color-text-primary;
      background-color: $semantic-color-surface-interactive;
    }
    
    &.active {
      color: $semantic-color-brand-primary;
      background-color: var(--color-brand-primary-light, $semantic-color-brand-primary);
      font-weight: $base-typography-font-weight-medium;
    }
  }

  &__divider {
    background-color: $semantic-color-border-secondary;
  }
}

// Form specific colors
.skyui-form {
  &__input {
    background-color: $semantic-color-surface-primary;
    border-color: $semantic-color-border-secondary;
    color: $semantic-color-text-primary;
    
    &:focus {
      border-color: $semantic-color-border-focus;
      box-shadow: 0 0 0 3px $semantic-color-focus-ring;
    }
    
    &.error {
      border-color: $semantic-color-border-error;
    }
    
    &:disabled {
      background-color: $semantic-color-surface-disabled;
      border-color: $semantic-color-border-disabled;
      color: $semantic-color-text-disabled;
    }
  }

  &__label {
    color: $semantic-color-text-primary;
    
    &.required {
      &::after {
        color: $semantic-color-danger;
      }
    }
  }
}

// ==========================================================================
// STATUS AND NOTIFICATION COLORS  
// ==========================================================================
// Color patterns for status indicators and notifications

.skyui-status {
  &--online {
    color: $semantic-color-success;
    
    &::before {
      content: '●';
      margin-right: $semantic-spacing-component-2xs;
    }
  }

  &--offline {
    color: $semantic-color-danger;
    
    &::before {
      content: '●';
      margin-right: $semantic-spacing-component-2xs;
    }
  }

  &--pending {
    color: $semantic-color-warning;
    
    &::before {
      content: '●';
      margin-right: $semantic-spacing-component-2xs;
    }
  }

  &--inactive {
    color: $semantic-color-text-tertiary;
    
    &::before {
      content: '●';
      margin-right: $semantic-spacing-component-2xs;
    }
  }
}