/**
 * Some colors and shadow definitions
 * for Kalamar,
 */

@use 'sass:color';

/**
 * Official IDS colors
 */
$ids-orange-1: rgb(246, 168,   0);
$ids-orange-2: rgb(242, 148,   0);
$ids-grey-1:   rgb(135, 136, 138);
$ids-grey-2:   rgb(217, 218, 219);
$ids-blue-1:   rgb(  0, 158, 224); // Pragmatik
$ids-blue-2:   rgb(188, 228, 247); // Pragmatik
$ids-green-1:  rgb( 99, 111,   7); // Grammatik
$ids-green-2:  rgb(227, 232, 163); // Grammatik
$ids-pink-1:   rgb(193,   0,  43); // Lexik
$ids-pink-2:   rgb(250, 243, 222); // Lexik

$black:        #333;
$darker-black: rgb(20,20,20); // official footer

:root {
  --ids-orange-1: #{$ids-orange-1};
  --ids-orange-2: #{$ids-orange-2};
  --ids-grey-1: #{$ids-grey-1};
  --ids-grey-2: #{$ids-grey-2};
  --ids-blue-1: #{$ids-blue-1};
  --ids-blue-2: #{$ids-blue-2};
  --ids-green-1: #{$ids-green-1};
  --ids-green-2: #{$ids-green-2};
  --ids-pink-1: #{$ids-pink-1};
  --ids-pink-2: #{$ids-pink-2};
  --black-color: #{$black};
  --darker-black-color: #{$darker-black};
}


/**
 * Orange Colors
 */
$light-orange:   #f4eebb;
$middle-orange:  #ffd080;
$dark-orange:    $ids-orange-1;
$darker-orange:  #ff8000;
$darkest-orange: #e55d00;

:root {
  --light-orange-color: #{$light-orange};
  --middle-orange-color: #{$middle-orange};
  --dark-orange-color: #{$dark-orange};
  --darker-orange-color: #{$darker-orange};
  --darkest-orange-color: #{$darkest-orange};
}


/**
 * Green Colors
 */
$dark-green:     $ids-green-1; // #496000;
$middle-green:   color.adjust($ids-green-1, $lightness: 9%, $space: hsl);
$light-green:    color.adjust($ids-green-1, $lightness: 13%, $space: hsl); // #7ba400;
$lightest-green: color.adjust($light-green, $lightness: 35%, $saturation: -20%, $space: hsl); // #d8e38c;
$grey-green:     color.adjust($lightest-green, $saturation: -25%, $lightness: -12%, $space: hsl); // #bcc387;

:root {
  --light-green-color: #{$light-green};
  --middle-green-color: #{$middle-green};
  --dark-green-color: #{$dark-green};
  --lightest-green-color: #{$lightest-green};
  --grey-green-color: #{$grey-green};
}
 

/**
 * Blue Colors
 */
$light-blue:     $ids-blue-2;
$dark-blue:      $ids-blue-1;
$darkest-blue:   color.adjust($dark-blue, $lightness: -40%, $space: hsl);

:root {
  --light-blue-color: #{$light-blue};
  --dark-blue-color: #{$dark-blue};
  --darkest-blue-color: #{$darkest-blue};
}


/**
 * Grey Colors
 */
$middle-grey:  $ids-grey-1; // #999;
$light-grey:   $ids-grey-2; // #ddd;
$dark-grey:    color.adjust($middle-grey, $lightness: -15%, $space: hsl);
$nearly-white: #fefefe;

:root {
  --middle-grey-color: #{$middle-grey};
  --dark-grey-color: #{$dark-grey};
  --light-grey-color: #{$light-grey};
  --nearly-white-color: #{$nearly-white};
}

/**
 * Red Colors (no IDS relation)
 */
$middle-red: #c1002b;
$light-red:  color.adjust($middle-red, $lightness: 40%, $space: hsl);
$dark-red:   color.adjust($middle-red, $lightness: -40%, $space: hsl);
$alert-red:  rgb(254,26,0);

/**
 * Basic shadows
 */
$dark-shadow:  1px 1px 1px rgba(0,0,0,0.3);
$light-shadow: 1px 1px     rgba(255,255,255,0.5);


/**
 * KWIC colors
 */
$kwic-border:       $middle-grey;
$kwic-line-noneven: $light-grey;
$kwic-line-even:    $nearly-white;
$kwic-match-color:  $dark-grey;
$kwic-match-shadow: $light-shadow;

$kwic-highlight-1:  $middle-red;
$kwic-highlight-2:  $dark-blue;
$kwic-highlight-3:  $dark-orange;
$kwic-highlight-4:  $light-green;
