@function hex2rgb($hexColor) {
  @return "#{red($hexColor)},#{green($hexColor)},#{blue($hexColor)}";
}

:root {
  /* Theme Color Palette */

  /* Neutrals */
  --color-black:      #{hex2rgb(#000000)};
  --color-dark-gray:  #{hex2rgb(#333333)};
  --color-light-gray: #{hex2rgb(#888888)};
  --color-white:      #{hex2rgb(#ffffff)};

  /* Brand Colors */
  --color-water-blue:       #{hex2rgb(#1277c4)};
  --color-denim-blue:       #{hex2rgb(#004b84)};
  --color-dark-denim-blue:  #{hex2rgb(#004b84)};
}

@mixin color-group-light {
  // --color-primary-1:            var(--color-cool-blue);
  // --color-primary-2:            var(--color-ceramic-blue);
  // --color-primary-3:            var(--color-bright-purple);
  --color-background:           var(--color-white);
  // --color-background-muted:     var(--color-cool-white);
  // --color-background-highlight: var(--color-cool-white);
  --color-text:                 var(--color-dark-gray);
  --color-text-print:           var(--color-black);
  --color-text-muted:           var(--color-light-gray);
  // --color-text-error:           var(--color-brick-red);
  // --color-text-valid:           var(--);
  --color-text-inverse:         var(--color-white);
  --color-text-metadata:        var(--color-dark-gray);

  /* Black and white relative to the color group background */
  --color-high-contrast:          var(--color-black);
  --color-high-contrast-inverse:  var(--color-white);

  /* Links */
  --color-link:                 var(--color-water-blue);
  --text-decoration-link:       underline;

  --color-link-hover:           var(--color-water-blue);
  --text-decoration-link-hover: underline;
  --opacity-link-hover:         0.7;

  /* Navigation Links */
  --color-navigation-link:                 var(--color-water-blue);
  --text-decoration-navigation-link:       underline;

  --color-navigation-link-hover:           var(--color-water-blue);
  --text-decoration-navigation-link-hover: underline;
  --opacity-navigation-link-hover:         0.7;

  /* Tags */
  --color-tag-text:             var(--color-white);
  --color-tag-background:       var(--color-denim-blue);
  // --color-tag-highlight:        var(--color-cool-blue);
  // --color-tag-hover-text:       var(--color-white);
  // --color-tag-hover-background: var(--color-cool-blue);
  // --opacity-tag-hover:          var(--opacity-hover);

  /* Buttons */
  --color-button-primary:         var(--color-denim-blue);
  // --color-button-primary-hover:   var(--color-cool-blue);
  // --color-button-primary-pressed: var(--color-ceramic-blue);
  --opacity-button-primary-hover: 1;

  /* Borders */
  // --color-border-subtle:        var(--color-background-highlight);
  // --color-border-standard:      var(--color-background-highlight);
  // --color-border-bold:          var(--color-background-highlight);
}

@mixin color-group-dark {
  // --color-primary-1:            var(--color-cool-blue);
  // --color-primary-2:            var(--color-ceramic-blue);
  // --color-primary-3:            var(--color-bright-purple);
  --color-background:           var(--water-blue);
  // --color-background-muted:     var(--color-cool-white);
  --color-background-highlight: var(--color-denim-blue);
  --color-text:                 var(--color-white);
  --color-text-print:           var(--color-white);
  --color-text-muted:           var(--color-white);
  // --color-text-error:           var(--color-brick-red);
  // --color-text-valid:           var(--);
  --color-text-inverse:         var(--color-water-blue);
  --color-text-metadata:        var(--color-white);

  /* Black and white relative to the color group background */
  --color-high-contrast:          var(--color-white);
  --color-high-contrast-inverse:  var(--color-black);

  /* Links */
  --color-link:                 var(--color-white);
  --text-decoration-link:       underline;

  --color-link-hover:           var(--color-white);
  --text-decoration-link-hover: underline;
  --opacity-link-hover:         0.7;

  /* Navigation Links */
  --color-navigation-link:                 var(--color-white);
  --text-decoration-navigation-link:       underline;

  --color-navigation-link-hover:           var(--color-white);
  --text-decoration-navigation-link-hover: underline;
  --opacity-navigation-link-hover:         0.7;

  /* Tags */
  // --color-tag-text:             var(--color-white);
  --color-tag-background:       var(--color-white);
  // --color-tag-highlight:        var(--color-cool-blue);
  // --color-tag-hover-text:       var(--color-white);
  // --color-tag-hover-background: var(--color-cool-blue);
  // --opacity-tag-hover:          var(--opacity-hover);

  /* Buttons */
  // --color-button-primary:         var(--color-denim-blue);
  // --color-button-primary-hover:   var(--color-cool-blue);
  // --color-button-primary-pressed: var(--color-ceramic-blue);
  --opacity-button-primary-hover: 1;

  /* Borders */
  // --color-border-subtle:        var(--color-background-highlight);
  // --color-border-standard:      var(--color-background-highlight);
  // --color-border-bold:          var(--color-background-highlight);
}

/*  Base */
:root {
  @include color-group-light;

  /* Borders */
  --border-subtle: 2px solid rgb(var(--color-border-subtle));
  --border-standard: 3px solid  rgb(var(--color-border-standard));
  --border-bold:   5px solid rgb(var(--color-border-bold));
}

/*Dark and Light Groups */
.u-color-group-dark {
  @include color-group-dark;

}
.u-color-group-light {
  @include color-group-light;
}