// =Scales
$scales: map-extend($scales, (
    type-scale: (
        80: 80px,
        64: 64px,
        52: 52px,
        48: 48px,
        40: 40px,
        32: 32px,
        24: 24px,
        20: 20px,
        18: 18px,
        16: 16px,
        15: 15px,
        14: 14px,
        13: 13px,
        12: 12px,
        11: 11px,
        10: 10px
    ),
    type: (
        prose: (
            h1: 64px 1.1,
            h2: 32px 1.2,
            h3: 20px 1.3,
            h4: 16px 1.4,
            h5: 16px 1.4,
            h6: 16px 1.4,
            lead: 24px 1.4,
            p: 16px 1.5
        ),
        heading: (
            super: 80px 1.1,
            giga: 64px 1.1,
            mega: 48px 1.1,
            huge: 40px 1.2,
            large: 32px 1.2,
            medium: 24px 1.3,
            small: 20px 1.3,
            micro: 16px 1.4,
            tagline: 11px 1.4
        ),
        text: (
            mega: 24px 1.5,
            huge: 20px 1.5,
            large: 18px 1.5,
            default: 16px 1.5,
            medium: 14px 1.5,
            small: 13px 1.5,
            micro: 12px 1.5
        )
    ),
    type-sm: (
        heading: (
            super: 52px 1.1,
            giga: 52px 1.1
        )
    ),
    type-md: (),
    type-lg: (),
    breakpoint: (
        lg: 1442px,
        md: 1024px,
        sm: 768px
    ),
    sidebar: (
        base: 300px
    ),
    grid: (
        gridname: grid,
        columnname: column,
        columns: 12,
        gutter: 8rem,
        gap: 8rem
    ),
    container: (
        small: 400px,
        content: 800px,
        medium: 1000px,
        base: 1112px,
        large: 1240px,
        full: 100%
    ),
    edge: (
        base: 5rem
    ),
    level: (
        over-page: 100, // dropdowns/popovers
        over-content: 200, // modals/popups
        over-all: 300 // messages
    ),
    radius: (
        small: 2px,
        medium: 4px,
        base: 6px,
        large: 8px,
        huge: 12px
    ),
    divider: (
        1: 1px,
        2: 2px,
        3: 3px,
        4: 4px,
        6: 6px,
        8: 8px,
        10: 10px
    ),
    divider-length: (
        small: 60px,
        medium: 80px,
        large: 100px
    ),
    border: (
        1: 1px,
        2: 2px
    ),
    icon: (
        12: 12px,
        14: 14px,
        16: 16px,
        20: 20px,
        24: 24px,
        32: 32px,
        48: 48px,
        64: 64px
    ),
    iconbox: (
        small: 4px,
        medium: 6px,
        base: 8px,
        large: 10px,
        huge: 12px
    ),
    sizing: (
        20: 20%,
        25: 25%,
        30: 30%,
        33: 33%,
        40: 40%,
        50: 50%,
        60: 60%,
        67: 67%,
        70: 70%,
        75: 75%,
        80: 80%,
        100: 100%
    ),
    spacing: (
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        6: 6,
        7: 7,
        8: 8,
        9: 9,
        10: 10,
        11: 11,
        12: 12,
        13: 13,
        14: 14,
        15: 15,
        20: 20,
        25: 25,
        30: 30
    ),
    image: (
        32: 32px,
        48: 48px,
        64: 64px,
        96px: 96px,
        128: 128px
    )
));