// Site Color Config

$colors: (

'white-a': #fff,
'white-b': #dcdcdc,
'white-c': #ddd,

'red-a': rgb(117, 45, 45),
'red-b': rgb(139, 49, 49),
'red-c': rgb(223, 79, 79),
'red-d': rgb(175, 63, 63),
'red-e': #b75251,

'gray-a': #555,

'black-a': #000000,
'black-c': #101010,
'black-d': #2b2b2b,
'black-e': #222,
'black-b': rgb(75, 75, 75)

);

// Light theme colors

$light-theme: (

'fill-main': map-get( $colors, 'white-a' ),
'fill-main-a': map-get( $colors, 'white-a' ),
'fill-main-b': map-get( $colors, 'white-b' ),
'fill-mute': map-get($colors, 'white-c' ),
'fill-gallery': map-get( $colors, 'gray-a' ),
'fill-banner': map-get( $colors, 'red-e' ),

'fill-overlay': #0002,

'scribe-action': map-get( $colors, 'red-a'),
'scribe-action-hover': map-get( $colors, 'red-b'),

'fill-code': map-get($colors, 'black-d'),
'scribe-code': map-get($colors, 'white-b'),

'scribe-white': map-get( $colors, 'white-a'),
'scribe-main': map-get( $colors, 'black-a'),
'scribe-main-a': map-get( $colors, 'black-a'),
'scribe-main-b': map-get( $colors, 'black-b'),
'scribe-mute': map-get( $colors, 'gray-a'),
'scribe-invert': map-get( $colors, 'white-a')

);

// Dark theme colors

$dark-theme: (

'fill-main': map-get( $colors, 'black-d'),
'fill-main-a': map-get( $colors, 'black-d'),
'fill-main-b': map-get( $colors, 'black-c'),
'fill-mute': map-get($colors, 'black-e' ),
'fill-gallery': map-get( $colors, 'black-d'),
'fill-banner': map-get( $colors, 'red-e'),

'fill-overlay': #0002,

'fill-code': map-get($colors, 'black-c'),
'scribe-code': map-get($colors, 'white-b'),

'scribe-action': map-get( $colors, 'red-c'),
'scribe-action-hover': map-get( $colors, 'red-d'),

'scribe-white': map-get( $colors, 'white-a'),
'scribe-main': map-get( $colors, 'white-a'),
'scribe-main-a': map-get( $colors, 'white-a'),
'scribe-main-b': map-get( $colors, 'white-b'),
'scribe-mute': map-get( $colors, 'gray-a'),
'scribe-invert': map-get( $colors, 'white-a')

);

// Scribe colors are text color, // or any color that takes up a small area of the page // // this generates css class tokens // ie. `.scribe-main { color: var(–scribe-main-a); } `

$scribe-colors: (

'main': 'var(--scribe-main-a)',
'main-a': 'var(--scribe-main-a)',
'main-b': 'var(--scribe-main-b)',
'scribe-mute': 'var(--scribe-mute)',
'invert': 'var(--scribe-invert)'

);

// Fill colors are background color, // or any color that takes up a large area of the page // // this will generate css class tokens as well // ie. `.fill-banner { color: var(–fill-banner); } `

$fill-colors: (

'banner': 'var(--fill-banner)',
'overlay': 'var(--fill-overlay)',
'gallery': 'var(--fill-gallery)',
'main': 'var(--fill-main-a)',
'main-a': 'var(--fill-main-a)',
'main-b': 'var(--fill-main-b)'

);