// _typography.scss - Centralized typography system for the entire market_dashboard project

// ==========================================
// FONT FAMILIES
// ==========================================
$font-family-primary: Arial, sans-serif;
$font-family-secondary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
$font-family-monospace: 'Courier New', Consolas, 'Liberation Mono', monospace;
$font-family-serif: Georgia, 'Times New Roman', Times, serif;

// ==========================================
// FONT SIZES
// ==========================================
$font-size-xs: 10px;
$font-size-sm: 12px;
$font-size-base: 14px;
$font-size-md: 16px;
$font-size-lg: 18px;
$font-size-xl: 20px;
$font-size-xxl: 22px;
$font-size-xxxl: 24px;

// Heading sizes
$font-size-h1: 35px;
$font-size-h2: 28px;
$font-size-h3: 22px;
$font-size-h4: 18px;
$font-size-h5: 16px;
$font-size-h6: 14px;

// ==========================================
// FONT WEIGHTS
// ==========================================
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;
$font-weight-extrabold: 800;

// ==========================================
// LINE HEIGHTS
// ==========================================
$line-height-tight: 1.2;
$line-height-snug: 1.3;
$line-height-normal: 1.4;
$line-height-relaxed: 1.5;
$line-height-loose: 1.6;

// ==========================================
// LETTER SPACING
// ==========================================
$letter-spacing-tight: -0.025em;
$letter-spacing-normal: 0;
$letter-spacing-wide: 0.025em;
$letter-spacing-wider: 0.05em;
$letter-spacing-widest: 0.1em;

// ==========================================
// TEXT DECORATION
// ==========================================
$text-decoration-none: none;
$text-decoration-underline: underline;

// ==========================================
// TYPOGRAPHY MIXINS
// ==========================================
@mixin text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin text-break {
  word-wrap: break-word;
  word-break: break-word;
}

@mixin heading-base {
  font-weight: $font-weight-bold;
  line-height: $line-height-tight;
  margin-bottom: $spacing-lg;
}

@mixin body-text {
  font-family: $font-family-primary;
  font-size: $font-size-base;
  font-weight: $font-weight-normal;
  line-height: $line-height-normal;
}

@mixin small-text {
  font-size: $font-size-sm;
  line-height: $line-height-normal;
}

@mixin large-text {
  font-size: $font-size-lg;
  line-height: $line-height-relaxed;
}

// ==========================================
// HEADING MIXINS
// ==========================================
@mixin h1 {
  @include heading-base;
  font-size: $font-size-h1;
}

@mixin h2 {
  @include heading-base;
  font-size: $font-size-h2;
  margin-bottom: $spacing-xxl;
}

@mixin h3 {
  @include heading-base;
  font-size: $font-size-h3;
  margin-bottom: $spacing-xl;
}

@mixin h4 {
  @include heading-base;
  font-size: $font-size-h4;
}

@mixin h5 {
  @include heading-base;
  font-size: $font-size-h5;
}

@mixin h6 {
  @include heading-base;
  font-size: $font-size-h6;
}