@use '../../config' as *;
@use '../functions' as *;

////
/// @package theming
/// @group Typography
////

$typeface: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
$h1: type-style(
    $font-size: rem(68px),
    $font-weight: 400,
    $letter-spacing: normal,
    $line-height: rem(76px),
    $text-transform: none,
    $margin-top: 0,
    $margin-bottom: 0,
);
$h2: type-style(
    $font-size: rem(42px),
    $font-weight: 400,
    $letter-spacing: normal,
    $line-height: rem(52px),
    $text-transform: none,
    $margin-top: 0,
    $margin-bottom: 0,
);
$h3: type-style(
    $font-size: rem(32px),
    $font-weight: 400,
    $letter-spacing: normal,
    $line-height: rem(40px),
    $text-transform: none,
    $margin-top: 0,
    $margin-bottom: 0,
);
$h4: type-style(
    $font-size: rem(28px),
    $font-weight: 400,
    $letter-spacing: normal,
    $line-height: rem(36px),
    $text-transform: none,
    $margin-top: 0,
    $margin-bottom: 0,
);
$h5: type-style(
    $font-size: rem(24px),
    $font-weight: 400,
    $letter-spacing: normal,
    $line-height: rem(32px),
    $text-transform: none,
    $margin-top: 0,
    $margin-bottom: 0,
);
$h6: type-style(
    $font-size: rem(20px),
    $font-weight: 400,
    $letter-spacing: normal,
    $line-height: rem(28px),
    $text-transform: none,
    $margin-top: 0,
    $margin-bottom: 0,
);
$body-1: type-style(
    $font-size: rem(16px),
    $font-weight: 400,
    $letter-spacing: normal,
    $line-height: rem(22px),
    $text-transform: none,
    $margin-top: 0,
    $margin-bottom: 0,
);
$body-2: type-style(
    $font-size: rem(14px),
    $font-weight: 400,
    $letter-spacing: normal,
    $line-height: rem(20px),
    $text-transform: none,
    $margin-top: 0,
    $margin-bottom: 0,
);
$subtitle-1: type-style(
    $font-size: rem(18px),
    $font-weight: 400,
    $letter-spacing: normal,
    $line-height: rem(24px),
    $text-transform: none,
    $margin-top: 0,
    $margin-bottom: 0,
);
$subtitle-2: type-style(
    $font-size: rem(14px),
    $font-weight: 700,
    $letter-spacing: normal,
    $line-height: rem(20px),
    $text-transform: none,
    $margin-top: 0,
    $margin-bottom: 0,
);
$button: type-style(
    $font-size: rem(14px),
    $font-weight: 600,
    $letter-spacing: normal,
    $line-height: rem(14px),
    $text-transform: capitalize,
    $margin-top: 0,
    $margin-bottom: 0,
);
$caption: type-style(
    $font-size: rem(12px),
    $font-weight: 400,
    $font-style: normal,
    $letter-spacing: normal,
    $line-height: rem(16px),
    $text-transform: none,
);
$overline: type-style(
    $font-size: rem(10px),
    $font-weight: 400,
    $letter-spacing: normal,
    $line-height: rem(14px),
    $text-transform: uppercase,
    $margin-top: 0,
    $margin-bottom: 0,
);
$type-scale: type-scale(
    $_theme: 'fluent',
    $h1: $h1,
    $h2: $h2,
    $h3: $h3,
    $h4: $h4,
    $h5: $h5,
    $h6: $h6,
    $body-1: $body-1,
    $body-2: $body-2,
    $subtitle-1: $subtitle-1,
    $subtitle-2: $subtitle-2,
    $button: $button,
    $caption: $caption,
    $overline: $overline,
);