// ==========================================================================
// # Tetradic
// ==========================================================================
// 
// Triadic color scheme is a four-color combination consisting of a base
// color and three colors that are 60 degrees apart from the base color.
//
// | Model | Color     | Chromatic | Harmonized |         | 
// | :---: | :-------: | :-------: | :-------:  | :---:   |
// | RGB   | #8e43e7   | #e7439c   | #d943a8    | 60°     |
// |       |           | #9ce743   | #9ad555    | 180°    |
// |       |           | #43e78e   | #4fcd9c    | 240°    |

// | Model | Color     | Chromatic | Harmonized |         | 
// | :---: | :-------: | :-------: | :-------:  | :---:   |
// | RYB   | #8e43e7   | #e74368   | #d9437c    | 60°     |
// |       |           | #e7d443   | #ddc455    | 180°    |
// |       |           | #a5e743   | #a2d555    | 240°    |
// 
// @debug color.adjust(#8e43e7, $hue: 60);
// @debug color.adjust(#8e43e7, $hue: 180);
// @debug color.adjust(#8e43e7, $hue: 240);
// 
// @debug functions.adjust-hue-ryb(#8e43e7, 60);
// @debug functions.adjust-hue-ryb(#8e43e7, 180);
// @debug functions.adjust-hue-ryb(#8e43e7, 240);
// 

@use "sass:color";

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

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

$-tetradic-1-400: color.adjust(core.$brand-color, $hue: 60);
$-tetradic-2-400: color.adjust(core.$brand-color, $hue: 180);
$-tetradic-3-400: color.adjust(core.$brand-color, $hue: 240);

@if (core.$color-model == ryb) {
  $-tetradic-1-400: functions.adjust-hue-ryb(core.$brand-color, 60);
  $-tetradic-2-400: functions.adjust-hue-ryb(core.$brand-color, 180);
  $-tetradic-3-400: functions.adjust-hue-ryb(core.$brand-color, 240);
} @else {}

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

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

// ## Tetradic (1) @ 90°
$tetradic-1-100: functions.make-color-mono($-tetradic-1-400, 100) !default;
$tetradic-1-200: functions.make-color-mono($-tetradic-1-400, 200) !default;
$tetradic-1-300: functions.make-color-mono($-tetradic-1-400, 300) !default;
$tetradic-1-400: $-tetradic-1-400 !default;
$tetradic-1-500: functions.make-color-mono($-tetradic-1-400, 500) !default;
$tetradic-1-600: functions.make-color-mono($-tetradic-1-400, 600) !default;
$tetradic-1-700: functions.make-color-mono($-tetradic-1-400, 700) !default;
$tetradic-1-800: functions.make-color-mono($-tetradic-1-400, 800) !default;
$tetradic-1-900: functions.make-color-mono($-tetradic-1-400, 900) !default;

// ## Tetradic (2) @ 180°
$tetradic-2-100: functions.make-color-mono($-tetradic-2-400, 100) !default;
$tetradic-2-200: functions.make-color-mono($-tetradic-2-400, 200) !default;
$tetradic-2-300: functions.make-color-mono($-tetradic-2-400, 300) !default;
$tetradic-2-400: $-tetradic-2-400 !default;
$tetradic-2-500: functions.make-color-mono($-tetradic-2-400, 500) !default;
$tetradic-2-600: functions.make-color-mono($-tetradic-2-400, 600) !default;
$tetradic-2-700: functions.make-color-mono($-tetradic-2-400, 700) !default;
$tetradic-2-800: functions.make-color-mono($-tetradic-2-400, 800) !default;
$tetradic-2-900: functions.make-color-mono($-tetradic-2-400, 900) !default;

// ## Tetradic (3) @ 270°
$tetradic-3-100: functions.make-color-mono($-tetradic-3-400, 100) !default;
$tetradic-3-200: functions.make-color-mono($-tetradic-3-400, 200) !default;
$tetradic-3-300: functions.make-color-mono($-tetradic-3-400, 300) !default;
$tetradic-3-400: $-tetradic-3-400 !default;
$tetradic-3-500: functions.make-color-mono($-tetradic-3-400, 500) !default;
$tetradic-3-600: functions.make-color-mono($-tetradic-3-400, 600) !default;
$tetradic-3-700: functions.make-color-mono($-tetradic-3-400, 700) !default;
$tetradic-3-800: functions.make-color-mono($-tetradic-3-400, 800) !default;
$tetradic-3-900: functions.make-color-mono($-tetradic-3-400, 900) !default;

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

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

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

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

$map-tetradic: core.map-collect($map-tetradic-1, $map-tetradic-2, $map-tetradic-3) !default;