@use 'functions';
@use 'breakpoints';
@use 'general';

@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham/Gotham-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham/Gotham-BlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham/Gotham-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham/Gotham-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham/Gotham-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham/Gotham-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham/Gotham-Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham/Gotham-BookItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham/Gotham-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham/Gotham-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham/Gotham-Medium.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham/Gotham-MediumItalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham/Gotham-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham/Gotham-ThinItalic.otf') format('opentype');
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham/Gotham-Ultra.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham/Gotham-UltraItalic.otf') format('opentype');
  font-weight: 800;
  font-style: italic;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham/Gotham-XLight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham/Gotham-XLightItalic.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
}

// Typography Variables
$font-primary: 'Gotham', sans-serif;
$font-secondary: 'Permanent Marker', cursive;

$font-family-base: $font-primary;
$font-size-base: 16px;
$line-height-base: 20px;

$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-semibold: 600;
$font-weight-medium: 500;
$font-weight-bold: 700;
$font-weight-black: 900;
$font-weight-ultra: 1000;

@font-face {
  font-family: 'Permanent Marker';
  src: url('../fonts/Gotham/Gotham-Black.otf') format('otf');
      // url('../fonts/Permanent_Marker/PermanentMarker-Regular.ttf') format('ttf');
  font-weight: 400;
  font-style: normal;
}

// Mixin for creating responsive text styles
@mixin responsive-text-style($styles-map) {
  @each $breakpoint, $style in $styles-map {
    @if $breakpoint == 'mobile' {
      @media (max-width: breakpoints.$mobile) {
        font-size: functions.rem(map-get($style, 'font-size'));
        line-height: map-get($style, 'line-height');
      }
    } @else if $breakpoint == 'tablet' {
      @media (min-width: #{breakpoints.$mobile + 1}) and (max-width: breakpoints.$tablet) {
        font-size: functions.rem(map-get($style, 'font-size'));
        line-height: map-get($style, 'line-height');
      }
    } @else if $breakpoint == 'desktop' {
      @media (min-width: #{breakpoints.$tablet + 1}) {
        font-size: functions.rem(map-get($style, 'font-size'));
        line-height: map-get($style, 'line-height');
      }
    }
  }
}

// Font Family Classes
.#{general.$prefix}font-primary {
  font-family: $font-primary;
}

.#{general.$prefix}font-secondary {
  font-family: $font-secondary;
}

// Heading Styles
$heading-styles: (
  'xl': (
    'mobile': ('font-size': 40, 'line-height': normal),
    'tablet': ('font-size': 60, 'line-height': normal),
    'desktop': ('font-size': 80, 'line-height': normal)
  ),
  'l': (
    'mobile': ('font-size': 44, 'line-height': normal),
    'tablet': ('font-size': 50, 'line-height': normal),
    'desktop': ('font-size': 64, 'line-height': normal)
  ),
  'm': (
    'mobile': ('font-size': 46, 'line-height': normal),
    'tablet': ('font-size': 50, 'line-height': normal),
    'desktop': ('font-size': 56, 'line-height': normal)
  ),
  's': (
    'mobile': ('font-size': 36, 'line-height': normal),
    'tablet': ('font-size': 41, 'line-height': normal),
    'desktop': ('font-size': 48, 'line-height': 4rem)
  )
);

@each $size, $styles in $heading-styles {
  .#{general.$prefix}heading-#{$size} {
    @include responsive-text-style($styles);
  }

  // Add mobile-specific classes
  .#{general.$prefix}heading-sm-#{$size} {
    @media (max-width: breakpoints.$mobile) {
      font-size: functions.rem(map-get(map-get($styles, 'mobile'), 'font-size'));
      line-height: map-get(map-get($styles, 'mobile'), 'line-height');
    }
  }
}

// HTML Heading Styles
$html-heading-styles: (
  'h1': (
    'mobile': ('font-size': 32, 'line-height': 2rem),
    'tablet': ('font-size': 36, 'line-height': 2.3rem),
    'desktop': ('font-size': 40, 'line-height': 3rem)
  ),
  'h2': (
    'mobile': ('font-size': 30, 'line-height': 2.3rem),
    'tablet': ('font-size': 33, 'line-height': 2.3rem),
    'desktop': ('font-size': 36, 'line-height': 2.3rem)
  ),
  'h3': (
    'mobile': ('font-size': 28, 'line-height': 2rem),
    'tablet': ('font-size': 30, 'line-height': 2rem),
    'desktop': ('font-size': 32, 'line-height': 2rem)
  ),
  'h4': (
    'mobile': ('font-size': 24, 'line-height': 2rem),
    'tablet': ('font-size': 26, 'line-height': 2rem),
    'desktop': ('font-size': 28, 'line-height': 2rem)
  ),
  'h5': (
    'mobile': ('font-size': 22, 'line-height': 1.6rem),
    'tablet': ('font-size': 23, 'line-height': 1.6rem),
    'desktop': ('font-size': 24, 'line-height': 1.6rem)
  ),
  'h6': (
    'mobile': ('font-size': 18, 'line-height': 1.5rem),
    'tablet': ('font-size': 19, 'line-height': 1.5rem),
    'desktop': ('font-size': 20, 'line-height': 1.5rem)
  )
);

@each $heading, $styles in $html-heading-styles {
  .#{general.$prefix}heading-#{$heading} {
    @include responsive-text-style($styles);
  }
  
  #{$heading} {
    @extend .#{general.$prefix}heading-#{$heading};
  }

  // Add mobile-specific classes
  .#{general.$prefix}heading-sm-#{$heading} {
    @media (max-width: breakpoints.$mobile) {
      font-size: functions.rem(map-get(map-get($styles, 'mobile'), 'font-size'));
      line-height: map-get(map-get($styles, 'mobile'), 'line-height');
    }
  }
}

// Body Text Styles
$body-styles: (
  'l': (
    'mobile': ('font-size': 16, 'line-height': 1.375rem),
    'tablet': ('font-size': 17, 'line-height': 1.375rem),
    'desktop': ('font-size': 18, 'line-height': 1.375rem)
  ),
  'm': (
    'mobile': ('font-size': 14, 'line-height': 1.2rem),
    'tablet': ('font-size': 15, 'line-height': 1.2rem),
    'desktop': ('font-size': 16, 'line-height': 1.2rem)
  ),
  's': (
    'mobile': ('font-size': 12, 'line-height': 1rem),
    'tablet': ('font-size': 13, 'line-height': 1rem),
    'desktop': ('font-size': 14, 'line-height': 1rem)
  ),
  'xs': (
    'mobile': ('font-size': 10, 'line-height': 1rem),
    'tablet': ('font-size': 11, 'line-height': 1rem),
    'desktop': ('font-size': 12, 'line-height': 1rem)
  )
);

@each $size, $styles in $body-styles {
  .#{general.$prefix}body-#{$size} {
    @include responsive-text-style($styles);
  }

  // Add mobile-specific classes
  .#{general.$prefix}body-sm-#{$size} {
    @media (max-width: breakpoints.$mobile) {
      font-size: functions.rem(map-get(map-get($styles, 'mobile'), 'font-size'));
      line-height: map-get(map-get($styles, 'mobile'), 'line-height');
    }
  }
}

// Font Weight Classes
@each $weight, $value in (
  'light': $font-weight-light,
  'regular': $font-weight-regular,
  'semibold': $font-weight-semibold,
  'medium': $font-weight-medium,
  'bold': $font-weight-bold,
  'black': $font-weight-black,
  'ultra': $font-weight-ultra
) {
  .#{general.$prefix}font-#{$weight} {
    font-weight: $value;
  }
}

// Additional Typography Utilities
.#{general.$prefix} {
  &text-uppercase {
    text-transform: uppercase;
  }

  &text-lowercase {
    text-transform: lowercase;
  }

  &text-capitalize {
    text-transform: capitalize;
  }

  &text-center {
    text-align: center;
  }

  &text-left {
    text-align: left;
  }

  &text-right {
    text-align: right;
  }
}