//  BASIC THEME  TOKENS: SEMANTIC KEYS COLORS
// - This partial defines Basic Theme's Semantic Keys color tokens
// FIGMA REFERENCE: COLOR KEYS

// - Theme keys should hold registration values (colors, content colors, other keys)
//   - In some case there are unique hex values assignments
//   - They should be transformed into Registration colors.
//    - We replaced them with nearest registration or key colors.
// - When several key has the same value and have a connection
// - We either use $token or var(--token) depending on connection logic and value type.

// SHADOWS
$shadow-color:  $colors-gray-200;

$shadow-xs-opacity: $opacity-10;
$shadow-small-opacity: $opacity-20;
$shadow-medium-opacity: $shadow-small-opacity;
$shadow-large-opacity: $opacity-30;

$box-shadow-xs: $shadow-size-xs rgba($shadow-color, $shadow-xs-opacity);
$box-shadow-small: $shadow-size-small rgba($shadow-color, $shadow-small-opacity);
$box-shadow-medium: $shadow-size-medium rgba($shadow-color, $shadow-medium-opacity);
$box-shadow-large: $shadow-size-large rgba($shadow-color, $shadow-large-opacity);



// Fixed colors - Mostly Monochrome Values
$fixed-light-color: $color-white;
$fixed-dark-color: $color-black;

// SURFACES COLORS
$surface-primary: $color-white;
$surface-primary-hover: $colors-gray-100;
$surface-secondary: $colors-gray-100;
$surface-tertiary: $colors-gray-200;
$surface-quaternary: $colors-gray-300;
$surface-selected: $colors-steel-100;
$surface-inverse: $color-black;
$surface-success: $colors-green-100;
$surface-alert: $colors-red-100;
$surface-warning: $colors-yellow-100;


// BRAND COLORS
$primary-color: $colors-steel-500;
$primary-hover-color: $colors-steel-800;
$primary-selected-hover-color: $colors-steel-950;
$primary-highlighted-color: $colors-steel-200;


// TEXT COLORS
$text-primary: $colors-gray-900;
$text-secondary: $colors-gray-500;
$text-tertiary: $colors-gray-300;
$text-color-on-primary: $color-white;
$text-color-on-inverted: $color-white;
$placeholder-color: $colors-gray-500;
$icon-primary: $colors-gray-900;
$link-color: $colors-steel-500;


// System Semantics (state, status)
$disabled-text-color: rgba($text-primary, var(--disabled-component-opacity));
$disabled-background-color: $color-ui_grey-muted;
$positive-color: $colors-green-400;
$positive-color-hover: $colors-green-600;
$positive-color-selected: $colors-green-600;
$positive-color-selected-hover: $colors-green-700;
$positive-color-background: $colors-green-200;
$negative-color: $colors-red-400;
$negative-color-hover: $colors-red-600;
$negative-color-selected: $colors-red-600;
$negative-color-selected-hover: $colors-red-700;
$negative-color-background: $colors-red-200;
$warning-color: $colors-yellow-400;
$warning-color-hover: $colors-yellow-600;
$warning-color-selected: $colors-yellow-600;
$warning-color-selected-hover: $colors-yellow-700;
$warning-color-background: $colors-yellow-200;

// DIVIDER COLORS
$divider-primary: $colors-gray-200;
$divider-secondary: $colors-gray-300; 
$divider-overlay: rgba($shadow-color, $shadow-xs-opacity); 
$divider-halo: $colors-steel-200; 
$divider-selected: $colors-steel-500;