@import "compass";
@import "color-schemer";


////////////////////////////////////////////
// SCHEME

// Pick the base color for your scheme:
$cs-primary: #198f91;

// Select your scheme from the list and place it here:
$cs-scheme: analogic; // mono, complement, triad, tetrad, analogic, accented-analogic

// How distant do you want the hue offset to be:
$cs-hue-offset: 40;

// How distant do you want tints and shades to be from their base:
$cs-brightness-offset: 10;

$cs-color-model: ryb; // rgb, ryb
$cs-colorblind: deuteranopia; // protanopia, deuteranopia, tritanopia, protanomaly, deuteranomaly, tritanomaly, monochromacy, amonochromacy

// Do you want to “harmonize” your color scheme with photoshop-like blendmodes?
// See Erica Schoonmaker's technique: http://methodandcraft.com/videos/creating-harmonious-color-schemes
// Modes:
// null (no effect), normal, multiply, lighten, darken, darkercolor, lightercolor, lineardodge, linearburn,
// difference, screen, exclusion, overlay, softlight, hardlight, colordodge, colorburn, linearlight,
// vividlight, pinlight, hardmix, colorblend, dissolve, divide, hue, luminosity, saturation, subtract
$cs-harmonize-mode    : null;
// What is your common harmonizing color?
$cs-harmonize-color   : $cs-primary;
// How strong do you want the effect to be?
$cs-harmonize-amount  : 10%;

$primary   : cs-primary();
$secondary : cs-secondary();
$tertiary  : cs-tertiary();
$quadrary  : cs-quadrary();

////////////////////////////////////////////
// Scheme
@include cs-test(
  ($primary, $secondary, $tertiary, $quadrary)
  , $element: ".scheme"
);

div {
  height: 40px;
}

////////////////////////////////////////////
// Harmonized
$cs-harmonize-mode    : multiply;
$cs-harmonize-color   : $cs-primary;
$cs-harmonize-amount  : 30%;
$primary   : cs-primary();
$secondary : cs-secondary();
$tertiary  : cs-tertiary();
$quadrary  : cs-quadrary();

@include cs-test(
  ($primary, $secondary, $tertiary, $quadrary)
  , $element: ".harmonized"
);

////////////////////////////////////////////
// RYB

@function cs-loop-ryb() {
  $list: ();
  @for $i from 0deg through 360deg / 8 {
    $color: ryb-adjust-hue(red, $i * 8);
    $list: append($list, $color);
  }
  @return $list;
}

@include cs-test(
  cs-loop-ryb()
  , $element: ".ryb"
);


////////////////////////////////////////////
// RGB

@function cs-loop-rgb() {
  $list: ();
  @for $i from 0deg through 360deg / 8 {
    $color: adjust-hue(red, $i * 8);
    $list: append($list, $color);
  }
  @return $list;
}

@include cs-test(
  cs-loop-rgb()
  , $element: ".rgb"
);

////////////////////////////////////////////
// CMYK

@function cs-loop() {
  $list: ();
  @for $i from 0deg through 360deg / 8 {
    $color: cs-cb(adjust-hue(red, $i * 8));
    $list: append($list, $color);
  }
  @return $list;
}

@include cs-test(
  green
  , $element: ".cmyk"
);

////////////////////////////////////////////
// CS-MIX

@function cs-loop() {
  $list: ();
  @for $i from 0deg through 360deg / 8 {
    $color: cs-cb(adjust-hue(red, $i * 8));
    $list: append($list, $color);
  }
  @return $list;
}

@include cs-test(
  blue
  , $element: ".cs-mix"
);

////////////////////////////////////////////
// MIX

@function cs-loop() {
  $list: ();
  @for $i from 0deg through 360deg / 8 {
    $color: cs-cb(adjust-hue(red, $i * 8));
    $list: append($list, $color);
  }
  @return $list;
}

@include cs-test(
  blue
  , $element: ".mix"
);


////////////////////////////////////////////
// Color Blind

@function cs-loop-color-blind() {
  $list: ();
  @for $i from 0deg through 360deg / 8 {
    $color: cs-cb(adjust-hue(red, $i * 8));
    $list: append($list, $color);
  }
  @return $list;
}

@include cs-test(
  cs-loop-color-blind()
  , $element: ".cb"
);

////////////////////////////////////////////

html {
  height: 100%;
}
body {
  display: table;
  width: 100%;
  height: 100%;
  margin: 0;
}
div {
  // display: table-row !important;
  // height: auto !important;
}






