// Ripple Design Map - Colors //

// Define design colors used in the design system here.
// For each color you can define the full map manually, or ask the design system for a default scale via design-color-build-scale(...).
// Color maps may include a range (eg, 500: blue, 600: darkblue, ...), and references (eg, 'normal' = 500, 'title' = 'normal', ...).

// Design Map for Colors
$design-map-colors: (
    '_variables':       true, // Output this map as CSS Variables

    // Base Colors
    'base':             white,
    'reverse':          #040F20,

    'gray': (
        // Range
        900:            #1D1D1F,
        800:            #35363A,
        700:            #424349,
        600:            #606268,
        500:            #84858B,
        400:            #A7A9AC,
        300:            #CBCCCE,
        200:            #DFDFE1,
        100:            #EFEFF0,
        50:             #F8F8F9,
        // References
        'dark':         700,
        'title':        700,
        'normal':       600,
        'light':        400,
        'border':       400,
        'bg':           100,
        'alpha':        rgba(#606268, 0.5),
    ),
    // 'gray':            design-color-build-scale(slategray, ('normal': 600)),

    // Brand Colors
    'primary': (
        // Range
        900:            #021C50,
        800:            #07296B,
        700:            #0A3786,
        600:            #0F479F,
        500:            #1658B7,
        400:            #3D78C7,
        300:            #6697D5,
        200:            #8FB6E2,
        100:            #BAD3EE,
        50:             #E6F0F9,
        // References
        'dark':         600,
        'title':        600,
        'normal':       500,
        'light':        400,
        'border':       400,
        'bg':           100,
        'alpha':        rgba(#1658B7, 0.5),
    ),
    // 'primary':        design-color-build-scale(slateblue, ('normal': 500)),


);

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