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

$typography: (
  font-family: map.get($font-family, 'default'),
  heading-margin: var(--s-5xl) 0 var(--s-m),
  heading-color: var(--cm-on-surface-brand),
  text-color: var(--cm-on-surface-brand),
  display: (
    'mobile-xs': (
      'size': var(--fs-6xl),
      'line-height': var(--lh-3xl),
    ),
    'mobile': (
      'size': var(--fs-6xl),
      'line-height': var(--lh-5xl),
      'letter-spacing': map.get($letter-spacing, 'xs'),
    ),
    'tablet': (
      'size': var(--fs-8xl),
      'line-height': var(--lh-7xl),
      'letter-spacing': map.get($letter-spacing, 'xs'),
    ),
    'desktop': (
      'size': var(--fs-10xl),
      'line-height': var(--lh-10xl),
      'letter-spacing': map.get($letter-spacing, '3xs'),
    ),
    'font-weight': map.get($font-weight, 'regular'),
  ),
  heading1: (
    'mobile-xs': (
      'size': var(--fs-4xl),
      'line-height': var(--lh-xl),
    ),
    'mobile': (
      'size': var(--fs-5xl),
      'line-height': var(--lh-2xl),
      'letter-spacing': map.get($letter-spacing, 'xs'),
    ),
    'tablet': (
      'size': var(--fs-7xl),
      'line-height': var(--lh-6xl),
      'letter-spacing': map.get($letter-spacing, '3xs'),
    ),
    'desktop': (
      'size': var(--fs-8xl),
      'line-height': var(--lh-7xl),
      'letter-spacing': map.get($letter-spacing, '3xs'),
    ),
    'font-weight': map.get($font-weight, 'semi-bold'),
  ),
  heading2: (
    'mobile-xs': (
      'size': var(--fs-2xl),
      'line-height': var(--lh-l),
    ),
    'mobile': (
      'size': var(--fs-3xl),
      'line-height': var(--lh-l),
    ),
    'tablet': (
      'size': var(--fs-5xl),
      'line-height': var(--lh-2xl),
      'letter-spacing': map.get($letter-spacing, 'xs'),
    ),
    'desktop': (
      'size': var(--fs-6xl),
      'line-height': var(--lh-4xl),
      'letter-spacing': map.get($letter-spacing, 'xs'),
    ),
    'font-weight': map.get($font-weight, 'semi-bold'),
  ),
  heading3: (
    'mobile-xs': (
      'size': var(--fs-m),
      'line-height': var(--lh-m),
    ),
    'mobile': (
      'size': var(--fs-xl),
      'line-height': var(--lh-m),
    ),
    'tablet': (
      'size': var(--fs-3xl),
      'line-height': var(--lh-l),
    ),
    'desktop': (
      'size': var(--fs-3xl),
      'line-height': var(--lh-l),
    ),
    'font-weight': map.get($font-weight, 'semi-bold'),
  ),
  heading4: (
    'mobile-xs': (
      'size': var(--fs-m),
      'line-height': var(--lh-m),
    ),
    'mobile': (
      'size': var(--fs-l),
      'line-height': var(--lh-m),
    ),
    'tablet': (
      'size': var(--fs-xl),
      'line-height': var(--lh-m),
    ),
    'desktop': (
      'size': var(--fs-2xl),
      'line-height': var(--lh-l),
    ),
    'font-weight': map.get($font-weight, 'medium'),
  ),
  heading5: (
    'mobile-xs': (
      'size': var(--fs-m),
      'line-height': var(--lh-s),
    ),
    'mobile': (
      'size': var(--fs-m),
      'line-height': var(--lh-s),
    ),
    'tablet': (
      'size': var(--fs-l),
      'line-height': var(--lh-s),
    ),
    'desktop': (
      'size': var(--fs-xl),
      'line-height': var(--lh-m),
    ),
    'font-weight': map.get($font-weight, 'medium'),
  ),
  heading6: (
    'mobile-xs': (
      'size': var(--fs-s),
      'line-height': var(--lh-s),
    ),
    'mobile': (
      'size': var(--fs-s),
      'line-height': var(--lh-xs),
    ),
    'tablet': (
      'size': var(--fs-m),
      'line-height': var(--lh-s),
    ),
    'desktop': (
      'size': var(--fs-m),
      'line-height': var(--lh-s),
    ),
    'font-weight': map.get($font-weight, 'near-bold'),
  ),
  body: (
    'xs': (
      'mobile-xs': (
        'size': var(--fs-xs),
        'line-height': var(--lh-xs),
      ),
      'mobile': (
        'size': var(--fs-xs),
        'line-height': var(--lh-xs),
      ),
      'tablet': (
        'size': var(--fs-xs),
        'line-height': var(--lh-xs),
      ),
      'desktop': (
        'size': var(--fs-xs),
        'line-height': var(--lh-xs),
      ),
    ),
    's': (
      'mobile-xs': (
        'size': var(--fs-xs),
        'line-height': var(--lh-xs),
      ),
      'mobile': (
        'size': var(--fs-s),
        'line-height': var(--lh-s),
      ),
      'tablet': (
        'size': var(--fs-s),
        'line-height': var(--lh-s),
      ),
      'desktop': (
        'size': var(--fs-s),
        'line-height': var(--lh-s),
      ),
    ),
    'm': (
      'mobile-xs': (
        'size': var(--fs-s),
        'line-height': var(--lh-s),
      ),
      'mobile': (
        'size': var(--fs-m),
        'line-height': var(--lh-m),
      ),
      'tablet': (
        'size': var(--fs-m),
        'line-height': var(--lh-m),
      ),
      'desktop': (
        'size': var(--fs-m),
        'line-height': var(--lh-m),
      ),
    ),
    'l': (
      'mobile-xs': (
        'size': var(--fs-s),
        'line-height': var(--lh-s),
      ),
      'mobile': (
        'size': var(--fs-m),
        'line-height': var(--lh-m),
      ),
      'tablet': (
        'size': var(--fs-m),
        'line-height': var(--lh-m),
      ),
      'desktop': (
        'size': var(--fs-l),
        'line-height': var(--lh-m),
      ),
    ),
    'xl': (
      'mobile-xs': (
        'size': var(--fs-xl),
        'line-height': var(--lh-l),
      ),
      'mobile': (
        'size': var(--fs-m),
        'line-height': var(--lh-m),
      ),
      'tablet': (
        'size': var(--fs-l),
        'line-height': var(--lh-m),
      ),
      'desktop': (
        'size': var(--fs-xl),
        'line-height': var(--lh-l),
      ),
    ),
    '2xl': (
      'mobile-xs': (
        'size': var(--fs-l),
        'line-height': var(--lh-m),
      ),
      'mobile': (
        'size': var(--fs-l),
        'line-height': var(--lh-m),
      ),
      'tablet': (
        'size': var(--fs-xl),
        'line-height': var(--lh-l),
      ),
      'desktop': (
        'size': var(--fs-2xl),
        'line-height': var(--lh-xl),
      ),
    ),
  ),
  microcopy: (
    '2xs': (
      'size': var(--fs-2xs),
      'line-height': var(--lh-3xs),
    ),
    'xs': (
      'size': var(--fs-xs),
      'line-height': var(--lh-2xs),
    ),
    's': (
      'mobile-xs': (
        'size': var(--fs-xs),
        'line-height': var(--lh-2xs),
      ),
      'mobile': (
        'size': var(--fs-s),
        'line-height': var(--lh-s),
      ),
      'tablet': (
        'size': var(--fs-s),
        'line-height': var(--lh-s),
      ),
      'desktop': (
        'size': var(--fs-s),
        'line-height': var(--lh-s),
      ),
    ),
    'm': (
      'size': var(--fs-m),
      'line-height': var(--lh-m),
    ),
  ),
  paragraph: (
    '2xl': 'body-2xl',
    'xl': 'body-xl',
    'l': 'body-l',
    'm': 'body-m',
    's': 'body-s',
    'xs': 'body-xs',
  ),
  highlight-color: var(--cm-on-surface-highlight),
  enhance: (
    font: 'body-2xl',
    font-weight: map.get($font-weight, 'light'),
    default: (
      background-color: var(--cm-surface-low-1),
      border: 4px solid var(--cm-border),
      color: var(--cm-on-surface-brand),
      padding-mobile: var(--s-m),
      padding-tablet: var(--s-xl),
      padding-desktop: var(--s-3xl),
    ),
    strong: (
      background-color: var(--cm-surface-0),
      color: var(--cm-on-surface-swap-0),
      padding-mobile: var(--s-m),
      padding-tablet: var(--s-xl),
      padding-desktop: var(--s-3xl),
    ),
    light: (
      background-color: transparent,
      border: 4px solid var(--cm-border),
      color: var(--cm-on-surface-brand),
      padding-mobile: var(--s-m),
      padding-tablet: var(--s-xl),
      padding-desktop: var(--s-3xl),
    ),
  ),
);
$typography-print: (
  heading-margin: map.get($spacing-print, '3xl') 0 map.get($spacing-print, 'm'),
  display: map.get($font-print, '10xl'),
  heading1: map.get($font-print, '8xl'),
  heading2: map.get($font-print, '6xl'),
  heading3: map.get($font-print, '3xl'),
  heading4: map.get($font-print, '2xl'),
  heading5: map.get($font-print, 'xl'),
  heading6: map.get($font-print, 'l'),
  enhance-font: map.get($font-print, '2xl'),
);