// COLORS

// eUI DEFAULT NEUTRAL
$eui-neutral-160: #131313;
$eui-neutral-140: #1d1d1d;
$eui-neutral-120: #262626;
$eui-neutral-110: #2b2b2b;
$eui-neutral-100: #303030;
$eui-neutral-80: #595959;
$eui-neutral-60: #838383;
$eui-neutral-40: #acacac;
$eui-neutral-20: #d6d6d6;
$eui-neutral-10: #eaeaea;
$eui-neutral-5: #f5f5f5;
$eui-neutral-2: #fcfcfc;
$eui-neutral-0: #fff;

// eui DEFAULT ACCENT (ec-yellow)
$eui-accent-160: #432105;
$eui-accent-140: #734110;
$eui-accent-120: #a46704;
$eui-accent-110: #ce9100;
$eui-accent-100: #efbc03;
$eui-accent-80: #ffd617;
$eui-accent-60: #ffe843;
$eui-accent-40: #fff587;
$eui-accent-20: #fffbc2;
$eui-accent-10: #fefde8;
$eui-accent-5: #fffcf7;
$eui-accent-0: #fff;


$ecl-colors: (
  'primary-25': #f7f9ff,
  'primary-50': #f2f6ff,
  'primary-75': #eef2ff,
  'primary-100': #e6edff,
  'primary-200': #d9e3ff,
  'primary-300': #b0c6ff,
  'primary-400': #8cacff,
  'primary-500': #5987ff,
  'primary-600': #0046ff,
  'primary-700': #0035bf,
  'primary-800': #002a99,
  'primary-900': #001f73,
  'primary-950': #001959,

  'secondary-25': #fffcf7,
  'secondary-50': #fff5e5,
  'secondary-75': #ffebcc,
  'secondary-100': #ffe1b4,
  'secondary-200': #ffd392,
  'secondary-300': #ffcb7d,
  'secondary-400': #ffbe5c,
  'secondary-500': #fea439,
  'secondary-600': #fc8713,
  'secondary-700': #ed6c09,
  'secondary-800': #c55109,
  'secondary-900': #9e4107,
  'secondary-950': #763105,

  'neutral-25': #f9fafd,
  'neutral-50': #eceff9,
  'neutral-75': #d1d9f1,
  'neutral-100': #c1ccec,
  'neutral-200': #b0bde6,
  'neutral-300': #9eaee1,
  'neutral-400': #8ea1dc,
  'neutral-500': #7c92d6,
  'neutral-600': #6c85d1,
  'neutral-700': #51649d,
  'neutral-800': #41507d,
  'neutral-900': #313c5e,
  'neutral-950': #26324b,

  'grey-25': #fafafb,
  'grey-50': #f6f6f8,
  'grey-75': #ededf0,
  'grey-100': #e1e1e7,
  'grey-200': #d4d4dc,
  'grey-300': #b9b9c5,
  'grey-400': #a0a0b1,
  'grey-500': #84849b,
  'grey-600': #696984,
  'grey-700': #505070,
  'grey-800': #353559,
  'grey-900': #1c1c45,
  'grey-950': #00002e,

  // Status
  'info-25': #f5f7fb,
  'info-50': #ebeff7,
  'info-75': #dee4f2,
  'info-100': #bfcce6,
  'info-200': #a3b6da,
  'info-300': #859dce,
  'info-400': #6685c2,
  'info-500': #4a6eb7,
  'info-600': #3b62b0,
  'info-700': #2e58ab,
  'info-800': #1c49a4,
  'info-900': #0d3d9e,
  'info-950': #039,

  'success-25': #f9fefc,
  'success-50': #edfbf6,
  'success-75': #e3f9f0,
  'success-100': #daf6eb,
  'success-200': #b2edd6,
  'success-300': #8fe5c4,
  'success-400': #5ddaa9,
  'success-500': #05c67b,
  'success-600': #05b26f,
  'success-700': #049e62,
  'success-800': #037e4e,
  'success-900': #025f3b,
  'success-950': #02472c,

  'error-25': #fefafa,
  'error-50': #fdefef,
  'error-75': #fce9ea,
  'error-100': #f5bbbe,
  'error-200': #f09a9e,
  'error-300': #ea6c72,
  'error-400': #e54f57,
  'error-500': #df232d,
  'error-600': #cb2029,
  'error-700': #9e1920,
  'error-800': #7b1319,
  'error-900': #5a0e12,
  'error-950': #1f0506,

  'warning-25': #fffaf5,
  'warning-50': #fff3e8,
  'warning-75': #ffeddc,
  'warning-100': #ffdbba,
  'warning-200': #ffc998,
  'warning-300': #ffb16a,
  'warning-400': #ffa14d,
  'warning-500': #ff8a20,
  'warning-600': #e87e1d,
  'warning-700': #ba6517,
  'warning-800': #8b4c11,
  'warning-900': #68390d,
  'warning-950': #512c0a    
);


$color-map: (
    branding: (
        120: map-get($ecl-colors, 'grey-950'),
        110: map-get($ecl-colors, 'grey-950'),
        100: map-get($ecl-colors, 'grey-950'),
        80: map-get($ecl-colors, 'grey-900'),
        60: map-get($ecl-colors, 'grey-800'),
        40: map-get($ecl-colors, 'grey-700'),
        20: map-get($ecl-colors, 'grey-600'),
        10: map-get($ecl-colors, 'grey-500'),
        5: map-get($ecl-colors, 'grey-400'),
        2: map-get($ecl-colors, 'grey-300'),
        0: map-get($ecl-colors, 'grey-200'),
    ),
    primary: (
        160: map-get($ecl-colors, 'primary-950'),
        140: map-get($ecl-colors, 'primary-900'),
        120: map-get($ecl-colors, 'primary-800'),
        110: map-get($ecl-colors, 'primary-700'),
        100: map-get($ecl-colors, 'primary-600'),
        80: map-get($ecl-colors, 'primary-500'),
        60: map-get($ecl-colors, 'primary-400'),
        40: map-get($ecl-colors, 'primary-300'),
        20: map-get($ecl-colors, 'primary-200'),
        10: map-get($ecl-colors, 'primary-100'),
        5: map-get($ecl-colors, 'primary-75'),
        0: map-get($ecl-colors, 'primary-50'),
    ),
    neutral: (
        160: $eui-neutral-160,
        140: $eui-neutral-140,
        120: $eui-neutral-120,
        110: $eui-neutral-110,
        100: $eui-neutral-100,
        80: $eui-neutral-80,
        60: $eui-neutral-60,
        40: $eui-neutral-40,
        20: $eui-neutral-20,
        10: $eui-neutral-10,
        5: $eui-neutral-5,
        2: $eui-neutral-2,
        0: $eui-neutral-0
    ),
    accent: (
        160: $eui-accent-160,
        140: $eui-accent-140,
        120: $eui-accent-120,
        110: $eui-accent-110,
        100: $eui-accent-100,
        80: $eui-accent-80,
        60: $eui-accent-60,
        40: $eui-accent-40,
        20: $eui-accent-20,
        10: $eui-accent-10,
        5: $eui-accent-5,
        0: $eui-accent-0
    ),
    info: (
        160: map-get($ecl-colors, 'info-900'),
        140: map-get($ecl-colors, 'info-800'),
        120: map-get($ecl-colors, 'info-700'),
        110: map-get($ecl-colors, 'info-600'),
        100: map-get($ecl-colors, 'info-500'),
        80: map-get($ecl-colors, 'info-400'),
        60: map-get($ecl-colors, 'info-300'),
        40: map-get($ecl-colors, 'info-200'),
        20: map-get($ecl-colors, 'info-100'),
        10: map-get($ecl-colors, 'info-75'),
        5: map-get($ecl-colors, 'info-50'),
        0: map-get($ecl-colors, 'info-25'),
    ),
    success: (
        160: map-get($ecl-colors, 'success-950'),
        140: map-get($ecl-colors, 'success-950'),
        120: map-get($ecl-colors, 'success-900'),
        110: map-get($ecl-colors, 'success-800'),
        100: map-get($ecl-colors, 'success-700'),
        80: map-get($ecl-colors, 'success-600'),
        60: map-get($ecl-colors, 'success-500'),
        40: map-get($ecl-colors, 'success-400'),
        20: map-get($ecl-colors, 'success-300'),
        10: map-get($ecl-colors, 'success-200'),
        5: map-get($ecl-colors, 'success-100'),
        0: map-get($ecl-colors, 'success-75'),
    ),
    warning: (
        160: map-get($ecl-colors, 'warning-900'),
        140: map-get($ecl-colors, 'warning-800'),
        120: map-get($ecl-colors, 'warning-700'),
        110: map-get($ecl-colors, 'warning-600'),
        100: map-get($ecl-colors, 'warning-500'),
        80: map-get($ecl-colors, 'warning-400'),
        60: map-get($ecl-colors, 'warning-300'),
        40: map-get($ecl-colors, 'warning-200'),
        20: map-get($ecl-colors, 'warning-100'),
        10: map-get($ecl-colors, 'warning-75'),
        5: map-get($ecl-colors, 'warning-50'),
        0: map-get($ecl-colors, 'warning-25'),
    ),
    danger: (
        160: map-get($ecl-colors, 'error-950'),
        140: map-get($ecl-colors, 'error-900'),
        120: map-get($ecl-colors, 'error-800'),
        110: map-get($ecl-colors, 'error-700'),
        100: map-get($ecl-colors, 'error-600'),
        80: map-get($ecl-colors, 'error-500'),
        60: map-get($ecl-colors, 'error-400'),
        40: map-get($ecl-colors, 'error-300'),
        20: map-get($ecl-colors, 'error-200'),
        10: map-get($ecl-colors, 'error-100'),
        5: map-get($ecl-colors, 'error-75'),
        0: map-get($ecl-colors, 'error-50'),
    ),
    cta: (
        160: map-get($ecl-colors, 'secondary-800'),
        140: map-get($ecl-colors, 'secondary-700'),
        120: map-get($ecl-colors, 'secondary-600'),
        110: map-get($ecl-colors, 'secondary-500'),
        100: map-get($ecl-colors, 'secondary-400'),
        80: map-get($ecl-colors, 'secondary-300'),
        60: map-get($ecl-colors, 'secondary-200'),
        40: map-get($ecl-colors, 'secondary-100'),
        20: map-get($ecl-colors, 'secondary-75'),
        10: map-get($ecl-colors, 'secondary-50'),
        5: map-get($ecl-colors, 'secondary-25'),
        0: map-get($ecl-colors, 'secondary-25'),
    )
);

// SHADOWS

$ecl-shadow-color: #18274b !default;
$ecl-shadow: (
  1: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 6px 12px 0 rgba($ecl-shadow-color, 0.08)),
  2: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 10px 22px 0 rgba($ecl-shadow-color, 0.1)),
  3: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 12px 32px 0 rgba($ecl-shadow-color, 0.12)),
  4: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 14px 42px 0 rgba($ecl-shadow-color, 0.12)),
  5: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 18px 52px 0 rgba($ecl-shadow-color, 0.14))
);

$box-shadow-map: (
    0: none,
    1: map-get($ecl-shadow, 1),
    2: map-get($ecl-shadow, 2),
    3: map-get($ecl-shadow, 5),
    4: map-get($ecl-shadow, 4),
    5: map-get($ecl-shadow, 5),
    6: map-get($ecl-shadow, 5),
    8: map-get($ecl-shadow, 5),
    9: map-get($ecl-shadow, 5),
    12: map-get($ecl-shadow, 5),
    16: map-get($ecl-shadow, 5),
    24: map-get($ecl-shadow, 5),
    card: map-get($ecl-shadow, 1),
);


// TYPOGRAPHY

$font-weight-map: (
    'regular': 400,
    'medium': 500,
    'semi-bold': 600,
    'bold': 700
);

$font-map: (
    'display': (
        'm': (
            'desktop': (
                'size': 3rem,
                'line-height': 3.5rem
            ),
            'tablet': (
                'size': 2.75rem,
                'line-height': 3.25rem
            ),
            'mobile': (
                'size': 2rem,
                'line-height': 2.25rem
            )
        )
    ),    
    'title': (
        'xl': (
            'desktop': (
                'size': 2.5rem,
                'line-height': 3rem
            ),
            'tablet': (
                'size': 2rem,
                'line-height': 2.75rem
            ),
            'mobile': (
                'size': 1.75rem,
                'line-height': 2.5rem
            )
        ),
        'xs': (
            'desktop': (
                'size': 1.25rem,
                'line-height': 1.75rem
            ),
            'tablet': (
                'size': 1.25rem,
                'line-height': 1.75rem
            ),
            'mobile': (
                'size': 1.2rem,
                'line-height': 1.5rem
            )
        ),
        '2xs': (
            'desktop': (
                'size': 1rem,
                'line-height': 1.5rem
            ),
            'tablet': (
                'size': 1rem,
                'line-height': 1.5rem
            ),
            'mobile': (
                'size': 1rem,
                'line-height': 1.5rem
            )
        )
    ),
    'card-title': (
        'm': (
            'desktop': (
                'size': 1.125rem,
                'line-height': 1.5rem
            ),            
            'tablet': (
                'size': 1.125rem,
                'line-height': 1.5rem
            ),            
            'mobile': (
                'size': 1.125rem,
                'line-height': 1.5rem
            )            
        )
    ),    
    'label': (
        'm': (
            'desktop': (
                'size': 0.875rem,
                'line-height': 1.25rem
            ),            
            'tablet': (
                'size': 0.875rem,
                'line-height': 1.25rem
            ),            
            'mobile': (
                'size': 0.875rem,
                'line-height': 1.25rem
            )            
        ),
        'l': (
            'desktop': (
                'size': 1rem,
                'line-height': 1.5rem
            ),            
            'tablet': (
                'size': 1rem,
                'line-height': 1.5rem
            ),            
            'mobile': (
                'size': 1rem,
                'line-height': 1.5rem
            )            
        )
    ),
    'body': (
        's': (
            'desktop': (
                'size': 0.875rem,
                'line-height': 1.25rem
            ),            
            'tablet': (
                'size': 0.875rem,
                'line-height': 1.25rem
            ),            
            'mobile': (
                'size': 0.875rem,
                'line-height': 1.25rem
            )            
        ),
        'm': (
            'desktop': (
                'size': 1rem,
                'line-height': 1.5rem
            ),            
            'tablet': (
                'size': 1rem,
                'line-height': 1.5rem
            ),            
            'mobile': (
                'size': 1rem,
                'line-height': 1.5rem
            )            
        ),
        'l': (
            'desktop': (
                'size': 1.25rem,
                'line-height': 1.75rem
            ),            
            'tablet': (
                'size': 1.25rem,
                'line-height': 1.75rem
            ),            
            'mobile': (
                'size': 1.25rem,
                'line-height': 1.75rem
            )            
        ),        
        'xl': (
            'desktop': (
                'size': 1.5rem,
                'line-height': 2rem
            ),            
            'tablet': (
                'size': 1.5rem,
                'line-height': 2rem
            ),            
            'mobile': (
                'size': 1.5rem,
                'line-height': 2rem
            )            
        )        
    ),
    'microcopy': (
        'm': (
            'desktop': (
                'size': 0.75rem,
                'line-height': 1rem
            ),            
            'tablet': (
                'size': 0.75rem,
                'line-height': 1rem
            ),            
            'mobile': (
                'size': 0.75rem,
                'line-height': 1rem
            )            
        )
    )
);
