@use "sass:math";
@use "../tools/convert";
@use "../tokens/space";

$body-text: (
  small: (
    default: (
      font-size: convert.to-rem(14px),
      line-height: convert.to-rem(20px),
      font-weight: 400,
      letter-spacing: convert.to-rem(0px),
    ),
    md: (
      font-size: convert.to-rem(16px),
      line-height: convert.to-rem(24px),
      font-weight: 400,
      letter-spacing: convert.to-rem(-0.1px),
    ),
    lg: (
      font-size: convert.to-rem(16px),
      line-height: convert.to-rem(24px),
      font-weight: 400,
      letter-spacing: convert.to-rem(-0.1px),
    ),
  ),
  default: (
    default: (
      font-size: convert.to-rem(16px),
      line-height: convert.to-rem(24px),
      font-weight: 400,
      letter-spacing: convert.to-rem(-0.1px),
    ),
    md: (
      font-size: convert.to-rem(18px),
      line-height: convert.to-rem(26px),
      font-weight: 400,
      letter-spacing: convert.to-rem(-0.2px),
    ),
    lg: (
      font-size: convert.to-rem(18px),
      line-height: convert.to-rem(26px),
      font-weight: 400,
      letter-spacing: convert.to-rem(-0.2px),
    ),
  ),
  large: (
    default: (
      font-size: convert.to-rem(18px),
      line-height: convert.to-rem(26px),
      font-weight: 400,
      letter-spacing: convert.to-rem(-0.2px),
    ),
    md: (
      font-size: convert.to-rem(20px),
      line-height: convert.to-rem(30px),
      font-weight: 400,
      letter-spacing: convert.to-rem(-0.2px),
    ),
    lg: (
      font-size: convert.to-rem(20px),
      line-height: convert.to-rem(30px),
      font-weight: 400,
      letter-spacing: convert.to-rem(-0.2px),
    ),
  ),
);

$heading-base: (
  margin-top: 0,
  margin-bottom: space.get("large"),
);

$display-base: (
  margin-top: 0,
  margin-bottom: space.get("large"),
);

$headings: (
  1: (
    default: (
      font-size: convert.to-rem(34px),
      line-height: convert.to-rem(40px),
      font-weight: 300,
      letter-spacing: convert.to-rem(-0.4px),
    ),
    md: (
      font-size: convert.to-rem(40px),
      line-height: convert.to-rem(46px),
      font-weight: 300,
      letter-spacing: convert.to-rem(-0.6px),
    ),
    xl: (
      font-size: convert.to-rem(50px),
      line-height: convert.to-rem(56px),
      font-weight: 300,
      letter-spacing: convert.to-rem(-0.6px),
    ),
  ),
  2: (
    default: (
      font-size: convert.to-rem(28px),
      line-height: convert.to-rem(32px),
      font-weight: 300,
      letter-spacing: convert.to-rem(-0.2px),
    ),
    md: (
      font-size: convert.to-rem(34px),
      line-height: convert.to-rem(40px),
      font-weight: 300,
      letter-spacing: convert.to-rem(-0.4px),
    ),
    xl: (
      font-size: convert.to-rem(40px),
      line-height: convert.to-rem(46px),
      font-weight: 300,
      letter-spacing: convert.to-rem(-0.6px),
    ),
  ),
  3: (
    default: (
      font-size: convert.to-rem(24px),
      line-height: convert.to-rem(28px),
      font-weight: 700,
      letter-spacing: convert.to-rem(-0.6px),
    ),
    md: (
      font-size: convert.to-rem(28px),
      line-height: convert.to-rem(32px),
      font-weight: 700,
      letter-spacing: convert.to-rem(-0.6px),
    ),
  ),
  4: (
    default: (
      font-size: convert.to-rem(16px),
      line-height: convert.to-rem(20px),
      font-weight: 700,
      letter-spacing: convert.to-rem(-0.1px),
    ),
    md: (
      font-size: convert.to-rem(24px),
      line-height: convert.to-rem(28px),
      font-weight: 700,
      letter-spacing: convert.to-rem(-0.4px),
    ),
  ),
  5: (
    default: (
      font-size: convert.to-rem(16px),
      line-height: convert.to-rem(20px),
      font-weight: 700,
      letter-spacing: convert.to-rem(-0.1px),
    ),
    md: (
      font-size: convert.to-rem(18px),
      line-height: convert.to-rem(22px),
      font-weight: 700,
      letter-spacing: convert.to-rem(-0.2px),
    ),
  ),
  6: (
    default: (
      font-size: convert.to-rem(16px),
      line-height: convert.to-rem(20px),
      font-weight: 700,
      letter-spacing: convert.to-rem(-0.1px),
    ),
    md: (
      font-size: convert.to-rem(18px),
      line-height: convert.to-rem(22px),
      font-weight: 700,
      letter-spacing: convert.to-rem(-0.2px),
    ),
  ),
);

$displays: (
  1: (
    default: (
      font-size: convert.to-rem(40px),
      line-height: convert.to-rem(46px),
      font-weight: 300,
      letter-spacing: convert.to-rem(-0.6px),
    ),
    md: (
      font-size: convert.to-rem(80px),
      line-height: convert.to-rem(92px),
      font-weight: 300,
      letter-spacing: convert.to-rem(-1.4px),
    ),
    xl: (
      font-size: convert.to-rem(140px),
      line-height: convert.to-rem(158px),
      font-weight: 300,
      letter-spacing: convert.to-rem(-2.6px),
    ),
  ),
  2: (
    default: (
      font-size: convert.to-rem(40px),
      line-height: convert.to-rem(46px),
      font-weight: 300,
      letter-spacing: convert.to-rem(-0.6px),
    ),
    md: (
      font-size: convert.to-rem(80px),
      line-height: convert.to-rem(92px),
      font-weight: 300,
      letter-spacing: convert.to-rem(-1.4px),
    ),
  ),
  3: (
    default: (
      font-size: convert.to-rem(40px),
      line-height: convert.to-rem(46px),
      font-weight: 300,
      letter-spacing: convert.to-rem(-0.6px),
    ),

    md: (
      font-size: convert.to-rem(50px),
      line-height: convert.to-rem(56px),
      font-weight: 300,
      letter-spacing: convert.to-rem(-0.6px),
    ),

    xl: (
      font-size: convert.to-rem(60px),
      line-height: convert.to-rem(68px),
      font-weight: 300,
      letter-spacing: convert.to-rem(-1px),
    ),
  ),
);

$list-spacing: (
  "default": space.get("small"),
  "condensed": space.get("xsmall"),
);

$caption: (
  small: (
    font-size: convert.to-rem(14px),
    line-height: convert.to-rem(16px),
    font-weight: 400,
  ),
  default: (
    font-size: convert.to-rem(16px),
    line-height: convert.to-rem(18px),
    font-weight: 400,
    letter-spacing: convert.to-rem(-0.1px),
  ),
  large: (
    font-size: convert.to-rem(18px),
    line-height: convert.to-rem(20px),
    font-weight: 400,
    letter-spacing: convert.to-rem(-0.2px),
  ),
);