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

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

$typeface: "'Nunito Sans', sans-serif";
$h1: type-style(
    $font-size: rem(36px),
    $font-weight: 300,
    $letter-spacing: 0,
    $line-height: rem(42px),
    $text-transform: none,
    $margin-top: 0,
    $margin-bottom: 0,
);
$h2: type-style(
    $font-size: rem(28px),
    $font-weight: 400,
    $letter-spacing: 0,
    $line-height: rem(36px),
    $text-transform: none,
    $margin-top: 0,
    $margin-bottom: 0,
);
$h3: type-style(
    $font-size: rem(24px),
    $font-weight: 400,
    $letter-spacing: 0,
    $line-height: rem(32px),
    $text-transform: none,
    $margin-top: 0,
    $margin-bottom: 0,
);
$h4: type-style(
    $font-size: rem(20px),
    $font-weight: 600,
    $letter-spacing: 0,
    $line-height: rem(26px),
    $text-transform: none,
    $margin-top: 0,
    $margin-bottom: 0,
);
$h5: type-style(
    $font-size: rem(16px),
    $font-weight: 600,
    $letter-spacing: 0,
    $line-height: rem(22px),
    $text-transform: none,
    $margin-top: 0,
    $margin-bottom: 0,
);
$h6: type-style(
    $font-size: rem(14px),
    $font-weight: 600,
    $letter-spacing: 0,
    $line-height: rem(20px),
    $text-transform: none,
    $margin-top: 0,
    $margin-bottom: 0,
);
$body-1: type-style(
    $font-size: rem(13px),
    $font-weight: 400,
    $letter-spacing: 0,
    $line-height: rem(18px),
    $text-transform: none,
    $margin-top: 0,
    $margin-bottom: 0,
);
$body-2: type-style(
    $font-size: rem(12px),
    $font-weight: 400,
    $letter-spacing: 0,
    $line-height: rem(16px),
    $text-transform: none,
    $margin-top: 0,
    $margin-bottom: 0,
);
$subtitle-1: type-style(
    $font-size: rem(13px),
    $font-weight: 600,
    $letter-spacing: 0,
    $line-height: rem(18px),
    $text-transform: none,
    $margin-top: 0,
    $margin-bottom: 0,
);
$subtitle-2: type-style(
    $font-size: rem(12px),
    $font-weight: 600,
    $letter-spacing: 0,
    $line-height: rem(16px),
    $text-transform: none,
    $margin-top: 0,
    $margin-bottom: 0,
);
$button: type-style(
    $font-size: rem(11px),
    $font-weight: 700,
    $letter-spacing: 0,
    $line-height: rem(15px),
    $text-transform: uppercase,
    $margin-top: 0,
    $margin-bottom: 0,
);
$caption: type-style(
    $font-size: rem(11px),
    $font-weight: 400,
    $letter-spacing: 0,
    $line-height: rem(15px),
    $text-transform: normal,
    $margin-top: 0,
    $margin-bottom: 0,
);
$overline: type-style(
    $font-size: rem(11px),
    $font-weight: 700,
    $letter-spacing: 0,
    $line-height: rem(15px),
    $text-transform: none,
    $margin-top: 0,
    $margin-bottom: 0,
);
$detail-1: type-style(
    $font-size: rem(12px),
    $font-weight: 400,
    $letter-spacing: 0,
    $line-height: rem(16px),
    $text-transform: none,
    $margin-top: 0,
    $margin-bottom: 0,
);
$detail-2: type-style(
    $font-size: rem(12px),
    $font-weight: 600,
    $letter-spacing: 0,
    $line-height: rem(16px),
    $text-transform: none,
    $margin-top: 0,
    $margin-bottom: 0,
);
$_base-scale: type-scale(
    $_theme: 'indigo',
    $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,
);
$type-scale: extend(
    $_base-scale,
    (
        detail-1: $detail-1,
        detail-2: $detail-2,
    )
);