/* 10-vars.css */

:root {
  /* using a triadic color scheme based on my primary color choice */
  --site-primary-color:   #87e0fd;
  --site-secondary-color: #fd87df;
  --site-tertiary-color:  #dffd87;

  /* generic gradients */
  --site-generic-gradient-1: #69ECF5;

  /* matching gradients */
  --site-matching-gradient-1: #7cc2f4;
  --site-matching-gradient-2: #85a3e2;
  --site-matching-gradient-3: #8481c3;

  /* squash palette */
  --site-squash-palette-1: #fe9cb1;
  --site-squash-palette-2: #7dc984;

  /* related neutral colors */
  --site-neutral-black: #334A52;
  --site-neutral-gray:  #96AFB8;
  --site-neutral-white: #EAFCFF;

  --button-border-color:          var(--site-neutral-black);
  --button-background-color:      var(--site-matching-gradient-1);
  --dialog-background-color:      var(--site-neutral-white);
  --dialog-border-color:          var(--site-neutral-black);
  --destructive-background-color: var(--site-squash-palette-1);
  --footer-background-color:      var(--site-matching-gradient-1);
  --item-border-color:            var(--site-neutral-gray);
  --item-background-color:        var(--site-generic-gradient-1);
  --header-background-color:      var(--site-matching-gradient-1);
  --menu-background-color:        var(--header-background-color);
  --notes-background-color:       var(--site-matching-gradient-2);
  --notes-border-color:           var(--site-neutral-black);
  --ok-button-background-color:   var(--site-squash-palette-2);
  --ok-button-text-color:         var(--site-neutral-white);
  --site-background-color:        var(--site-primary-color);

  /* CSS doesn't allow me to do something like:
   * foo {
   *  content: '«';
   * }
   *
   * So I mimic it by doing:
   * foo {
   *  content: vars(--laquo);
   * }
   *
   * Note: if this gets confusing I may change 
   * it from --<entity> to --html-<entity>
   */

  /* HTML entities */
  --laquo: "\00ab";
  --raquo: "\00bb";

} /* :root */