// RIVER Design-System - Defaults: Typography //

// Define our typography class map here, such as titles and headings.
// This is used to output typography helpers as part of 'helpers/styles-typography'.

// Design Map for Typography Styles
@if(design-setting('defaults')
    // Output typography defaults if styles are enabled, or 'typography' has been whitelisted
    and (
        design-setting('defaults.styles', false) == true
        or list-contains(design-setting('defaults.styles'), 'typography')
    )
) {
    $design-map-typography: (
        // Whether to output this map as CSS Variables; options include: false (default), true
        '_variables':       false,

        // Text 
        '.style-text': (
            // Unopinionated placeholder
        ),

        // Paragraph
        '.style-paragraph': (
            // Unopinionated placeholder
        ),

        // Titles
        '.style-title': (
            // We keep the parent style reasonably unopinionated,
            // and use BEM style naming for the title variations
            'font-family':      ('@', 'type.font.title', inherit),
            'font-weight':      ('@', 'type.weight.title', 'type.weight.bold', bold),
            'color':            ('@', 'colors.gray.title', inherit),
            // 'line-height':      ('@', 'type.line-height.title', 1.8em),
            // 'letter-spacing':   ('@', 'type.letter-spacing.title', 0),
            // 'margin-bottom':    ('@', 'type.spacing.title', 0.5em),
        ),
        '.style-title--1': (
            'font-size':        ('@', 'type.size.title-1', 5.87rem),
            'line-height':      ('@', 'type.line-height.title', 1.8em),
            'letter-spacing':   ('@', 'type.letter-spacing.title', 0),
            'margin-bottom':    ('@', 'type.spacing.title', 0.5em),
        ),
        '.style-title--2': (
            'font-size':        ('@', 'type.size.title-2', 4.0rem),
            'line-height':      ('@', 'type.line-height.title', 1.8em),
            'letter-spacing':   ('@', 'type.letter-spacing.title', 0),
            'margin-bottom':    ('@', 'type.spacing.title', 0.5em),
        ),
        '.style-title--3': (
            'font-size':        ('@', 'type.size.title-3', 3.17rem),
            'line-height':      ('@', 'type.line-height.title', 1.8em),
            'letter-spacing':   ('@', 'type.letter-spacing.title', 0),
            'margin-bottom':    ('@', 'type.spacing.title', 0.5em),
        ),
        '.style-title--4': (
            'font-size':        ('@', 'type.size.title-4', 2.52rem),
            'line-height':      ('@', 'type.line-height.title', 1.8em),
            'letter-spacing':   ('@', 'type.letter-spacing.title', 0),
            'margin-bottom':    ('@', 'type.spacing.title', 0.5em),
        ),
        '.style-title--5': (
            'font-size':        ('@', 'type.size.title-5', 2.16rem),
            'line-height':      1.5em,
            'letter-spacing':   ('@', 'type.letter-spacing.title', 0),
            'margin-bottom':    0.75em,
        ),
        '.style-title--6': (
            'font-size':        ('@', 'type.size.title-6', 1.85rem),
            'line-height':      1.5em,
            'letter-spacing':   ('@', 'type.letter-spacing.title', 0),
            'margin-bottom':    0.75em,
        ),

        // Heading
        '.style-heading': (
            // Unopinionated placeholder
        ),


    ) !default;

    // Apply the map
    $design-map: design-map-set('typography', $design-map-typography);
}

// To update the map, you can use any of:
// design-map-set('typography', (...)); design-map-update('typography', (...)); design-map-deep-update('typography', (...))