/*
 * Copyright (C) 2020 Hello Tham <info@hellotham.com>
 * Copyright (C) 2020 Chris Tham <chris.tham@hellotham.com>
 *
 * Project:    Rosely
 * Version:    1.0.0
 * Repository: https://github.com/hellotham/rosely
 * License:    MIT
 * References:
 *   https://www.w3.org/TR/css-variables
 *   https://www.w3.org/TR/selectors/#root-pseudo
 *   https://drafts.csswg.org/css-variables
 *   https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
 *   http://warpspire.com/kss
 *   https://github.com/kss-node/kss-node
 */

/*
Rosely: A warm and serene color palette based on millennial pink
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 Rosely
*/

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

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

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

  Styleguide Rosely - Velvet Night
  */
  --rosely0: #27272a;
  --nord0: #27272a;
  --base00: #27272a;

  /*
  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:#615f5f; width=60; height=60"></div>

  Styleguide Rosely - Velvet Night
  */
  --rosely1: #615f5f;
  --nord1: #615f5f;
  --base01: #615f5f;

  /*
  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 highlight color.

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

  Styleguide Rosely - Velvet Night
  */
  --rosely2: #85677b;
  --nord2: #85677b;
  --base02: #85677b;

  /*
  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:#a49e9e; width=60; height=60"></div>

  Styleguide Rosely - Velvet Night
  */
  --rosely3: #a49e9e;
  --nord3: #a49e9e;
  --base03: #a49e9e;

  /*
  Base component color of "Spring Blossom".

  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:#f7caca; width=60; height=60"></div>

  Styleguide Rosely - Spring Blossom
  */
  --rosely4: #f7caca;
  --nord4: #f7caca;
  --base04: #f7caca;

  /*
  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:#f4dede; width=60; height=60"></div>

  Styleguide Rosely - Spring Blossom
  */
  --rosely5: #f4dede;
  --nord5: #f4dede;
  --base05: #f4dede;

  /*
  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 highlight color depending on the theme shading design.

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

  Styleguide Rosely - Spring Blossom
  */
  --rosely6: #f4eee8;
  --nord6: #f4eee8;
  --base06: #f4eee8;

  /*
  Bluish core color.

  Used for classes, types and documentation tags.

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

  Styleguide Rosely - Flower Meadow
  */
  --rosely7: #93a9d1;
  --nord7: #93a9d1;
  --base0C: #93a9d1;

  /*
  Lilac 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:#be9cc1; width=60; height=60"></div>

  Styleguide Rosely - Flower Meadow
  */
  --rosely8: #be9cc1;
  --nord8: #be9cc1;
  --base0D: #be9cc1;

  /*
  Mauve 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:#b0879b; width=60; height=60"></div>

  Styleguide Rosely - Flower Meadow
  */
  --rosely9: #b0879b;
  --nord0: #b0879b;
  --base0E: #b0879b;

  /*
  Purple core color.

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

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

  Styleguide Rosely - Flower Meadow
  */
  --rosely10: #b565a7;
  --nord10: #b565a7;
  --base0F: #b565a7;

  /*
  Colorful component color.

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

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

  Styleguide Rosely - Vivid Floriade
  */
  --rosely11: #d2386c;
  --nord11: #d2386c;
  --base08: #d2386c;

  /*
  Colorful component color.

  Used for annotations.

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

  Styleguide Rosely - Vivid Floriade
  */
  --rosely12: #ec809e;
  --nord12: #ec809e;
  --base09: #ec809e;

  /*
  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:#eada4f; width=60; height=60"></div>

  Styleguide Rosely - Vivid Floriade
  */
  --rosely13: #eada4f;
  --nord13: #eada4f;
  --base0A: #eada4f;

  /*
  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:#64bfa4; width=60; height=60"></div>

  Styleguide Rosely - Vivid Floriade
  */
  --rosely14: #64bfa4;
  --nord14: #64bfa4;
  --base0B: #64bfa4;

  /*
  Colorful component color.

  Used for numbers.

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

  Styleguide Rosely - Vivid Floriade
  */
  --rosely15: #919bc9;
  --nord15: #919bc9;
  --base07: #fff;
}