// ==========================================================================
// # Square
// ==========================================================================
// 
// Square color scheme is a four-color combination consisting of a base
// color and three colors that are 90 degrees apart from the base color.
//
// | Model | Color     | Chromatic | Harmonized |         | 
// | :---: | :-------: | :-------: | :-------:  | :---:   |
// | RGB   | #8e43e7   | #e7434a   | #d94363    | 90°     |
// |       |           | #9ce743   | #9ad555    | 180°    |
// |       |           | #43e7e0   | #4fcde1    | 270°    |

// | Model | Color     | Chromatic | Harmonized |         | 
// | :---: | :-------: | :-------: | :-------:  | :---:   |
// | RYB   | #8e43e7   | #e75943   | #d9555d    | 90°     |
// |       |           | #e7d443   | #ddc455    | 180°    |
// |       |           | #43e788   | #4fcd97    | 270°    |
// 
// @debug color.adjust(#8e43e7, $hue: 90);
// @debug color.adjust(#8e43e7, $hue: 180);
// @debug color.adjust(#8e43e7, $hue: 270);
// 
// @debug functions.adjust-hue-ryb(#8e43e7, 90);
// @debug functions.adjust-hue-ryb(#8e43e7, 180);
// @debug functions.adjust-hue-ryb(#8e43e7, 270);
// 

@use "sass:color";

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

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

$-square-1-400: color.adjust(core.$brand-color, $hue: 90);
$-square-2-400: color.adjust(core.$brand-color, $hue: 180);
$-square-3-400: color.adjust(core.$brand-color, $hue: 270);

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

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

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

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

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

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

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

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

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

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

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