@use './palette.scss' as palette;

/**
 * @sass-export-section="colors"
 */
$white-static: #fff;
$black-static: #000;

$text: var(--theme-text);
$text-subtle: var(--theme-text-subtle);
$text-invert: var(--theme-text-invert);
$hyperlink: var(--theme-hyperlink);
$hyperlink-hover: var(--theme-hyperlink-hover);
$text-glow-high-contrast: var(--theme-text-glow-high-contrast);
$box-shadow-color-light: var(--theme-box-shadow-light);
$box-shadow-color-medium: var(--theme-box-shadow-medium);
$box-shadow-color-heavy: var(--theme-box-shadow-heavy);
$box-shadow-color-extra-heavy: var(--theme-box-shadow-extra-heavy);

$body-background: var(--theme-body-background);
$body-background-medium: var(--theme-body-background-medium);
$body-background-accent: var(--theme-body-background-accent);

$alternate-background: var(--theme-alternate-background);
$alternate-background-medium: var(--theme-alternate-background-medium);

$overlay: var(--theme-overlay);
$overlay-invert: var(--theme-overlay-invert);
$overlay-static: palette.$palette-black-opacity-50;
$border: var(--theme-border);
$border-accent: var(--theme-border-accent);

$card-background: var(--theme-card-background);

$code-header: var(--theme-code-header);
$code-block: var(--theme-code-block);
$code-block-border: var(--theme-code-block-border);
$inline-code: var(--theme-inline-code);

$control-border: var(--theme-control-border);
$control-border-bottom: var(--theme-control-border-bottom);

$table-header: var(--theme-table-header);
$table-row: var(--theme-table-row);
$table-row-header: var(--theme-table-row-header);
$table-border-dark: var(--theme-table-border-dark);

$facepile-red: var(--theme-facepile-red);
$facepile-teal: var(--theme-facepile-teal);
$facepile-blue: var(--theme-facepile-blue);

$gradient-text-purple: var(--theme-gradient-text-purple);
$gradient-text-blue: var(--theme-gradient-text-blue);
$gradient-vivid-start: var(--theme-gradient-vivid-start);
$gradient-vivid-end: var(--theme-gradient-vivid-end);

$default-hover: var(--theme-hover-base);
$default-hover-invert: var(--theme-hover-invert);
$border-white-high-contrast: var(--theme-border-white-high-contrast);
$border-yellow-high-contrast: var(--theme-border-yellow-high-contrast);
$code-highlight-background: var(--theme-code-highlight-background);
$visited: var(--theme-visited);

$selected-background: var(--theme-background-selected);
$selected-background-subtle: var(--theme-background-subtle-selected);
$selected-stroke: var(--theme-stroke-selected);
$selected-foreground: var(--theme-foreground-selected);

$score-low-off: var(--theme-score-low-off);
$score-low: var(--theme-score-low);
$score-medium-off: var(--theme-score-medium-off);
$score-medium: var(--theme-score-medium);
$score-high-off: var(--theme-score-high-off);
$score-high: var(--theme-score-high);

$primary: var(--theme-primary-base);
$primary-background: var(--theme-primary-background);
$primary-background-hover: var(--theme-primary-background-hover);
$primary-background-glow-high-contrast: var(--theme-primary-background-glow-high-contrast);
$primary-dark: var(--theme-primary-dark);
$primary-dark-hover: var(--theme-primary-dark-hover);
$primary-hover: var(--theme-primary-hover);
$primary-active: var(--theme-primary-active);
$primary-invert: var(--theme-primary-invert);
$primary-box-shadow: var(--theme-primary-box-shadow);
$primary-selected: var(--theme-primary-selected);
$primary-background-selected: var(--theme-primary-background-selected);
$primary-foreground-selected: var(--theme-primary-foreground-selected);
$primary-foreground-selected-invert: var(--theme-primary-foreground-selected-invert);
$primary-stroke-selected: var(--theme-primary-stroke-selected);

$secondary: var(--theme-secondary-base);
$secondary-background: var(--theme-secondary-background);
$secondary-background-hover: var(--theme-secondary-background-hover);
$secondary-background-glow-high-contrast: var(--theme-secondary-background-glow-high-contrast);
$secondary-dark: var(--theme-secondary-dark);
$secondary-dark-hover: var(--theme-secondary-dark-hover);
$secondary-hover: var(--theme-secondary-hover);
$secondary-active: var(--theme-secondary-active);
$secondary-invert: var(--theme-secondary-invert);
$secondary-box-shadow: var(--theme-secondary-box-shadow);
$secondary-background-selected: var(--theme-secondary-background-selected);
$secondary-selected: var(--theme-secondary-selected);
$secondary-foreground-selected: var(--theme-secondary-foreground-selected);
$secondary-foreground-selected-invert: var(--theme-secondary-foreground-selected-invert);
$secondary-stroke-selected: var(--theme-secondary-stroke-selected);

$tertiary: var(--theme-tertiary-base);
$tertiary-background: var(--theme-tertiary-background);
$tertiary-background-hover: var(--theme-tertiary-background-hover);
$tertiary-background-glow-high-contrast: var(--theme-tertiary-background-glow-high-contrast);
$tertiary-dark: var(--theme-tertiary-dark);
$tertiary-dark-hover: var(--theme-tertiary-dark-hover);
$tertiary-hover: var(--theme-tertiary-hover);
$tertiary-active: var(--theme-tertiary-active);
$tertiary-invert: var(--theme-tertiary-invert);
$tertiary-box-shadow: var(--theme-tertiary-box-shadow);
$tertiary-background-selected: var(--theme-tertiary-background-selected);
$tertiary-selected: var(--theme-tertiary-selected);
$tertiary-foreground-selected: var(--theme-tertiary-foreground-selected);
$tertiary-foreground-selected-invert: var(--theme-tertiary-foreground-selected-invert);
$tertiary-stroke-selected: var(--theme-tertiary-stroke-selected);

$success: var(--theme-success-base);
$success-background: var(--theme-success-background);
$success-background-hover: var(--theme-success-background-hover);
$success-background-glow-high-contrast: var(--theme-success-background-glow-high-contrast);
$success-dark: var(--theme-success-dark);
$success-dark-hover: var(--theme-success-dark-hover);
$success-hover: var(--theme-success-hover);
$success-active: var(--theme-success-active);
$success-invert: var(--theme-success-invert);
$success-box-shadow: var(--theme-success-box-shadow);
$success-background-selected: var(--theme-success-background-selected);
$success-selected: var(--theme-success-selected);
$success-foreground-selected: var(--theme-success-foreground-selected);
$success-foreground-selected-invert: var(--theme-success-foreground-selected-invert);
$success-stroke-selected: var(--theme-success-stroke-selected);

$info: var(--theme-info-base);
$info-background: var(--theme-info-background);
$info-background-hover: var(--theme-info-background-hover);
$info-background-glow-high-contrast: var(--theme-info-background-glow-high-contrast);
$info-dark: var(--theme-info-dark);
$info-dark-hover: var(--theme-info-dark-hover);
$info-hover: var(--theme-info-hover);
$info-active: var(--theme-info-active);
$info-invert: var(--theme-info-invert);
$info-box-shadow: var(--theme-info-box-shadow);
$info-background-selected: var(--theme-info-background-selected);
$info-selected: var(--theme-info-selected);
$info-foreground-selected: var(--theme-info-foreground-selected);
$info-foreground-selected-invert: var(--theme-info-foreground-selected-invert);
$info-stroke-selected: var(--theme-info-stroke-selected);

$warning: var(--theme-warning-base);
$warning-background: var(--theme-warning-background);
$warning-background-hover: var(--theme-warning-background-hover);
$warning-background-glow-high-contrast: var(--theme-warning-background-glow-high-contrast);
$warning-dark: var(--theme-warning-dark);
$warning-dark-hover: var(--theme-warning-dark-hover);
$warning-hover: var(--theme-warning-hover);
$warning-active: var(--theme-warning-active);
$warning-invert: var(--theme-warning-invert);
$warning-box-shadow: var(--theme-warning-box-shadow);
$warning-background-selected: var(--theme-warning-background-selected);
$warning-selected: var(--theme-warning-selected);
$warning-foreground-selected: var(--theme-warning-foreground-selected);
$warning-foreground-selected-invert: var(--theme-warning-foreground-selected-invert);
$warning-stroke-selected: var(--theme-warning-stroke-selected);

$danger: var(--theme-danger-base);
$danger-background: var(--theme-danger-background);
$danger-background-hover: var(--theme-danger-background-hover);
$danger-background-glow-high-contrast: var(--theme-danger-background-glow-high-contrast);
$danger-dark: var(--theme-danger-dark);
$danger-dark-hover: var(--theme-danger-dark-hover);
$danger-hover: var(--theme-danger-hover);
$danger-active: var(--theme-danger-active);
$danger-invert: var(--theme-danger-invert);
$danger-box-shadow: var(--theme-danger-box-shadow);
$danger-background-selected: var(--theme-danger-background-selected);
$danger-selected: var(--theme-danger-selected);
$danger-foreground-selected: var(--theme-danger-foreground-selected);
$danger-foreground-selected-invert: var(--theme-danger-foreground-selected-invert);
$danger-stroke-selected: var(--theme-danger-stroke-selected);

$colors: (
	'primary': (
		$primary,
		$primary-background,
		$primary-dark,
		$primary-hover,
		$primary-active,
		$primary-invert,
		$primary-box-shadow,
		$primary-background-glow-high-contrast,
		$primary-background-hover,
		$primary-dark-hover,
		$primary-selected,
		$primary-background-selected,
		$primary-stroke-selected,
		$primary-foreground-selected,
		$primary-foreground-selected-invert
	),
	'secondary': (
		$secondary,
		$secondary-background,
		$secondary-dark,
		$secondary-hover,
		$secondary-active,
		$secondary-invert,
		$secondary-box-shadow,
		$secondary-background-glow-high-contrast,
		$secondary-background-hover,
		$secondary-dark-hover,
		$secondary-selected,
		$secondary-background-selected,
		$secondary-stroke-selected,
		$secondary-foreground-selected,
		$secondary-foreground-selected-invert
	),
	'tertiary': (
		$tertiary,
		$tertiary-background,
		$tertiary-dark,
		$tertiary-hover,
		$tertiary-active,
		$tertiary-invert,
		$tertiary-box-shadow,
		$tertiary-background-glow-high-contrast,
		$tertiary-background-hover,
		$tertiary-dark-hover,
		$tertiary-selected,
		$tertiary-background-selected,
		$tertiary-stroke-selected,
		$tertiary-foreground-selected,
		$tertiary-foreground-selected-invert
	),
	'success': (
		$success,
		$success-background,
		$success-dark,
		$success-hover,
		$success-active,
		$success-invert,
		$success-box-shadow,
		$success-background-glow-high-contrast,
		$success-background-hover,
		$success-dark-hover,
		$success-selected,
		$success-background-selected,
		$success-stroke-selected,
		$success-foreground-selected,
		$success-foreground-selected-invert
	),
	'info': (
		$info,
		$info-background,
		$info-dark,
		$info-hover,
		$info-active,
		$info-invert,
		$info-box-shadow,
		$info-background-glow-high-contrast,
		$info-background-hover,
		$info-dark-hover,
		$info-selected,
		$info-background-selected,
		$info-stroke-selected,
		$info-foreground-selected,
		$info-foreground-selected-invert
	),
	'warning': (
		$warning,
		$warning-background,
		$warning-dark,
		$warning-hover,
		$warning-active,
		$warning-invert,
		$warning-box-shadow,
		$warning-background-glow-high-contrast,
		$warning-background-hover,
		$warning-dark-hover,
		$warning-selected,
		$warning-background-selected,
		$warning-stroke-selected,
		$warning-foreground-selected,
		$warning-foreground-selected-invert
	),
	'danger': (
		$danger,
		$danger-background,
		$danger-dark,
		$danger-hover,
		$danger-active,
		$danger-invert,
		$danger-box-shadow,
		$danger-background-glow-high-contrast,
		$danger-background-hover,
		$danger-dark-hover,
		$danger-selected,
		$danger-background-selected,
		$danger-stroke-selected,
		$danger-foreground-selected,
		$danger-foreground-selected-invert
	)
) !default;

// Combined framework and brand colors for the array used in all the loops

// Color indexes, for use in color loops.

$color-index-base: 1;
$color-index-background: 2;
$color-index-dark: 3;
$color-index-hover: 4;
$color-index-active: 5;
$color-index-invert: 6;
$color-index-box-shadow: 7;
$color-index-background-glow-high-contrast: 8;
$color-index-background-hover: 9;
$color-index-dark-hover: 10;
$color-index-selected: 11;
$color-index-background-selected: 12;
$color-index-stroke-selected: 13;
$color-index-foreground-selected: 14;
$color-index-foreground-selected-invert: 15;

// example implementation of a color loop

// @each $name, $color-set in $colors {
// 	$base: nth($color-set, $color-index-base);
// 	$background: nth($color-set, $color-index-background);
// 	$heavy: nth($color-set, $color-index-dark);
// 	$hover: nth($color-set, $color-index-hover);
// 	$active: nth($color-set, $color-index-active);
// 	$invert: nth($color-set, $color-index-invert);
// 	$box-shadow: nth($color-set, $color-index-box-shadow);
//}

$gradients: (
	'vivid': (
		$gradient-vivid-start,
		$gradient-vivid-end
	),
	'purple-blue': (
		$gradient-text-purple,
		$gradient-text-blue
	)
);

$gradient-color-start-index: 1;
$gradient-color-end-index: 2;