:root {
  --logo-color-symbol:                #3CA465;
  --logo-color-type:                  #414141;
  --logo-color-type-line:             #3CA465;

  // Base colors
  --color-black:                      #000000;
  --color-white:                      #FFFFFF;

  --color-contrast-0:                 #FFFFFF;
  --color-contrast-2:                 #F2F2F6;
  --color-contrast-5:                 #EDEDF2;
  --color-contrast-10:                #E1E1E6;
  --color-contrast-15:                #D4D4D9;
  --color-contrast-20:                #C8C8CC;
  --color-contrast-30:                #AFAFB3;
  --color-contrast-40:                #969699;
  --color-contrast-50:                #7D7D80;
  --color-contrast-60:                #646466;
  --color-contrast-70:                #4B4B4C;
  --color-contrast-80:                #323233;
  --color-contrast-90:                #19191A;
  --color-contrast-100:               #000000;

  // Primary colors
  --color-primary:                    #5FBF8E;
  --color-primary-ultralight:         #CEE8D8;
  --color-primary-dark:               #4FA884;
  --color-primary-contrast:           #FFFFFF;

  --color-warning:                    #E9D04F;
  --color-warning-ultralight:         #F9F3D3;
  --color-warning-dark:               #CFB738;
  --color-warning-contrast:           #FFFFFF;

  --color-critical:                   #E13C5A;
  --color-critical-ultralight:        #F7CED6;
  --color-critical-dark:              #BF334D;
  --color-critical-contrast:          #FFFFFF;

  // State colors
  --color-error:                      var(--color-critical);
  --color-success:                    var(--color-primary);

  --color-border:                     var(--color-contrast-10);
  --color-border-dark:                var(--color-contrast-15);
  --color-border-light:               var(--color-contrast-2);
  --color-link:                       var(--color-primary);

  // Buttons
  --btn-color:                        var(--color-contrast-100);
  --btn-color-hover:                  var(--color-contrast-80);
  --btn-color-active:                 var(--color-contrast-15);
  --btn-color-focus:                  var(--color-contrast-15);
  --btn-color-disabled:               var(--color-contrast-40);
  --btn-color-shadow:                 var(--color-contrast-15);
  --btn-color-contrast:               var(--color-contrast-0);

  --btn-icon-color-focus:             var(--color-contrast-5);

  // Forms
  --field-bg:                         var(--color-contrast-2);
  --field-bg-hover:                   var(--color-contrast-5);
  --field-bg-disabled:                var(--color-contrast-10);
  --field-label-color:                var(--color-contrast-40);
  --field-label-color-disabled:       var(--color-contrast-30);
  --field-value-color:                var(--color-contrast-100);
  --field-value-color-disabled:       var(--color-contrast-60);
  --field-invalid-bg:                 var(--color-critical-ultralight);
  --field-icon-color:                 var(--field-value-color);
  --field-icon-disable-color:         var(--field-value-disabled);

  // Select
  --select-color-hover:               var(--color-contrast-2);

  // Checkbox & Radio
  --checkRadioShadow:                 none;
  --checkRadioBackground:             var(--color-contrast-0);
  --checkRadioBackgroundCheck:        var(--color-primary);
  --checkRadioBackgroundDisabled:     var(--color-contrast-10);

  --checkRadioBorderColor:            var(--color-contrast-10);
  --checkRadioBorderColorFocus:       var(--color-contrast-5);
  --checkRadioBorderColorHover:       var(--color-primary);
  --checkRadioBorderColorCheck:       var(--color-primary);

  --checkRadioMarkColor:              var(--color-primary-contrast);
  --checkRadioMarkColorDisabled:      var(--color-contrast-0);

  --checkRadioLabelDisabled:          var(--color-contrast-40);
}

/*
@media (prefers-color-scheme: dark) {
  :root {

  }
}*/
