// =============================================================================
// Typography System - ZenduONE UI Kit
// Based on Figma design system specifications
// =============================================================================

@import './colors.scss';

// -----------------------------------------------------------------------------
// Typography Variables
// -----------------------------------------------------------------------------
$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

// -----------------------------------------------------------------------------
// Typography Mixins - Display Sizes
// -----------------------------------------------------------------------------

// Display 2xl: 72px / 90px | -2% tracking
@mixin typography-display-2xl {
  font-family: $font-family-base;
  font-size: 72px;
  line-height: 90px;
  letter-spacing: -0.02em;
}

// Display xl: 60px / 72px | -2% tracking  
@mixin typography-display-xl {
  font-family: $font-family-base;
  font-size: 60px;
  line-height: 72px;
  letter-spacing: -0.02em;
}

// Display lg: 48px / 60px | -2% tracking
@mixin typography-display-lg {
  font-family: $font-family-base;
  font-size: 48px;
  line-height: 60px;
  letter-spacing: -0.02em;
}

// Display md: 36px / 44px | -2% tracking
@mixin typography-display-md {
  font-family: $font-family-base;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.02em;
}

// Display sm: 30px / 38px
@mixin typography-display-sm {
  font-family: $font-family-base;
  font-size: 30px;
  line-height: 38px;
  letter-spacing: 0;
}

// Display xs: 24px / 32px
@mixin typography-display-xs {
  font-family: $font-family-base;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0;
}

// -----------------------------------------------------------------------------
// Typography Mixins - Text Sizes
// -----------------------------------------------------------------------------

// Text xl: 20px / 30px
@mixin typography-text-xl {
  font-family: $font-family-base;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0;
}

// Text lg: 18px / 28px
@mixin typography-text-lg {
  font-family: $font-family-base;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
}

// Text md: 16px / 24px
@mixin typography-text-md {
  font-family: $font-family-base;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
}

// Text sm: 14px / 20px
@mixin typography-text-sm {
  font-family: $font-family-base;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
}

// Text xs: 12px / 18px
@mixin typography-text-xs {
  font-family: $font-family-base;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0;
}

// -----------------------------------------------------------------------------
// Typography Weight Classes
// -----------------------------------------------------------------------------
@mixin typography-weight-regular {
  font-weight: 400;
  font-style: normal;
}

@mixin typography-weight-medium {
  font-weight: 500;
  font-style: normal;
}

@mixin typography-weight-semibold {
  font-weight: 600;
  font-style: normal;
}

@mixin typography-weight-bold {
  font-weight: 700;
  font-style: normal;
}

// -----------------------------------------------------------------------------
// Typography Utility Classes
// -----------------------------------------------------------------------------
.text {
  margin: 0;
  padding: 0;
  color: $gray-900;

  // Display variants
  &-display-2xl { @include typography-display-2xl; }
  &-display-xl { @include typography-display-xl; }
  &-display-lg { @include typography-display-lg; }
  &-display-md { @include typography-display-md; }
  &-display-sm { @include typography-display-sm; }
  &-display-xs { @include typography-display-xs; }

  // Text variants
  &-xl { @include typography-text-xl; }
  &-lg { @include typography-text-lg; }
  &-md { @include typography-text-md; }
  &-sm { @include typography-text-sm; }
  &-xs { @include typography-text-xs; }

  // Weight modifiers
  &-weight-regular { @include typography-weight-regular; }
  &-weight-medium { @include typography-weight-medium; }
  &-weight-semibold { @include typography-weight-semibold; }
  &-weight-bold { @include typography-weight-bold; }
}

// -----------------------------------------------------------------------------
// Responsive Typography (Optional Enhancement)
// -----------------------------------------------------------------------------
@media (max-width: 768px) {
  .text {
    &-display-2xl { 
      font-size: 48px;
      line-height: 56px;
    }
    &-display-xl { 
      font-size: 40px;
      line-height: 48px;
    }
    &-display-lg { 
      font-size: 32px;
      line-height: 40px;
    }
  }
}