// ==========================================================================
// # Complementary
// ==========================================================================
// 
// Complementary colors are a pair of colors which, when combined
// or mixed cancel each other out by producing a grayscale color.
// 
// In RGB, when complementary colors are combined or mixed together they
// cancel each other and produce a grayscale color while in RYB, 
// the results are different.
// 
// | Model | Color     | Chromatic | Harmonized |         | 
// | :---: | :-------: | :-------: | :-------:  | :---:   |
// | RGB   | #8e43e7   | #9ce743   | #9ad555    | 180°    |
// 
// | Model | Color     | Chromatic | Harmonized |         | 
// | :---: | :-------: | :-------: | :-------:  | :---:   |
// | RYB   | #8e43e7   | #e7d943   | #ddc955    | 180°    |
// 
// @debug color.adjust(#8e43e7, $hue: 180);
// @debug functions.adjust-hue-ryb(#8e43e7, 180);
// 

@use "sass:color";

@use "../core";
@use "../functions";

// ==========================================================================
// # Variables
// ==========================================================================

$-complementary-400: color.adjust(core.$brand-color, $hue: 180);

@if (core.$color-model == ryb) {
  $-complementary-400: functions.adjust-hue-ryb(core.$brand-color, 180);
} @else {}

@if core.$color-mode-harmony {
  $-complementary-400: functions.make-color-harmony(core.$brand-color, $-complementary-400);
} @else {}

// ==========================================================================
// # Monochromatic
// ==========================================================================

$complementary-100: functions.make-color-mono($-complementary-400, 100) !default;
$complementary-200: functions.make-color-mono($-complementary-400, 200) !default;
$complementary-300: functions.make-color-mono($-complementary-400, 300) !default;
$complementary-400: $-complementary-400 !default;
$complementary-500: functions.make-color-mono($-complementary-400, 500) !default;
$complementary-600: functions.make-color-mono($-complementary-400, 600) !default;
$complementary-700: functions.make-color-mono($-complementary-400, 700) !default;
$complementary-800: functions.make-color-mono($-complementary-400, 800) !default;
$complementary-900: functions.make-color-mono($-complementary-400, 900) !default;

// =============================================================================
// # Map
// =============================================================================

$map-complementary: (
  "complementary-100": $complementary-100,
  "complementary-200": $complementary-200,
  "complementary-300": $complementary-300,
  "complementary-400": $complementary-400,
  "complementary-500": $complementary-500,
  "complementary-600": $complementary-600,
  "complementary-700": $complementary-700,
  "complementary-800": $complementary-800,
  "complementary-900": $complementary-900
) !default;