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

// Define base HTML properties to be applied as part of 'preload/base'.

// Design Map for Base Styles
$design-map-base: (
    '_variables': false,

    // Base HTML Properties
    'html, body': (
        'min-height':           100vh,
    ),
    'html': (
        'font-size':            design-setting('type.root-size', 62.5%), // 1rem = 10px
    ),
    'body': (
        'font-family':          ('@', 'type.font.normal', sans-serif),
        'font-size':            ('@', 'type.size.normal', 1.6rem),
        'font-weight':          ('@', 'type.weight.normal', 400),
        'color':                ('@', 'colors.gray.normal', slategray),
        'background-color':     ('@', 'colors.base', white),
        'line-height':          ('@', 'type.line-height.normal', 1.5em),
        'letter-spacing':       ('@', 'type.letter-spacing.normal', 0),
        'overflow':             auto,
    ),
);

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


// Default Base Output, as per base.scss

// // Base Properties
// html, body {
//     min-height: 100vh;
// }
// html {
//     font-size: 62.5%; // 62.5%
// }
// body {
//     font-family: design-variable('type.font-family.Body', 'type.font-family.primary');
//     font-size: design-variable('type.font-size.Body', 'type.font-size.normal');
//     font-weight: design-variable('type.font-weight.Body', 'type.font-weight.normal');
//     color: design-variable('typography.Body.color', 'colors.grayscale.normal');
//     background-color: design-variable('colors.base.normal');
//     line-height: design-variable('type.line-height.Body', 'type.line-height.normal');
//     letter-spacing: design-variable('type.letter-spacing.Body', 'type.letter-spacing.normal');
//     overflow: auto;
// }