@use 'sass:map';
@use '../index' as *;

$typography: (
  heading-margin: var(--s-2xl) 0 var(--s-m),
  heading-color: var(--c-d),
  text-color: var(--c-d-80),
  heading1: (
    'mobile': var(--f-4xl),
    'desktop': var(--f-5xl),
    'font-weight': map.get($font-weight, 'regular'),
  ),
  heading2: (
    'mobile': var(--f-3xl),
    'desktop': var(--f-4xl),
    'font-weight': map.get($font-weight, 'regular'),
  ),
  heading3: (
    'mobile': var(--f-2xl),
    'desktop': var(--f-3xl),
    'font-weight': map.get($font-weight, 'regular'),
  ),
  heading4: (
    'mobile': var(--f-xl),
    'desktop': var(--f-2xl),
    'font-weight': map.get($font-weight, 'regular'),
  ),
  heading5: (
    'mobile': var(--f-l),
    'desktop': var(--f-l),
    'font-weight': map.get($font-weight, 'regular'),
  ),
  heading6: (
    'mobile': var(--f-m),
    'desktop': var(--f-m),
    'font-weight': map.get($font-weight, 'bold'),
  ),
  paragraph: (
    'xs': var(--f-xs),
    's': var(--f-s),
    'm': var(--f-m),
    'l': var(--f-l),
  ),
);
$typography-print: (
  heading-margin: map.get($spacing-print, '2xl') 0 map.get($spacing-print, 'm'),
  heading1: map.get($font-print, '5xl'),
  heading2: map.get($font-print, '4xl'),
  heading3: map.get($font-print, '3xl'),
  heading4: map.get($font-print, '2xl'),
  heading5: map.get($font-print, 'l'),
  heading6: map.get($font-print, 'm'),
);
