@use 'sass:color';
@use 'sass:map';
@use '../tools/functions' as *;

// color variables
$color-scheme: light !default;
$color-transparent: transparent !default;
$color-black: #000 !default;
$color-white: #fff !default;
$color-brand: #166abd !default;
$color-accent: #9c27b0 !default;
$color-success: #178230 !default;
$color-danger: #af2323 !default;
$color-info: #31ccec !default;
$color-warning: #e7b735 !default;
$color-gray: hsl(color-hue($color-brand) 15% 50%) !default;
$color-word: hsl(color-hue($color-brand) 15% 10%) !default;
$color-surface: hsl(color-hue($color-brand) 10% 100%) !default;
$color-surface-palette: (
	brand: hsl(var(--color-brand-hue) var(--color-brand-saturation) 90%),
	accent: hsl(var(--color-accent-hue) var(--color-accent-saturation) 90%),
	success: hsl(var(--color-success-hue) var(--color-success-saturation) 90%),
	danger: hsl(var(--color-danger-hue) var(--color-danger-saturation) 90%),
	info: hsl(var(--color-info-hue) var(--color-info-saturation) 90%),
	warning: hsl(var(--color-warning-hue) var(--color-warning-saturation) 90%),
) !default;
$color-surface-palette-no-vars: (
	brand: hsl(color-hue($color-brand) color-saturation($color-brand) 90%),
	accent: hsl(color-hue($color-accent) color-saturation($color-accent) 90%),
	success: hsl(color-hue($color-success) color-saturation($color-success) 90%),
	danger: hsl(color-hue($color-danger) color-saturation($color-danger) 90%),
	info: hsl(color-hue($color-info) color-saturation($color-info) 90%),
	warning: hsl(color-hue($color-warning) color-saturation($color-warning) 90%),
) !default;
$color-shadow: hsl(color-hue($color-brand) 50% 20%) !default;
$color-backdrop: hsla(color-hue($color-brand) 50% 20% / 20%) !default;
$color-alpha: hsl(0deg 0% 0% / 0%) !default;

// colors map
$colors: (
	scheme: $color-scheme,
	transparent: $color-transparent,
	shadow: hsla-map($color-shadow, 'shadow'),
	backdrop: hsla-map($color-backdrop, 'backdrop'),
	black: hsla-map($color-black, 'black'),
	white: hsla-map($color-white, 'white'),
	word:
		color-lighten-map(
			$color-word,
			'word',
			$scale: 12%,
			$fixed: true,
			$inverted: false
		),
	surface:
		map.merge(
			color-darken-map(
				$color-surface,
				'surface',
				$scale: 2%,
				$fixed: true
			),
			$color-surface-palette
		),
	alpha: color-alpha-map($color-alpha, 'alpha', $steps: 5, $scale: 0.05),
	brand: color-shades-map($color-brand, 'brand'),
	accent: color-shades-map($color-accent, 'accent'),
	success: color-shades-map($color-success, 'success'),
	danger: color-shades-map($color-danger, 'danger'),
	info: color-shades-map($color-info, 'info'),
	warning: color-shades-map($color-warning, 'warning'),
	gray: color-shades-map($color-gray, 'gray', $scale: 15%),
) !default;