@use 'sass:map';

// Typography
$font-family-sans-serif:
  Poppins,
  Futura,
  -apple-system,
  BlinkMacSystemFont,
  'Segoe UI',
  Roboto,
  'Helvetica Neue',
  Arial,
  sans-serif,
  'Apple Color Emoji',
  'Segoe UI Emoji',
  'Segoe UI Symbol' !default;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
$font-family-body: $font-family-sans-serif !default;

$font-weight-thin: 300 !default;
$font-weight-regular: 400 !default;
$font-weight-semi-bold: 500 !default;
$font-weight-bold: 700 !default;

$base-rem-large: 16px !default;

$font-size-base: 1rem !default;
/* prettier-ignore */
$font-size: (
    xxs: ($font-size-base * .625),  // 10px - 0.625 rem
    xs: ($font-size-base * .75),    // 12px - 0.75 rem
    s:  ($font-size-base * .875),   // 14px - 0.875 rem
    m:  $font-size-base,            // 16px - 1 rem
    l:  ($font-size-base * 1.125),  // 18px - 1.125 rem
    xl:  ($font-size-base * 1.25),  // 20px - 1.25 rem
    xxl:  ($font-size-base * 1.5),  // 24px - 1.5 rem
    // display
    d1:     ($font-size-base * 1.75),   // 28px - 1.75 rem
    d1-md:  ($font-size-base * 2),      // 32px - 2 rem
    d2:     ($font-size-base * 2.25),   // 36px - 2.25 rem
    d2-md:  ($font-size-base * 3),      // 48px - 3 rem
    d3:     ($font-size-base * 3.5),    // 56px - 3.5 rem
    d3-md:  ($font-size-base * 4.5),    // 72px - 4.5 rem
) !default;
@function font-size($t-shirt-size) {
  @return map.get($font-size, $t-shirt-size);
}
@mixin font-size($size) {
  font-size: font-size($size);
}
/* prettier-ignore */
$line-height: (
    xs: ($font-size-base * .875),   // 14px - 0.875 rem
    s:  ($font-size-base * 1),      // 16px - 1 rem
    m:  ($font-size-base * 1.25),   // 20px - 1.25 rem
    l:  ($font-size-base * 1.5),    // 24px - 1.5 rem
    xl: ($font-size-base * 1.75),   // 28px - 1.75 rem
    xxl: ($font-size-base * 2),     // 32px - 2 rem
    // display
    d1:     ($font-size-base * 2.25),   // 36px - 2.25 rem
    d1-md:  ($font-size-base * 2.75),   // 44px - 2.75 rem
    d2:     ($font-size-base * 3),      // 48px - 3 rem
    d2-md:  ($font-size-base * 4),      // 64px - 4 rem
    d3:     ($font-size-base * 4.5),    // 72px - 4.5 rem
    d3-md:  ($font-size-base * 6),      // 96px - 6 rem
) !default;
@function line-height($t-shirt-size) {
  @return map.get($line-height, $t-shirt-size);
}
@mixin line-height($size) {
  line-height: line-height($size);
}

@mixin size($size) {
  font-size: font-size($size);
  line-height: line-height($size);
}
/* prettier-ignore */
$letter-spacing: (
    increase-s:     .045rem,    //  0.045rem  -    0.72px
    normal:         0,          //  0
    decrease-xs:    -.025rem,   // -0.025rem  -   -0.4px
    decrease-xs-md: -.03rem,    // -0.03rem   -   -0.48px
    decrease-s:     -.045rem,   // -0.045rem  -   -0.72px
    decrease-s-md:  -.06rem,    // -0.06rem   -   -0.96px
    decrease-m:     -.08rem,    // -0.08rem   -   -1.28px
    decrease-m-md:  -.09rem,    // -0.09rem   -   -1.44px
) !default;
@function letter-spacing($t-shirt-size) {
  @return map.get($letter-spacing, $t-shirt-size);
}
@mixin letter-spacing($size) {
  letter-spacing: letter-spacing($size);
}

// TOKENS

$font-size-body-paragraph: font-size(m) !default;

$line-height-body: line-height(m) !default;

// Font weight
$font-weight-overline: $font-weight-bold !default;
$font-weight-body-xs: $font-weight-regular !default;
$font-weight-body-s: $font-weight-regular !default;
$font-weight-body-m: $font-weight-regular !default;
$font-weight-title-xxs: $font-weight-semi-bold !default;
$font-weight-title-xs: $font-weight-semi-bold !default;
$font-weight-title-s: $font-weight-semi-bold !default;
$font-weight-title-m: $font-weight-semi-bold !default;
$font-weight-title-l: $font-weight-semi-bold !default;
$font-weight-display-s: $font-weight-semi-bold !default;
$font-weight-display-m: $font-weight-semi-bold !default;

// Font size
$font-size-overline: font-size(xs) !default;
$font-size-body-xs: font-size(xs) !default;
$font-size-body-s: font-size(s) !default;
$font-size-body-m: font-size(s) !default;
$font-size-title-xxs: font-size(s) !default;
$font-size-title-xs: font-size(m) !default;
$font-size-title-s: font-size(l) !default;
$font-size-title-m: font-size(xl) !default;
$font-size-title-l: font-size(d1) !default;
$font-size-display-s: font-size(d2) !default;
$font-size-display-m: font-size(d3) !default;

$font-size-title-s-md: font-size(xl) !default;
$font-size-title-m-md: font-size(xxl) !default;
$font-size-title-l-md: font-size(d1-md) !default;
$font-size-display-s-md: font-size(d2-md) !default;
$font-size-display-m-md: font-size(d3-md) !default;

// Line height
$line-height-overline: line-height(s) !default;
$line-height-body-xs: line-height(s) !default;
$line-height-body-s: line-height(m) !default;
$line-height-body-m: line-height(l) !default;
$line-height-title-xxs: line-height(m) !default;
$line-height-title-xs: line-height(l) !default;
$line-height-title-s: line-height(l) !default;
$line-height-title-m: line-height(xl) !default;
$line-height-title-l: line-height(d1) !default;
$line-height-display-s: line-height(d2) !default;
$line-height-display-m: line-height(d3) !default;

$line-height-title-s-md: line-height(xl) !default;
$line-height-title-m-md: line-height(xxl) !default;
$line-height-title-l-md: line-height(d1-md) !default;
$line-height-display-s-md: line-height(d2-md) !default;
$line-height-display-m-md: line-height(d3-md) !default;

// Letter spacing
$letter-spacing-overline: letter-spacing(increase-s) !default;
$letter-spacing-body-xs: letter-spacing(normal) !default;
$letter-spacing-body-s: letter-spacing(normal) !default;
$letter-spacing-body-m: letter-spacing(normal) !default;
$letter-spacing-title-xxs: letter-spacing(normal) !default;
$letter-spacing-title-xs: letter-spacing(normal) !default;
$letter-spacing-title-s: letter-spacing(normal) !default;
$letter-spacing-title-m: letter-spacing(decrease-xs) !default;
$letter-spacing-title-l: letter-spacing(normal) !default;
$letter-spacing-display-s: letter-spacing(decrease-s) !default;
$letter-spacing-display-m: letter-spacing(decrease-m) !default;

$letter-spacing-title-s-md: letter-spacing(normal) !default;
$letter-spacing-title-m-md: letter-spacing(decrease-xs-md) !default;
$letter-spacing-title-l-md: letter-spacing(normal) !default;
$letter-spacing-display-s-md: letter-spacing(decrease-s-md) !default;
$letter-spacing-display-m-md: letter-spacing(decrease-m-md) !default;

@mixin overline {
  font-size: $font-size-overline;
  line-height: $line-height-overline;
  letter-spacing: $letter-spacing-overline;
  font-weight: $font-weight-overline;
  text-transform: uppercase;
}

@mixin body-xs {
  font-size: $font-size-body-xs;
  line-height: $line-height-body-xs;
  letter-spacing: $letter-spacing-body-xs;
  font-weight: $font-weight-body-xs;
}
@mixin body-s {
  font-size: $font-size-body-s;
  line-height: $line-height-body-s;
  letter-spacing: $letter-spacing-body-s;
  font-weight: $font-weight-body-s;
}
@mixin body-m {
  font-size: $font-size-body-m;
  line-height: $line-height-body-m;
  letter-spacing: $letter-spacing-body-m;
  font-weight: $font-weight-body-m;
}
@mixin title-xxs {
  font-size: $font-size-title-xxs;
  line-height: $line-height-title-xxs;
  letter-spacing: $letter-spacing-title-xxs;
  font-weight: $font-weight-title-xxs;
}
@mixin title-xs {
  font-size: $font-size-title-xs;
  line-height: $line-height-title-xs;
  letter-spacing: $letter-spacing-title-xs;
  font-weight: $font-weight-title-xs;
}
@mixin title-s-mobile {
  font-size: $font-size-title-s;
  line-height: $line-height-title-s;
  letter-spacing: $letter-spacing-title-s;
  font-weight: $font-weight-title-s;
}
@mixin title-s {
  font-size: $font-size-title-s-md;
  line-height: $line-height-title-s-md;
  letter-spacing: $letter-spacing-title-s-md;
  font-weight: $font-weight-title-s;
}
@mixin title-m-mobile {
  font-size: $font-size-title-m;
  line-height: $line-height-title-m;
  letter-spacing: $letter-spacing-title-m;
  font-weight: $font-weight-title-m;
}
@mixin title-m {
  font-size: $font-size-title-m-md;
  line-height: $line-height-title-m-md;
  letter-spacing: $letter-spacing-title-m-md;
  font-weight: $font-weight-title-m;
}
@mixin title-l-mobile {
  font-size: $font-size-title-l;
  line-height: $line-height-title-l;
  letter-spacing: $letter-spacing-title-l;
  font-weight: $font-weight-title-l;
}
@mixin title-l {
  font-size: $font-size-title-l-md;
  line-height: $line-height-title-l-md;
  letter-spacing: $letter-spacing-title-l-md;
  font-weight: $font-weight-title-l;
}
@mixin display-s-mobile {
  font-size: $font-size-display-s;
  line-height: $line-height-display-s;
  letter-spacing: $letter-spacing-display-s;
  font-weight: $font-weight-display-s;
}
@mixin display-s {
  font-size: $font-size-display-s-md;
  line-height: $line-height-display-s-md;
  letter-spacing: $letter-spacing-display-s-md;
  font-weight: $font-weight-display-s;
}
@mixin display-m-mobile {
  font-size: $font-size-display-m;
  line-height: $line-height-display-m;
  letter-spacing: $letter-spacing-display-m;
  font-weight: $font-weight-display-m;
}
@mixin display-m {
  font-size: $font-size-display-m-md;
  line-height: $line-height-display-m-md;
  letter-spacing: $letter-spacing-display-m-md;
  font-weight: $font-weight-display-m;
}