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

// Typography utility mixins that use semantic tokens
@mixin apply-typography($typography-map) {
  font-family: map-get($typography-map, font-family);
  font-size: map-get($typography-map, font-size);
  font-weight: map-get($typography-map, font-weight);
  line-height: map-get($typography-map, line-height);
  letter-spacing: map-get($typography-map, letter-spacing);
}

// ==========================================================================
// HEADING STYLES
// ==========================================================================
// Custom heading treatments that build on semantic typography

.skyui-heading {
  // Display heading for hero sections
  &--display {
    @include apply-typography($semantic-typography-heading-display);
    color: $semantic-color-text-primary;
    
    // Project-specific enhancements
    text-align: center;
    margin-bottom: $semantic-spacing-component-xl;
    
    @media (max-width: $base-breakpoint-md) {
      font-size: $base-typography-font-size-2xl;
    }
  }

  // Primary headings
  &--h1 {
    @include apply-typography($semantic-typography-heading-h1);
    color: $semantic-color-text-primary;
    margin-bottom: $semantic-spacing-component-lg;
    
    // SkyUI specific styling
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      bottom: -#{$semantic-spacing-component-xs};
      left: 0;
      width: 60px;
      height: 3px;
      background-color: $semantic-color-brand-primary;
    }
  }

  // Secondary headings
  &--h2 {
    @include apply-typography($semantic-typography-heading-h2);
    color: $semantic-color-text-primary;
    margin-bottom: $semantic-spacing-component-md;
    margin-top: $semantic-spacing-component-xl;
  }

  // Tertiary headings
  &--h3 {
    @include apply-typography($semantic-typography-heading-h3);
    color: $semantic-color-text-primary;
    margin-bottom: $semantic-spacing-component-sm;
    margin-top: $semantic-spacing-component-lg;
  }

  // Quaternary headings
  &--h4 {
    @include apply-typography($semantic-typography-heading-h4);
    color: $semantic-color-text-secondary;
    margin-bottom: $semantic-spacing-component-xs;
    margin-top: $semantic-spacing-component-md;
  }
}

// ==========================================================================
// BODY TEXT STYLES
// ==========================================================================
// Content text styles using semantic typography tokens

.skyui-text {
  // Large body text for important content
  &--large {
    @include apply-typography($semantic-typography-body-large);
    color: $semantic-color-text-primary;
    margin-bottom: $semantic-spacing-component-md;
  }

  // Standard body text
  &--medium {
    @include apply-typography($semantic-typography-body-medium);
    color: $semantic-color-text-primary;
    margin-bottom: $semantic-spacing-component-sm;
  }

  // Small body text for captions, etc.
  &--small {
    @include apply-typography($semantic-typography-body-small);
    color: $semantic-color-text-secondary;
    margin-bottom: $semantic-spacing-component-xs;
  }

  // Caption text
  &--caption {
    @include apply-typography($semantic-typography-caption);
    color: $semantic-color-text-tertiary;
  }

  // Muted/secondary text
  &--muted {
    color: $semantic-color-text-secondary;
  }

  // Emphasized text
  &--emphasis {
    color: $semantic-color-brand-primary;
    font-weight: $base-typography-font-weight-medium;
  }
}

// ==========================================================================
// INTERACTIVE TEXT STYLES
// ==========================================================================
// Text styles for buttons, links, and interactive elements

.skyui-interactive-text {
  // Button text styles
  &--button-large {
    @include apply-typography($semantic-typography-button-large);
    text-transform: uppercase;
  }

  &--button-medium {
    @include apply-typography($semantic-typography-button-medium);
    text-transform: uppercase;
  }

  &--button-small {
    @include apply-typography($semantic-typography-button-small);
    text-transform: uppercase;
  }

  // Link styles
  &--link {
    @include apply-typography($semantic-typography-body-medium);
    color: $semantic-color-interactive-primary;
    text-decoration: none;
    
    &:hover {
      color: var(--color-primary-hover, $semantic-color-interactive-primary);
      filter: brightness(0.9);
      text-decoration: underline;
    }
    
    &:focus {
      outline: 2px solid $semantic-color-border-focus;
      outline-offset: 2px;
    }
  }

  // Navigation text
  &--nav-primary {
    @include apply-typography($semantic-typography-nav-primary);
    color: $semantic-color-text-primary;
    
    &.active {
      color: $semantic-color-brand-primary;
      font-weight: $base-typography-font-weight-semibold;
    }
  }

  &--nav-secondary {
    @include apply-typography($semantic-typography-nav-secondary);
    color: $semantic-color-text-secondary;
  }
}

// ==========================================================================
// FORM TEXT STYLES
// ==========================================================================
// Text styles for form elements using semantic tokens

.skyui-form-text {
  // Labels
  &--label {
    @include apply-typography($semantic-typography-label);
    color: $semantic-color-text-primary;
    margin-bottom: $semantic-spacing-component-xs;
    display: block;
    
    &.required::after {
      content: ' *';
      color: $semantic-color-danger;
    }
  }

  // Input text
  &--input {
    @include apply-typography($semantic-typography-input);
    color: $semantic-color-text-primary;
    
    &::placeholder {
      @include apply-typography($semantic-typography-placeholder);
      color: $semantic-color-text-tertiary;
    }
  }

  // Help text
  &--help {
    @include apply-typography($semantic-typography-caption);
    color: $semantic-color-text-secondary;
    margin-top: $semantic-spacing-component-xs;
  }

  // Error text
  &--error {
    @include apply-typography($semantic-typography-caption);
    color: $semantic-color-danger;
    margin-top: $semantic-spacing-component-xs;
  }
}

// ==========================================================================
// CODE TEXT STYLES
// ==========================================================================
// Code and monospace text styles

.skyui-code {
  // Inline code
  &--inline {
    @include apply-typography($semantic-typography-code-inline);
    background-color: $semantic-color-surface-secondary;
    color: $semantic-color-text-primary;
    padding: $semantic-spacing-component-2xs $semantic-spacing-component-xs;
    border-radius: $semantic-border-radius-sm;
    border: 1px solid $semantic-color-border-secondary;
  }

  // Code block
  &--block {
    @include apply-typography($semantic-typography-code-block);
    background-color: $semantic-color-surface-sunken;
    color: $semantic-color-text-primary;
    padding: $semantic-spacing-component-md;
    border-radius: $semantic-border-radius-md;
    border: 1px solid $semantic-color-border-secondary;
    overflow-x: auto;
    white-space: pre;
  }
}