@use 'sass:map';
@use 'sass:math';

// Font Family
$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

// Font Weights
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;

// Font Sizes & Line Heights - Desktop
$font-sizes: (
  'headline-1': (
    'size': 64px,
    'line-height': 76px,
    'weight': $font-weight-semibold
  ),
  'headline-2': (
    'size': 36px,
    'line-height': 44px,
    'weight': $font-weight-semibold
  ),
  'headline-3': (
    'size': 28px,
    'line-height': 36px,
    'weight': $font-weight-semibold
  ),
  'headline-4': (
    'size': 20px,
    'line-height': 28px,
    'weight': $font-weight-semibold
  ),
  'body-1': (
    'size': 18px,
    'line-height': 28px,
    'weight': $font-weight-regular
  ),
  'body-2': (
    'size': 16px,
    'line-height': 24px,
    'weight': $font-weight-regular
  ),
  'body-3': (
    'size': 14px,
    'line-height': 20px,
    'weight': $font-weight-regular
  ),
  'caption-1': (
    'size': 16px,
    'line-height': 24px,
    'weight': $font-weight-regular
  ),
  'caption-2': (
    'size': 12px,
    'line-height': 16px,
    'weight': $font-weight-regular
  )
);

// Font Sizes - Mobile
$font-sizes-mobile: (
  'headline-1': (
    'size': 28px,
    'line-height': 36px,
    'weight': $font-weight-bold
  ),
  'headline-2': (
    'size': 20px,
    'line-height': 28px,
    'weight': $font-weight-semibold
  ),
  'headline-3': (
    'size': 18px,
    'line-height': 24px,
    'weight': $font-weight-semibold
  ),
  'headline-4': (
    'size': 18px,
    'line-height': 24px,
    'weight': $font-weight-semibold
  ),
  'body': (
    'size': 16px,
    'line-height': 24px,
    'weight': $font-weight-medium
  ),
  'caption': (
    'size': 14px,
    'line-height': 20px,
    'weight': $font-weight-regular
  )
);

// Breakpoints
$breakpoint-mobile: 768px;
$breakpoint-tablet: 1024px;
$breakpoint-desktop: 1280px;

// Mixins
@mixin heading($level) {
  @if map.has-key($font-sizes, $level) {
    $props: map.get($font-sizes, $level);
    font-size: map.get($props, 'size');
    line-height: map.get($props, 'line-height');
    font-weight: map.get($props, 'weight');
    font-family: $font-family-base;
  }
}

@mixin responsive-text {
  @media (max-width: $breakpoint-mobile) {
    font-size: 14px;
    line-height: 20px;
  }
}