/*
++++++++++++++++++++++++++++++++++++++++++++++++++++
title      Nord                                    +
project    nord                                    +
version    0.2.0                                   +
repository https://github.com/arcticicestudio/nord +
author     Arctic Ice Studio                       +
email      development@arcticicestudio.com         +
copyright  Copyright (C) 2016                      +
++++++++++++++++++++++++++++++++++++++++++++++++++++

[References]
W3C
  (https://www.w3.org/TR/css-variables)
  (https://www.w3.org/TR/selectors/#root-pseudo)
CSS Working Group
  (https://drafts.csswg.org/css-variables)
MDN
  (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)
KSS
  (http://warpspire.com/kss)
kss-node
  (https://github.com/kss-node/kss-node)
*/

@import "nord";

/*
A arctic, north-bluish color palette.
Created for the clean- and minimal flat design pattern to achieve a optimal focus and readability for code syntax
highlighting and UI.
It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful
ambiance.

Styleguide Nord
*/

:root {
  /*
  Base component color of "Polar Night".

  Used for texts, backgrounds, carets and structuring characters like curly- and square brackets.

  Markup:
  <div style="background-color:#2E3440; width=60; height=60"></div>

  Styleguide Nord - Polar Night
  */
  --nord0: $nord0;

  /*
  Lighter shade color of the base component color.

  Used as a lighter background color for UI elements like status bars.

  Markup:
  <div style="background-color:#3B4252; width=60; height=60"></div>

  Styleguide Nord - Polar Night
  */
  --nord1: $nord1;

  /*
  Lighter shade color of the base component color.

  Used as line highlighting in the editor.  
  In the UI scope it may be used as selection- and hightlight color.

  Markup:
  <div style="background-color:#434C5E; width=60; height=60"></div>

  Styleguide Nord - Polar Night
  */
  --nord2: $nord2;

  /*
  Lighter shade color of the base component color.

  Used for comments, invisibles, indent- and wrap guide marker.  
  In the UI scope used as pseudoclass color for disabled elements.

  Markup:
  <div style="background-color:#4C566A; width=60; height=60"></div>

  Styleguide Nord - Polar Night
  */
  --nord3: $nord3;

  /*
  Base component color of "Snow Storm".

  Main color for text, variables, constants and attributes.
  In the UI scope used as semi-light background depending on the theme shading design.

  Markup:
  <div style="background-color:#D8DEE9; width=60; height=60"></div>

  Styleguide Nord - Snow Storm
  */
  --nord4: $nord4;

  /*
  Lighter shade color of the base component color.

  Used as a lighter background color for UI elements like status bars.  
  Used as semi-light background depending on the theme shading design.

  Markup:
  <div style="background-color:#E5E9F0; width=60; height=60"></div>

  Styleguide Nord - Snow Storm
  */
  --nord5: $nord5;

  /*
  Lighter shade color of the base component color.

  Used for punctuations, carets and structuring characters like curly- and square brackets.  
  In the UI scope used as background, selection- and hightlight color depending on the theme shading design.

  Markup:
  <div style="background-color:#ECEFF4; width=60; height=60"></div>

  Styleguide Nord - Snow Storm
  */
  --nord6: $nord6;

  /*
  Bluish core color.

  Used for classes, types and documentation tags.

  Markup:
  <div style="background-color:#8FBCBB; width=60; height=60"></div>

  Styleguide Nord - Frost
  */
  --nord7: $nord7;

  /*
  Bluish core accent color.

  Represents the accent color of the color palette.  
  Main color for primary UI elements and methods/functions.

  Can be used for
    - Markup quotes
    - Markup link URLs

  Markup:
  <div style="background-color:#88C0D0; width=60; height=60"></div>

  Styleguide Nord - Frost
  */
  --nord8: $nord8;

  /*
  Bluish core color.

  Used for language-specific syntactic/reserved support characters and keywords, operators, tags, units and
  punctuations like (semi)colons,commas and braces.

  Markup:
  <div style="background-color:#81A1C1; width=60; height=60"></div>

  Styleguide Nord - Frost
  */
  --nord9: $nord9;

  /*
  Bluish core color.

  Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`).

  Markup:
  <div style="background-color:#5E81AC; width=60; height=60"></div>

  Styleguide Nord - Frost
  */
  --nord10: $nord10;

  /*
  Colorful component color.

  Used for errors, git/diff deletion and linter marker.

  Markup:
  <div style="background-color:#BF616A; width=60; height=60"></div>

  Styleguide Nord - Aurora
  */
  --nord11: $nord11;

  /*
  Colorful component color.

  Used for annotations.

  Markup:
  <div style="background-color:#D08770; width=60; height=60"></div>

  Styleguide Nord - Aurora
  */
  --nord12: $nord12;

  /*
  Colorful component color.

  Used for escape characters, regular expressions and markup entities.  
  In the UI scope used for warnings and git/diff renamings.

  Markup:
  <div style="background-color:#EBCB8B; width=60; height=60"></div>

  Styleguide Nord - Aurora
  */
  --nord13: $nord13;

  /*
  Colorful component color.

  Main color for strings and attribute values.  
  In the UI scope used for git/diff additions and success visualizations.

  Markup:
  <div style="background-color:#A3BE8C; width=60; height=60"></div>

  Styleguide Nord - Aurora
  */
  --nord14: $nord14;

  /*
  Colorful component color.

  Used for numbers.

  Markup:
  <div style="background-color:#B48EAD; width=60; height=60"></div>

  Styleguide Nord - Aurora
  */
  --nord15: $nord15;
}