// Ripple Design Map - Typography (Styles) //

// 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
$design-map-typography: (
    '_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
    ),

);

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