/***
 * Colors
 *
 * These colors define the look of the guide itself, _not_ anything within the examples.
 *
 * path: .
 */

/***
 * Primary Palette
 *
 * The main colors used for the Autoguide template.  By default, these colors get
 * reused for the more detailed palette.
 *
 * Note to learners: these variable names are less than stellar.  They're kept
 * intentionally vague, because of their wide application.
 *
 * path: ./colors
 * order: 0
 * template: color
 */
$text: #333 !default;
$background-primary: #fff !default;
$background-secondary: #e9eaf0 !default;
$accent-primary: #046C6F !default;
$accent-primary-light: #11c1c4 !default;
$accent-secondary: #14477a !default;
$accent-secondary-light: #186cbf !default;

/***
 * Detailed Palette
 *
 * These are the colors that will actually appear throughout the generated guide.
 * Altering these will grant a very fine level of control over components.
 *
 * The colors titled `$background-*` are used directly as the background property
 * for their given element, so you can replace them with anything that could apply
 * there.  For example: `$background-header: url(https://morbotron.com/img/S03E06/1053451.jpg) center center no-repeat`.
 *
 * path: ./colors
 * order: 1
 * template: color
 */
$text-body: $text !default;
$text-headlines: $text !default;
$text-subtle: rgba($text, .5) !default;
$text-inverted: white !default;
$text-header: $text-inverted !default;
$text-footer: rgb(255, 255, 255) !default;
$text-code: $text !default;
$background-header: $accent-primary !default;
$background-body: $background-primary !default;
$background-code: $background-secondary !default;
$background-tray: $background-primary !default;
$background-footer: #66676a !default;
$border-html: $background-secondary !default;
$border-code: $background-secondary !default;
$border-tray: $background-secondary !default;
$border-input: $background-secondary !default;
$overlay-columns: rgba($accent-primary, .1) !default;


/***
 * Code Colors
 *
 * These are the color variables that can be overridden for code blocks.
 *
 * template: color
 * path: ./molecules/code block
 */
$code-comment: $text-subtle !default;
$code-quote: $text-subtle !default;
$code-keyword: $text-code !default;
$code-selector-tag: $text-code !default;
$code-subst: $text-code !default;
$code-number: $accent-primary-light !default;
$code-literal: $accent-primary-light !default;
$code-variable: $accent-primary-light !default;
$code-template-variable: $accent-primary-light !default;
$code-tag-attr: $accent-primary-light !default;
$code-string: $accent-secondary-light !default;
$code-doctag: $accent-secondary-light !default;
$code-title: $accent-secondary !default;
$code-section: $accent-secondary !default;
$code-selector-id: $accent-secondary !default;
$code-type: $accent-primary !default;
$code-class-title: $accent-primary !default;
$code-tag: darken($accent-primary, 4) !default;
$code-name: darken($accent-primary, 4) !default;
$code-attribute: darken($accent-primary, 4) !default;
$code-regexp: $accent-secondary !default;
$code-link: $accent-secondary !default;
$code-symbol: darken($accent-secondary, 4) !default;
$code-bullet: darken($accent-secondary, 4) !default;
$code-built_in: $accent-primary !default;
$code-builtin-name: $accent-primary !default;
$code-meta: $text-subtle !default;