// Colors variables
//
// config/colors.scss
//
// $color-priam - Main gray
//
// markup:
//   <div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>
//
//
// Styleguide 1.2
$white: #fff !default;
$black: #000 !default;


// -----------COLOUR NAMING CONVENTION ----------//

// The above are so obvious that they stay as they are. There is just one total black and one total white.

// A general situation on a website looks like this: There are 2-3 main sets of colours and there are accents.
//
// There is however not a single easy way to see which colours will end up where
// on which website or even in a particular section.
// Any naming convention is bound to fail. To devise a mechanism in which we do not end up with contradicting
// names and values for colors, we completely abstract variable names from colors they hold.
// In this way we hope we can build many websites on the same codebase without making a mess and perhaps with
// some additional fun.
//
// The approach:
// We derive the names of the variables from the participants of the Trojan wars (The Greeks and the Trojans)
// Plenty of names can be found here: https://en.wikipedia.org/wiki/Trojan_War

// We then obviously have 2 sets of colors (one for the Trojans and one for the Greeks). If you need a 3rd set,
// use greek gods
// Accents are named after those who stood out in the wars: Achilles, Hector, Helen, the Trojan horse ;)

// I don't know if this is a good idea but all the others failed immediately when I wanted to theme site
// number 2 which was brown/orange, when the first base was blue/grey. This was not even a case of dark vs bright
// but a completely different set of colours. Hence this small experiment.

// The Greeks
// To use: Thersites Achaeans Myrmidons Diores Leitus

$color-agamemnon: #ac0000 !default; // Main color, it changes backgrounds, menu and link color.
$color-menelaus: #5d98ce !default; // Mobile menu link border.
$color-nestor: #ff9475 !default; // Alt lines, em text. bootstrap secondary.
$color-odysseus: white !default;
$color-diomedes: #d3d7d9 !default;
$color-patroclus: #979797 !default;
$color-thersites: #dee2e6 !default;

// The Trojans
// To use: Acamas Chromius Euphemus Hector Demoleon
$color-priam: #7a7a7a !default;
$color-hecuba: #727272 !default;
$color-troilus: #4c4c4c !default;
$color-acamas: #262626 !default;
$color-cassandra: black !default;
$color-andromache: #d2d2d2 !default;
$color-aeneas: #8e8a89 !default;
$color-penthesilea: #969696 !default;
$color-leto: #f1f1f1 !default;
$color-serpedon: #39b54a !default;
$color-acamas: #383838 !default;

// The accents
// To use: Helen Iphis Clymene Phobos Deimos Apollo
$color-hector: #d3d3d3 !default;
$color-achillies: $color-agamemnon !default; // Bootstrap primary color. By default equal to main color.
$color-helen: #ac0000 !default; // TODO: to remove
$color-paris: #e4e4e4 !default;
$color-iphis: #ababab !default;

// The Gods
// Caused the war: Eris Zeus
// On the Greek side: Athena Hera Hephaestus Hermes Poseidon Thetis
// On the Trojan side: Aphrodite Apollo Ares Artemis Leto Scamander

//$colour-zeus: #ff0000 !default; // just an example


// Styleguide 1.1.1

// --------------READ THIS -------------------
// Here we can stick in only general colour applicable to the whole site
// So only applicable to generic elements <html><body><p><ul> etc not restricted
// to a particular block, paragraph or section
// All other colours should be defined in a component they refer to and have own variables
// For example check _d_p_banner.scss

$link-color: $color-agamemnon !default;
$link-hover-color: darken($link-color, 5%) !default;
