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

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

$typeface: 'Titillium Web', sans-serif;
$h1: type-style(
    $font-size: rem(96px),
    $font-weight: 300,
    $font-style: normal,
    $letter-spacing: rem(-1.5px),
    $line-height: rem(112px),
    $text-transform: none,
    $margin-top: rem(28px),
    $margin-bottom: rem(56px),
);
$h2: type-style(
    $font-size: rem(60px),
    $font-weight: 300,
    $font-style: normal,
    $letter-spacing: rem(-0.5px),
    $line-height: rem(71px),
    $text-transform: none,
    $margin-top: rem(28px),
    $margin-bottom: rem(28px),
);
$h3: type-style(
    $font-size: rem(48px),
    $font-weight: 400,
    $font-style: normal,
    $letter-spacing: 0,
    $line-height: rem(57px),
    $text-transform: none,
    $margin-top: rem(28px),
    $margin-bottom: 0,
);
$h4: type-style(
    $font-size: rem(34px),
    $font-weight: 400,
    $font-style: normal,
    $letter-spacing: rem(0.25px),
    $line-height: rem(40px),
    $text-transform: none,
    $margin-top: rem(28px),
    $margin-bottom: 0,
);
$h5: type-style(
    $font-size: rem(24px),
    $font-weight: 400,
    $font-style: normal,
    $letter-spacing: 0,
    $line-height: rem(28px),
    $text-transform: none,
    $margin-top: rem(28px),
    $margin-bottom: 0,
);
$h6: type-style(
    $font-size: rem(20px),
    $font-weight: 600,
    $font-style: normal,
    $letter-spacing: rem(0.15px),
    $line-height: rem(24px),
    $text-transform: none,
    $margin-top: 0,
    $margin-bottom: 0,
);
$body-1: type-style(
    $font-size: rem(16px),
    $font-weight: 400,
    $font-style: normal,
    $letter-spacing: rem(0.5px),
    $line-height: rem(28px),
    $text-transform: none,
    $margin-top: rem(28px),
    $margin-bottom: rem(16),
);
$body-2: type-style(
    $font-size: rem(14px),
    $font-weight: 400,
    $font-style: normal,
    $letter-spacing: rem(0.25px),
    $line-height: rem(20px),
    $text-transform: none,
);
$subtitle-1: type-style(
    $font-size: rem(16px),
    $font-weight: 400,
    $font-style: normal,
    $letter-spacing: rem(0.15px),
    $line-height: rem(24px),
    $text-transform: none,
);
$subtitle-2: type-style(
    $font-size: rem(14px),
    $font-weight: 600,
    $font-style: normal,
    $letter-spacing: rem(0.1px),
    $line-height: rem(24px),
    $text-transform: none,
);
$button: type-style(
    $font-size: rem(14px),
    $font-weight: 600,
    $font-style: normal,
    $letter-spacing: rem(0.75px),
    $line-height: rem(16px),
    $text-transform: uppercase,
);
$caption: type-style(
    $font-size: rem(12px),
    $font-weight: 400,
    $font-style: normal,
    $letter-spacing: rem(0.4px),
    $line-height: rem(16px),
    $text-transform: none,
);
$overline: type-style(
    $font-size: rem(10px),
    $font-weight: 400,
    $font-style: normal,
    $letter-spacing: rem(1.5px),
    $line-height: rem(16px),
    $text-transform: uppercase,
);
$type-scale: type-scale(
    $_theme: 'material',
    $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,
);