@use "sass:color";

// Typography
//

// Font families
//
$font-family-primary--base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif !default;
$font-family-primary--monospace: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
$font-family-primary--print: 'Georgia', 'Times New Roman', 'Times', serif !default;

$font-families-primary: (
    'base': $font-family-primary--base,
    'monospace': $font-family-primary--monospace,
    'print': $font-family-primary--print,
) !default;

@function font-family-primary($font-family-key) {
    @return var(--font-family-primary--#{$font-family-key});
}

$font-family-secondary--base: $font-family-primary--base !default;
$font-family-secondary--monospace: $font-family-primary--monospace !default;
$font-family-secondary--print: $font-family-primary--print !default;

$font-families-secondary: (
    'base': $font-family-secondary--base,
    'monospace': $font-family-secondary--monospace,
    'print': $font-family-secondary--print,
) !default;

@function font-family-secondary($font-family-key) {
    @return var(--font-family-secondary--#{$font-family-key});
}

// Tracking
//
$letter-spacing: 0 !default;

// Font size
// Assumes the browser default, typically `16px`
//
$font-size: 1rem !default;

$font-size--xs: calc(var(--font-size) * var(--size-multiplier--xs)) !default;
$font-size--sm: calc(var(--font-size) * var(--size-multiplier--sm)) !default;
$font-size--md: calc(var(--font-size) * var(--size-multiplier--md)) !default;
$font-size--lg: calc(var(--font-size) * var(--size-multiplier--lg)) !default;
$font-size--xl: calc(var(--font-size) * var(--size-multiplier--xl)) !default;

$font-sizes: (
    'xs': $font-size--xs,
    'sm': $font-size--sm,
    'md': $font-size--md,
    'lg': $font-size--lg,
    'xl': $font-size--xl,
) !default;

@function font-size($font-size-key: null) {
    @if not ($font-size-key) {
        @return var(--font-size);
    }

    @return var(--font-size--#{$font-size-key});
}

// Font weight
//
$font-weight--extralight: 200 !default;
$font-weight--light: 300 !default;
$font-weight--normal: normal !default;
$font-weight--semibold: 600 !default;
$font-weight--bold: bold !default;
$font-weight--black: 900 !default;
$font-weight--lighter: lighter !default;
$font-weight--bolder: bolder !default;

$font-weights: (
    'extralight': $font-weight--extralight,
    'light': $font-weight--light,
    'lighter': $font-weight--lighter,
    'normal': $font-weight--normal,
    'semibold': $font-weight--semibold,
    'bold': $font-weight--bold,
    'bolder': $font-weight--bolder,
    'black': $font-weight--black,
) !default;

@function font-weight($font-weight-key: 'normal') {
    @return var(--font-weight--#{$font-weight-key});
}

// Line height
//
$line-height: 1.5 !default;

// Muted text color
//
$text-muted: color('gray-60') !default;

// Headings
//
$h1--font-size: calc(#{font-size()} * var(--scale-ratio--pow-5)) !default;
$h2--font-size: calc(#{font-size()} * var(--scale-ratio--pow-4)) !default;
$h3--font-size: calc(#{font-size()} * var(--scale-ratio--pow-3)) !default;
$h4--font-size: calc(#{font-size()} * var(--scale-ratio--pow-2)) !default;
$h5--font-size: calc(#{font-size()} * var(--scale-ratio--pow-1)) !default;
$h6--font-size: calc(#{font-size()}) !default;

$heading--font-size: (
    'h1': $h1--font-size,
    'h2': $h2--font-size,
    'h3': $h3--font-size,
    'h4': $h4--font-size,
    'h5': $h5--font-size,
    'h6': $h6--font-size,
) !default;

@function heading-font-size($heading-font-size-key) {
    @return var(--#{$heading-font-size-key}--font-size);
}

$heading--margin-top: calc(#{spacing()} * 2.5) !default;
$heading--margin-bottom: spacing() !default;
$heading--font-family: font-family-secondary('base') !default;
$heading--font-weight: font-weight('semibold') !default;
$heading--line-height: 1.1 !default;
$heading--color: inherit !default;

// Displays
//
$d1--font-size: calc(#{heading-font-size('h1')} * var(--scale-ratio--pow-6)) !default;
$d2--font-size: calc(#{heading-font-size('h1')} * var(--scale-ratio--pow-5)) !default;
$d3--font-size: calc(#{heading-font-size('h1')} * var(--scale-ratio--pow-4)) !default;
$d4--font-size: calc(#{heading-font-size('h1')} * var(--scale-ratio--pow-3)) !default;
$d5--font-size: calc(#{heading-font-size('h1')} * var(--scale-ratio--pow-2)) !default;
$d6--font-size: calc(#{heading-font-size('h1')} * var(--scale-ratio--pow-1)) !default;

$display--font-size: (
    'd1': $d1--font-size,
    'd2': $d2--font-size,
    'd3': $d3--font-size,
    'd4': $d4--font-size,
    'd5': $d5--font-size,
    'd6': $d6--font-size,
) !default;

@function display-font-size($display-font-size-key) {
    @return var(--#{$display-font-size-key}--font-size);
}

$display--font-weight: $heading--font-weight !default;
$display--line-height: $heading--line-height !default;

// Links
//
$link--color: color('primary') !default;
$link--color--hover: color('primary-40') !default;
$link--decoration: none !default;
$link--decoration--hover: underline !default;

// Lead
//
$lead--font-size: font-size('lg') !default;
$lead--font-weight: font-weight('light') !default;

// Lists
//
$list--item--padding--inline: spacing('1') !default;
$list--item--margin-bottom: spacing('1/2') !default;

// Description Lists
//
$dt--font-weight: font-weight('bold') !default;

// Emphasis
//
$small--font-size: font-size('sm') !default;
$small--font-weight: font-weight('normal') !default;

// Blockquote
//
$blockquote--footer--color: color('gray-60') !default;
$blockquote--font-size: font-size('lg') !default;
$blockquote--border: 3px solid color('gray-30') !default;
$blockquote--margin: spacing() !default;
$blockquote--padding--bordered: spacing() !default;

// Horizontal rule
//
$hr--border-color: hsla(var(--color--black--h), var(--color--black--s), var(--color--black--l), 0.1) !default;
$hr--border-width: var(--border-top-width) !default;
$hr--border-style: var(--border-style) !default;
$hr--margin: spacing() !default;

// Mark
//
$mark--padding: 0.2rem 0.4rem !default;
$mark--color: color('gray-80') !default;
$mark--background-color: color('yellow-10') !default;

// Code
//
$code--font-size: 90% !default;
$code--padding: 0.15rem 0.4rem !default;
$code--color: #bd4147 !default;
$code--background: color('gray-10') !default;
$code--color--dark: #ff6d6b !default;
$code--background--dark: color('gray-80') !default;

// Kbd
//
$kbd--font-size: var(--code--font-size) !default;
$kbd--box-shadow: inset 0 -0.1rem 0 rgba(0, 0, 0, 0.25) !default;
$kbd--nested-font-weight: font-weight('bold') !default;
$kbd--color: color('white') !default;
$kbd--background: color('gray-90') !default;
$kbd--padding: var(--code--padding) !default;

// Pre
//
$pre--font-size: var(--code--font-size) !default;
$pre--color: color('gray-90') !default;
$pre--color--dark: color('white') !default;
$pre--scrollable-max-height: 340px !default;