// Typography
$marketing-font-path: '/fonts/' !default;

$font-mktg: $body-font !default;
$font-weight-medium: 450 !default;
$font-weight-extrabold: 800 !default;

$mktg-font-feature-settings: 'ss02' on, 'ss01' on !default;
$mktg-header-spacing-large: -0.03em !default;
$mktg-header-spacing-default: -0.01em !default;
$mktg-header-spacing-threshold: 48px !default;
$mktg-header-weight-large: $font-weight-extrabold !default;
$mktg-header-weight-default: $font-weight-bold !default;
$mktg-header-weight-threshold: 24px !default;

// Header size steps
$mktg-h-size-0:  96px !default;
$mktg-h-size-1:  72px !default;
$mktg-h-size-2:  64px !default;
$mktg-h-size-3:  56px !default;
$mktg-h-size-4:  48px !default;
$mktg-h-size-5:  40px !default;
$mktg-h-size-6:  32px !default;
$mktg-h-size-7:  28px !default;
$mktg-h-size-8:  24px !default;
$mktg-h-size-9:  20px !default;
$mktg-h-size-10: 16px !default;

// Header Line-height steps
$mktg-h-lh-0:  100px !default;
$mktg-h-lh-1:  76px !default;
$mktg-h-lh-2:  68px !default;
$mktg-h-lh-3:  60px !default;
$mktg-h-lh-4:  52px !default;
$mktg-h-lh-5:  44px !default;
$mktg-h-lh-6:  36px !default;
$mktg-h-lh-7:  32px !default;
$mktg-h-lh-8:  28px !default;
$mktg-h-lh-9:  24px !default;
$mktg-h-lh-10: 20px !default;

$mktg-header-pairings: (
  0:  (size: $mktg-h-size-0,  lh: $mktg-h-lh-0),
  1:  (size: $mktg-h-size-1,  lh: $mktg-h-lh-1),
  2:  (size: $mktg-h-size-2,  lh: $mktg-h-lh-2),
  3:  (size: $mktg-h-size-3,  lh: $mktg-h-lh-3),
  4:  (size: $mktg-h-size-4,  lh: $mktg-h-lh-4),
  5:  (size: $mktg-h-size-5,  lh: $mktg-h-lh-5),
  6:  (size: $mktg-h-size-6,  lh: $mktg-h-lh-6),
  7:  (size: $mktg-h-size-7,  lh: $mktg-h-lh-7),
  8:  (size: $mktg-h-size-8,  lh: $mktg-h-lh-8),
  9:  (size: $mktg-h-size-9,  lh: $mktg-h-lh-9),
  10: (size: $mktg-h-size-10, lh: $mktg-h-lh-10)
) !default;

// Responsive headers, where first number is mobile (default), second is tablet/md, and third is desktop/lg
$mktg-headers: (
  0: [4, 1, 0],
  1: [5, 3, 1],
  2: [6, 4, 2],
  3: [7, 5, 4],
  4: [8, 7, 6],
  5: [9, 8, 8],
  6: [10, 9, 9]
) !default;

// Body content
$mktg-body-spacing-threshold: 28px !default;
$mktg-body-weight-threshold: 24px !default;
$mktg-body-spacing-large: -0.01em !default;

// Body size steps
$mktg-body-size-0:  48px !default;
$mktg-body-size-1:  40px !default;
$mktg-body-size-2:  32px !default;
$mktg-body-size-3:  28px !default;
$mktg-body-size-4:  24px !default;
$mktg-body-size-5:  20px !default;
$mktg-body-size-6:  16px !default;
$mktg-body-size-7:  14px !default;
$mktg-body-size-8:  12px !default;

// Body line-height steps
$mktg-body-lh-0:  64px !default;
$mktg-body-lh-1:  52px !default;
$mktg-body-lh-2:  44px !default;
$mktg-body-lh-3:  40px !default;
$mktg-body-lh-4:  32px !default;
$mktg-body-lh-5:  28px !default;
$mktg-body-lh-6:  24px !default;
$mktg-body-lh-7:  20px !default;
$mktg-body-lh-8:  20px !default;

$mktg-body-pairings: (
  0:  (size: $mktg-body-size-0,  lh: $mktg-body-lh-0),
  1:  (size: $mktg-body-size-1,  lh: $mktg-body-lh-1),
  2:  (size: $mktg-body-size-2,  lh: $mktg-body-lh-2),
  3:  (size: $mktg-body-size-3,  lh: $mktg-body-lh-3),
  4:  (size: $mktg-body-size-4,  lh: $mktg-body-lh-4),
  5:  (size: $mktg-body-size-5,  lh: $mktg-body-lh-5),
  6:  (size: $mktg-body-size-6,  lh: $mktg-body-lh-6),
  7:  (size: $mktg-body-size-7,  lh: $mktg-body-lh-7),
  8:  (size: $mktg-body-size-8,  lh: $mktg-body-lh-8)
) !default;

// Responsive body content, where first number is mobile (default), second is tablet/md, and third is desktop/lg
$mktg-body-spacing-large: -0.01em !default;

$mktg-bodies: (
  0: [3, 1, 0],
  1: [4, 3, 2],
  2: [5, 5, 4],
  3: [6, 5, 5],
  4: [6, 6, 6],
  5: [7, 7, 7],
  6: [8, 8, 8]
) !default;

// Animations
$transition-time: 0.4s !default;
$ease-mktg: cubic-bezier(0.16, 1, 0.3, 1) !default;

$marketing-position-variants: (
  '': '',
  md: '-md',
  lg: '-lg',
) !default;

$mktg-btn-shadow-hover-light: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
$mktg-btn-shadow-hover-dark: 0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07);

@include color-variables(
  (
    (mktg-btn-shadow-outline, (light: rgb(0,0,0,0.15) 0 0 0 1px inset, dark: rgb(255,255,255,0.25) 0 0 0 1px inset)),
    (marketing-icon-primary, (light: var(--color-scale-blue-4), dark: var(--color-scale-blue-2))),
    (marketing-icon-secondary, (light: var(--color-scale-blue-3), dark: var(--color-scale-blue-5))),
    (mktg-btn-bg, (light: #1b1f23, dark: #f6f8fa)),
    (mktg-btn-shadow-focus, (light: rgb(0 0 0 / 15%) 0 0 0 4px, dark: rgb(255 255 255 / 25%) 0 0 0 4px)),
    (mktg-btn-shadow-hover, (light: $mktg-btn-shadow-hover-light, dark: $mktg-btn-shadow-hover-dark)),
    (mktg-btn-shadow-hover-muted, (light: rgb(0 0 0 / 70%) 0 0 0 2px inset, dark: rgb(255 255 255) 0 0 0 2px inset)),
  )
);